I am trying to compute the surface normal for a height map in GLSL. I basically copied the code from a SO answer here with minor changes to match my vars:
77: float s01 = textureOffset(uTexture, uv, off.xy).x;
78: float s21 = textureOffset(uTexture, uv, off.zy).x;
79: float s10 = textureOffset(uTexture, uv, off.yx).x;
80: float s12 = textureOffset(uTexture, uv, off.yz).x;
81: vec3 va = normalize(vec3(size.xy, s21-s01));
82: vec3 vb = normalize(vec3(size.yx, s12-s10));
83: vec3 vNormal = cross(va,vb);
where
uniform sampler2D uTexture;
attribute vec2 uv;
const vec2 size = vec2(2.0, 0.0);
const ivec3 off = ivec3(-1, 0, 1);
The problem is that the compiler returns the errors:
THREE.WebGLProgram: shader error: 0 gl.VALIDATE_STATUS false gl.getProgramInfoLog invalid shaders ERROR: 0:77: 'textureOffset' : no matching overloaded function found
ERROR: 0:77: 'x' : field selection requires structure or vector on left hand side
ERROR: 0:78: 'textureOffset' : no matching overloaded function found
ERROR: 0:78: 'x' : field selection requires structure or vector on left hand side
ERROR: 0:79: 'textureOffset' : no matching overloaded function found
ERROR: 0:79: 'x' : field selection requires structure or vector on left hand side
ERROR: 0:80: 'textureOffset' : no matching overloaded function found
ERROR: 0:80: 'x' : field selection requires structure or vector on left hand side
The compiler is apparently choosing the wrong overload of textureOffset, but looking at the spec here, it looks like it should work fine. So... what am I missing? I'm still researching, but any tips for a GLSL newbie would be appreciated. TIA.
Note: This is on OSX with three.js r85
Looking at the spec for webgl 1.0 shaders are explicitly restricted to the shader glsl spec Es 1.0 which doesn't include textureOffset.
WebGL 2.0 can use ES 3.0 shaders which do include textureOffset.
I.e. The restriction you are hitting is mandated by the Webgl 1.0 spec, rather than a browser/three.js/platform fault.