Three.js support for versions > r115

[josefheks]

I seem to be having issues running on more recent versions on Three.js.
Particularly wanting to get it to run on r123 in a desktop browser (Chrome) and encountering this shader error:

three.min.js:2 THREE.WebGLProgram: shader error:  0 35715 false gl.getProgramInfoLog Fragment shader is not compiled.
  THREE.WebGLShader: gl.getShaderInfoLog() fragment
ERROR: 0:89: '

: extension directive must occur before any non-preprocessor tokens in ESSL3
1: #version 300 es
2: #define varying in
3: out highp vec4 pc_fragColor;
4: #define gl_FragColor pc_fragColor
5: #define gl_FragDepthEXT gl_FragDepth
6: #define texture2D texture
7: #define textureCube texture
8: #define texture2DProj textureProj
9: #define texture2DLodEXT textureLod
10: #define texture2DProjLodEXT textureProjLod
11: #define textureCubeLodEXT textureLod
12: #define texture2DGradEXT textureGrad
13: #define texture2DProjGradEXT textureProjGrad
14: #define textureCubeGradEXT textureGrad
15: precision highp float;
16: precision highp int;
17: #define HIGH_PRECISION
18: #define SHADER_NAME ShaderMaterial
19: #define GAMMA_FACTOR 2
20: #define DOUBLE_SIDED
21: uniform mat4 viewMatrix;
22: uniform vec3 cameraPosition;
23: uniform bool isOrthographic;
24: 
25: vec4 LinearToLinear( in vec4 value ) {
26: 	return value;
27: }
28: vec4 GammaToLinear( in vec4 value, in float gammaFactor ) {
29: 	return vec4( pow( value.rgb, vec3( gammaFactor ) ), value.a );
30: }
31: vec4 LinearToGamma( in vec4 value, in float gammaFactor ) {
32: 	return vec4( pow( value.rgb, vec3( 1.0 / gammaFactor ) ), value.a );
33: }
34: vec4 sRGBToLinear( in vec4 value ) {
35: 	return vec4( mix( pow( value.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), value.rgb * 0.0773993808, vec3( lessThanEqual( value.rgb, vec3( 0.04045 ) ) ) ), value.a );
36: }
37: vec4 LinearTosRGB( in vec4 value ) {
38: 	return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a );
39: }
40: vec4 RGBEToLinear( in vec4 value ) {
41: 	return vec4( value.rgb * exp2( value.a * 255.0 - 128.0 ), 1.0 );
42: }
43: vec4 LinearToRGBE( in vec4 value ) {
44: 	float maxComponent = max( max( value.r, value.g ), value.b );
45: 	float fExp = clamp( ceil( log2( maxComponent ) ), -128.0, 127.0 );
46: 	return vec4( value.rgb / exp2( fExp ), ( fExp + 128.0 ) / 255.0 );
47: }
48: vec4 RGBMToLinear( in vec4 value, in float maxRange ) {
49: 	return vec4( value.rgb * value.a * maxRange, 1.0 );
50: }
51: vec4 LinearToRGBM( in vec4 value, in float maxRange ) {
52: 	float maxRGB = max( value.r, max( value.g, value.b ) );
53: 	float M = clamp( maxRGB / maxRange, 0.0, 1.0 );
54: 	M = ceil( M * 255.0 ) / 255.0;
55: 	return vec4( value.rgb / ( M * maxRange ), M );
56: }
57: vec4 RGBDToLinear( in vec4 value, in float maxRange ) {
58: 	return vec4( value.rgb * ( ( maxRange / 255.0 ) / value.a ), 1.0 );
59: }
60: vec4 LinearToRGBD( in vec4 value, in float maxRange ) {
61: 	float maxRGB = max( value.r, max( value.g, value.b ) );
62: 	float D = max( maxRange / maxRGB, 1.0 );
63: 	D = clamp( floor( D ) / 255.0, 0.0, 1.0 );
64: 	return vec4( value.rgb * ( D * ( 255.0 / maxRange ) ), D );
65: }
66: const mat3 cLogLuvM = mat3( 0.2209, 0.3390, 0.4184, 0.1138, 0.6780, 0.7319, 0.0102, 0.1130, 0.2969 );
67: vec4 LinearToLogLuv( in vec4 value ) {
68: 	vec3 Xp_Y_XYZp = cLogLuvM * value.rgb;
69: 	Xp_Y_XYZp = max( Xp_Y_XYZp, vec3( 1e-6, 1e-6, 1e-6 ) );
70: 	vec4 vResult;
71: 	vResult.xy = Xp_Y_XYZp.xy / Xp_Y_XYZp.z;
72: 	float Le = 2.0 * log2(Xp_Y_XYZp.y) + 127.0;
73: 	vResult.w = fract( Le );
74: 	vResult.z = ( Le - ( floor( vResult.w * 255.0 ) ) / 255.0 ) / 255.0;
75: 	return vResult;
76: }
77: const mat3 cLogLuvInverseM = mat3( 6.0014, -2.7008, -1.7996, -1.3320, 3.1029, -5.7721, 0.3008, -1.0882, 5.6268 );
78: vec4 LogLuvToLinear( in vec4 value ) {
79: 	float Le = value.z * 255.0 + value.w;
80: 	vec3 Xp_Y_XYZp;
81: 	Xp_Y_XYZp.y = exp2( ( Le - 127.0 ) / 2.0 );
82: 	Xp_Y_XYZp.z = Xp_Y_XYZp.y / value.y;
83: 	Xp_Y_XYZp.x = value.x * Xp_Y_XYZp.z;
84: 	vec3 vRGB = cLogLuvInverseM * Xp_Y_XYZp.rgb;
85: 	return vec4( max( vRGB, 0.0 ), 1.0 );
86: }
87: vec4 linearToOutputTexel( vec4 value ) { return LinearToLinear( value ); }
88: 
89: #extension GL_OES_standard_derivatives : enable
90: #define GLSLIFY 1
91: 
92: uniform sampler2D map;
93: uniform float opacity;
94: uniform float width;
95: uniform float height;
96: 
97: varying vec2 vUv;
98: varying vec2 vUvDepth;
99: varying vec4 vPos;
100: float _DepthBrightnessThreshold = 0.8;  // per-pixel brightness threshold, used to refine edge geometry from eroneous edge depth samples
101: float _SheerAngleThreshold = 0.04;       // per-pixel internal edge threshold (sheer angle of geometry at that pixel)
102: #define BRIGHTNESS_THRESHOLD_OFFSET 0.01
103: #define FLOAT_EPS 0.00001
104: #define CLIP_EPSILON 0.005
105: 
106: vec3 rgb2hsv(vec3 c)
107: {
108:     vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
109:     vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
110:     vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
111:     float d = q.x - min(q.w, q.y);
112:     return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + FLOAT_EPS)), d / (q.x + FLOAT_EPS), q.x);
113: }
114: 
115: float depthForPoint(vec2 texturePoint)
116: {   
117:     vec2 centerpix = vec2(.5/width, .5/height);
118:     texturePoint += centerpix;
119:     // clamp to texture bounds - 0.5 pixelsize so we do not sample outside our texture
120:     texturePoint = clamp(texturePoint, centerpix, vec2(1.0, 0.5) - centerpix);
121:     vec4 depthsample = texture2D(map, texturePoint);
122:     vec3 depthsamplehsv = rgb2hsv(depthsample.rgb);
123:     return depthsamplehsv.b > _DepthBrightnessThreshold + BRIGHTNESS_THRESHOLD_OFFSET ? depthsamplehsv.r : 0.0;
124: }
125: 
126: void main()
127: {
128:     vec2 centerpix = vec2(.5/width, .5/height);
129:     vec2 centerDepthSampleCoord = vUvDepth - mod(vUvDepth, vec2(1.0/width, 1.0/height) ); // clamp to start of pixel
130: 
131:     float depth = depthForPoint(centerDepthSampleCoord);
132:     // we filter the _SheerAngleThreshold value on CPU so that we have an ease in over the 0..1 range, removing internal geometry at grazing angles
133:     // we also apply near and far clip clipping, the far clipping plane is pulled back to remove geometry wrapped to the far plane from the near plane
134:     //convert back from worldspace to local space
135:     vec4 localPos = vPos;
136:     //convert to homogenous coordinate space
137:     localPos.xy /= localPos.z;
138:     //find local space normal for triangle surface
139:     vec3 dx = dFdx(localPos.xyz);
140:     vec3 dy = dFdy(localPos.xyz);
141:     vec3 n = normalize(cross(dx, dy));
142:     
143:     // make sure to handle dot product of the whole hemisphere by taking the absolute of range -1 to 0 to 1
144:     float sheerAngle = abs(dot(n, vec3(0.0, 0.0, 1.0)));
145: 
146:     // clamp to texture bounds - 0.5 pixelsize so we do not sample outside our texture
147:     vec2 colorTexCoord = clamp(vUv, vec2(0.0, 0.5) + centerpix, vec2(1.0, 1.0) - centerpix);
148:     vec4 color = texture2D(map, colorTexCoord);
149:     color.w = opacity;
150: 
151:     //color.xyz = vPos.xyz * 0.5 + 0.5;
152:     //color.xyz = n.xyz * 0.5 + 0.5;
153:     //color.xyz = vec3(sheerAngle, sheerAngle, sheerAngle);
154: 
155:     if ( depth <        CLIP_EPSILON  ||
156:          depth > (1.0 - CLIP_EPSILON) ||
157:          sheerAngle < (_SheerAngleThreshold + FLOAT_EPS))
158:     {
159:         discard;
160:     }
161: 
162:     gl_FragColor = color;
163: }

[josefheks]

Some further investigation has revealed it is related to this mrdoob/three.js#19754, and can be fixed by forcing the WebGL1 renderer: https://threejs.org/docs/#api/en/renderers/WebGL1Renderer

Would be great to get some confirmation about this, and any future plans to amend so that it is compatible with a WebGl2 rendering context.

[tim-depthkit]

Hi @josefheks

The fix you've identified is indeed appropriate in this case.

We don't have any plans currently to upgrade this codebase to support WebGL2.

We are however working on a new web codebase that will support both WebGL1 and WebGL2. Unfortunately since this is early in the development phase, I can't give a timeline on when it will become available.

[ROBYER1]

I also tried updating three.js used and hit this issue. I could get THREE.BufferGeometry rendering the vertices but not the actual faces as I got stuck at updating the now deprecated THREE.Face3 callbacks
juniorxsound#21