JS - Undeclared identifier: "var" in the GLSL script

Question

I am a little new to HTML and Javascript, and in my html I have the following code:

<script id="fragmentShader" type="x-shader/x-fragment"> precision mediump float; //varying vec3 fragmentColor; //not needed? varying vec3 fragmentNormal; varying vec3 fragmentLight; varying vec3 fragmentView; uniform vec3 modelColor; uniform vec3 lightColor; void main() { var m = normalize(fragmentNormal); var l = normalize(fragmentLight); var v = normalize(fragmentView); var h = normalize(l + v); var d = Math.max(l * m , 0); var s = Math.pow(Math.max(h * m, 0), 10); fragmentColor = modelColor * lightColor * d + lightColor * s; gl_FragColor = vec4(fragmentColor, 1.0); } </script> 

However he returns

 Failed to compile shader: ERROR: 0:13: 'var' : undeclared identifier ERROR: 0:13: 'm' : syntax error 

Am I not allowed to declare / define variables inside script tags in HTML?

Answer 1

This code is not JavaScript, but GLSL . This is the language used to write programs that run on your GPU. It does not have the var keyword. Instead of declaring variables in GLSL, you need to put a type in front of them

 vec3 m = normalize(fragmentNormal); vec3 l = normalize(fragmentLight); vec3 v = normalize(fragmentView); vec3 h = normalize(l + v); vec3 d = max(l * m , 0.0); vec3 s = pow(max(h * m, 0.0), vec3(10)); 

I'm not sure what you are trying to do above, but all your equations produce vec3 .

Also GLSL 1.00 es is strictly type specific. You cannot use vec3 with integers. You must use floating point numbers. 0.0 instead of 0 . The last line does not have a pow function that takes vec3 on the left and one value on the right, so vec3(10) takes an integer 10 and discards it on vec3 . This is the same as vec3(10, 10, 10) .

GLSL also does not have a Math. library Math. . Built-in functions are global.