Accessing shader file contents for three.js using jquery

Question

I need to access the text of a string which I import using HTML from inside another script.

I include the text file in question in the html file:

<script src="shaders/fragmentshader.fs" id=fragmentshader></script>

I then want to put the contents of this file in a variable within another script file and use it as a shader for three,js :

var fShader = $('#fragmentshader');

var shader = new THREE.ShaderMaterial({
    vertexShader: vShader.text(),
    fragmentShader: fShader.text()
});

This code works fine if I just write the necessary shader code between the script tags in the html file, but only accesses the strict url(not the data) if used as above.

My question is how do I access the text within the file after loading it as shown above?

Aleksandr Sabov · Accepted Answer · 2015-04-21 19:19:04Z

4

You can't load shaders using src in script tag.

You can use ShaderLoader.js and then write:

<script data-src="shaders/name/vertex.js" data-name="shader" 
type="x-shader/x-vertex"></script>

In js:

SHADER_LOADER.load(function(data) {
    var particlesVertexShader = data.shader.vertex;
});

edited Apr 21, 2015 at 19:19

answered Jan 5, 2014 at 20:25

Aleksandr Sabov

6657 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Accessing shader file contents for three.js using jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related