Trying to write my first ever Shader, and I’m getting the following error:
THREE.WebGLProgram: shader error: 0 35715 false gl.getProgramInfoLog Must have a compiled vertex shader attached. THREE.WebGLShader: gl.getShaderInfoLog() vertex
ERROR: 0:61: '}' : syntax error1: #version 300 es
2: #define attribute in
3: #define varying out
4: #define texture2D texture
5: precision highp float;
6: precision highp int;
7: #define HIGH_PRECISION
8: #define SHADER_NAME ShaderMaterial
9: #define VERTEX_TEXTURES
10: #define GAMMA_FACTOR 2
11: #define MAX_BONES 0
12: #define BONE_TEXTURE
13: uniform mat4 modelMatrix;
…and on it goes on and on.
Here’s my Shader code - which is in the HEAD section of my HTML document, under my other <script> tags:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.min.js"></script>
<script type="text/javascript" src="JS/dat.gui.min.js"></script>
<script type="x-shader/x-vertex" id="vertexShader">
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0)
}
</script>
<!-- Set just one color: RED (with alpha value of 0) -->
<script type="x-shader/x-fragment" id="fragmentShader">
void main() {
gl_fragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
</script>
I’m then trying to call it in a simple sphere-making code:
let sphere2Geometry = new THREE.SphereGeometry(10, 10, 10);
const sphere2Material = new THREE.ShaderMaterial( {
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );
let sphere2 = new THREE.Mesh(sphere2Geometry, sphere2Material);
So what’s the problem here? What does " Must have a compiled vertex shader attached" mean exactly?
