Shader error ("must have compiled vertex shader attached")

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;
8: #define SHADER_NAME ShaderMaterial
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=""></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)

<!-- 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);

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?

You forgot to put “;” at the end of the line in vertex shader.

1 Like

Indeed! :grimacing:

Thanks! :nerd_face: