[solved] Shader issue for release higher than r110

Hi there,

I want to use this trick to display videos with alpha: trick

But with the latest release of Threejs shader won’t compile. I found that it’s OK until release r110 but no higher.

Here is the shader part:

private alphaFragmentShader:string = 
            precision highp float;

            uniform float time;
            uniform sampler2D texture;
            varying vec2 vUv;
            void main(void)
                  gl_FragColor = vec4(
                        texture2D(texture, vec2(vUv.x, 0.5 + vUv.y / 2.0)).rgb,
                        texture2D(texture, vec2(vUv.x, vUv.y / 2.0)).r

private alphaVertexShader:string = 
            varying vec2 vUv;

            void main()
                  vUv = uv;
                  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

 const material:ShaderMaterial = new ShaderMaterial({  fragmentShader:this.alphaFragmentShader,
                                                       uniforms: {
                                                              time: { value: 1.0 },
                                                              texture: { value: videoTexture }
                                                       transparent: true } );

Here is the changes between r110 and r111:

  • The semantics of Material.needsUpdate has changed. Setting it to true now increases the internal version counter (similar to Texture or BufferAttribute). It’s not possible anymore to use Material.needsUpdate in conditional statements.
  • LegacyGLTFLoader and LegacyJSONLoader have been removed.
  • WebVRManager.setPoseTarget() has been removed.
  • WebVRManager and WebXRManager do no longer modify the camera when not presenting.
  • The default value of Ray.direction is now ( 0, 0, - 1).
  • Instances of BufferGeometry require at least a position attribute now.

the errors with r111 and higher:

Program Info Log: Fragment shader is not compiled.
ERROR: 0:99: 'texture' : function name expected
ERROR: 0:99: 'rgb' :  field selection requires structure, vector, or interface block on left hand side
ERROR: 0:100: 'texture' : function name expected
ERROR: 0:100: 'r' :  field selection requires structure, vector, or interface block on left hand side
ERROR: 0:98: 'constructor' : not enough data provided for construction

Do you have any idea on the changes needed to make this thing work with latest version of ThreeJS?

Thanks for your help!


“texture” is a reserved world in shaders in newest versions!