TacoB0t - 1 year ago 121

HTML Question

I'm a bit new to HTML and Javascript and within 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, it 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 of script tags in HTML?

Recommended for you: Get network issues from **WhatsUp Gold**. **Not end users.**

Answer Source

That code above is not JavaScript it's GLSL. It's the language used to write programs that run on your GPU. It doesn't have a keyword `var`

. Instead to declare 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're trying to do above but all your equations produce `vec3`

.

Also GLSL 1.00 es is strict about types. You can't use vec3 with integers. You have to use floating point numbers. `0.0`

instead of `0`

. The last line there is no function `pow`

that takes a vec3 on the left and a single value on the right so `vec3(10)`

takes the integer `10`

and casts it to a `vec3`

. It's the same as saying `vec3(10, 10, 10)`

.

Also GLSL doesn't have a `Math.`

library. It's built in functions are global.