Three.js GLSL shader couldn't compile

Question

I'm getting a compile error: THREE.WebGLShader: Shader couldn't compile.

I tried to insert some shaders grabbed from shaderfrog.com but they don't seem to compile.

I've used an example file and added my new vertex shader and fragment shader in to the dom.

<script id="vertexShader_new" type="x-shader/x-vertex">
  . . .
</script>

material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: document.getElementById('vertexShader_new').textContent,
    fragmentShader: document.getElementById('fragmentShader_new').textContent
});

I've changed the id's back to vertexShader and fragmentShader in the demo to show that the rest of the code is working with a simpler shader.

What's wrong with the shader? Link with the shader: Molten Noise shader

Mugen87 · Accepted Answer · 2019-06-10 15:22:13Z

There are two issues in you code:

You have to use RawShaderMaterial instead of ShaderMaterial. Otherwise it's wrong to define attributes like position or normal since they are part of the set of Built-in attributes and uniforms, see docs.

You have to define all uniforms in your shader definition, not just two of it. Otherwise the uniforms have undefined values which produces a wrong output. So the correct uniforms definition looks like so (notice that it's not necessary to define a type property anymore).

uniforms = {
    color1: { value: new THREE.Color( 0xff0000 ) },
    color2: { value: new THREE.Color( 0x00ff00 ) },
    color3: { value: new THREE.Color( 0x0000ff ) },
    iterations: { value: 1 },
    permutations: { value: 10 },
    brightness: { value: 1 },
    time: { value: 1 },
    speed: { value: 0.02 },
    uvScale: { value: new THREE.Vector2(1, 1) }
};

Working demo: https://jsfiddle.net/qb6u8vjp/5/

three.js R105

Collectives™ on Stack Overflow

Three.js GLSL shader couldn't compile

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