WebGL error with simple vertex shader

Questions
,
1

I wrote a simple shader that rotates an object, you can see it here:

precision mediump float; //I tried to write this here, but does not help
uniform float angle;                    
void main()	{                           
    float sina = sin(angle); 
    float cosa = cos(angle); 
    mat4 rotMat = (          
        cosa, 0.0, -sina, 0.0,   
        0.0,    1.0    0.0,   1.0,   
        sina, 0.0, cosa,  0.0,   
        0.0,    0.0,   0.0,   1.0    
    );                       
    vec4 rotatedPosition = rotMat * vec4(position, 1.0); 
    gl_Position = projectionMatrix * modelViewMatrix * rotatedPosition; 
}

The angle unifrom is passed in like so:

 const coinUniforms = { 
    angle: { type: 'float', value: 0.0 }
}
const coinMaterial = new THREE.ShaderMaterial({
    uniforms: coinUniforms,
    wireframe: false,
    side: THREE.DoubleSide,
    vertexShader: SHADERS.coinRotationShader(), //performs rotation
    fragmentShader: SHADERS.coinFragmentShader()
});

When I run the code, however I get a strange error from WebGL:

ERROR: 0:51: ‘0.0’ : syntax error1: precision highp float;

I googled and found that you apparently need to specify float precision in WebGL but the ThreeJs shader material does that for you. And how can 0.0 be a syntax error? Help is appreciated!

Pasting the full log here, could be useful:

THREE.WebGLProgram: shader error:
0
35715
false
gl.getProgramInfoLog
Must have a compiled vertex shader attached.
THREE.WebGLShader: gl.getShaderInfoLog() vertex
ERROR: 0:51: ‘0.0’ : syntax error1: precision highp float;
2: precision highp int;
3: #define HIGH_PRECISION
4: #define SHADER_NAME ShaderMaterial
5: #define VERTEX_TEXTURES
6: #define GAMMA_FACTOR 2
7: #define MAX_BONES 0
8: #define BONE_TEXTURE
9: #define DOUBLE_SIDED
10: uniform mat4 modelMatrix;
11: uniform mat4 modelViewMatrix;
12: uniform mat4 projectionMatrix;
13: uniform mat4 viewMatrix;
14: uniform mat3 normalMatrix;
15: uniform vec3 cameraPosition;
16: uniform bool isOrthographic;
17: #ifdef USE_INSTANCING
18: attribute mat4 instanceMatrix;
19: #endif
20: attribute vec3 position;
21: attribute vec3 normal;
22: attribute vec2 uv;
23: #ifdef USE_TANGENT
24: attribute vec4 tangent;
25: #endif
26: #ifdef USE_COLOR
27: attribute vec3 color;
28: #endif
29: #ifdef USE_MORPHTARGETS
30: attribute vec3 morphTarget0;
31: attribute vec3 morphTarget1;
32: attribute vec3 morphTarget2;
33: attribute vec3 morphTarget3;
34: #ifdef USE_MORPHNORMALS
35: attribute vec3 morphNormal0;
36: attribute vec3 morphNormal1;
37: attribute vec3 morphNormal2;
38: attribute vec3 morphNormal3;
39: #else
40: attribute vec3 morphTarget4;
41: attribute vec3 morphTarget5;
42: attribute vec3 morphTarget6;
43: attribute vec3 morphTarget7;
44: #endif
45: #endif
46: #ifdef USE_SKINNING
47: attribute vec4 skinIndex;
48: attribute vec4 skinWeight;
49: #endif
50:
51: precision mediump float; uniform float angle; void main() { float sina = sin(angle); float cosa = cos(angle); mat4 rotMat = ( cosa, 0.0, -sina, 0.0, 0.0, 1.0 0.0, 1.0, sina, 0.0, cosa, 0.0, 0.0, 0.0, 0.0, 1.0 ); vec4 rotatedPosition = rotMat * vec4(position, 1.0); gl_Position = projectionMatrix * modelViewMatrix * rotatedPosition; }

1 Like
2

I’ve created a live example with your code from stackoverflow and the code snippets here. I can’t reproduce the shader error. However, the rotation matrix was not setup correctly so it skewed the object.

https://jsfiddle.net/k940gody/

Any chances to reproduce the error by updating the fiddle?

1 Like
3

I copied the shaders from the fiddle, and now it’s rotating. What was the problem with the rotation matrix setup, just so that I dont make that mistake again?

EDIT: figured it out, I created the transpose of the matrix, it seems.

Oh and thanks for your help, here and on StackOverflow!

2 Likes