My instancing code is broken while migrating through r106 to r111

Questions
1

Hi everyone,

The code below for vertex and fragment shaders was working fine in r106, i am using instancing with map, normalmap, lightmap and lights, i use a single directional light in the scene, now i am updating threejs to r111 and i get webgl error;

Here is the code below;

var vertex = [
              "#define PHONG",

              "precision highp float;",

              "attribute vec3 instancePosition;",
              "attribute vec4 instanceQuaternion;",
              "attribute vec3 instanceScale;",

              "varying vec3 vViewPosition;",

              "#ifndef FLAT_SHADED",

                "varying vec3 vNormal;",

              "#endif",

              "vec3 applyTRS( vec3 position, vec3 translation, vec4 quaternion, vec3 scale ) {",

                "position *= scale;",
                "position += 2.0 * cross( quaternion.xyz, cross( quaternion.xyz, position ) + quaternion.w * position );",
                "return position + translation;",

              "}",

              THREE.ShaderChunk["common"],
              THREE.ShaderChunk["uv_pars_vertex"],
              THREE.ShaderChunk["uv2_pars_vertex"],
              THREE.ShaderChunk["color_pars_vertex"],
              THREE.ShaderChunk["fog_pars_vertex"],

              "void main() {",
                  
                  THREE.ShaderChunk["uv_vertex"],
                  THREE.ShaderChunk["uv2_vertex"],
                  THREE.ShaderChunk["color_vertex"],

                  THREE.ShaderChunk["beginnormal_vertex"],
                  THREE.ShaderChunk["morphnormal_vertex"],
                  THREE.ShaderChunk["defaultnormal_vertex"],

                  "#ifndef FLAT_SHADED", // Normal computed with derivatives when FLAT_SHADED

                    "vNormal = normalize( transformedNormal );",

                  "#endif",

                  THREE.ShaderChunk["begin_vertex"],

                  "vec4 mvPosition = modelViewMatrix * vec4( applyTRS( position.xyz, instancePosition, instanceQuaternion, instanceScale ), 1.0 );",
                  "gl_Position = projectionMatrix * mvPosition;",
                  "vViewPosition = - mvPosition.xyz;",

                  THREE.ShaderChunk["worldpos_vertex"],
                  THREE.ShaderChunk["fog_vertex"],
                  
              "}"
             ].join("\n");

var fragment = [
                "#define PHONG",

                "uniform vec3 diffuse;",
                "uniform vec3 emissive;",
                "uniform vec3 specular;",
                "uniform float shininess;",
                "uniform float opacity;",

                THREE.ShaderChunk["common"],
                THREE.ShaderChunk["packing"],
                THREE.ShaderChunk["uv_pars_fragment"],
                THREE.ShaderChunk["uv2_pars_fragment"],
                THREE.ShaderChunk["map_pars_fragment"],
                THREE.ShaderChunk["lightmap_pars_fragment"],
                THREE.ShaderChunk["fog_pars_fragment"],
                THREE.ShaderChunk["bsdfs"],
                THREE.ShaderChunk["lights_pars_begin"],
                THREE.ShaderChunk["lights_phong_pars_fragment"],
                THREE.ShaderChunk["normalmap_pars_fragment"],
                THREE.ShaderChunk["specularmap_pars_fragment"],

                "void main() {",

                    "vec4 diffuseColor = vec4( diffuse, opacity );",
                    "ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );",
                    "vec3 totalEmissiveRadiance = emissive;",

                    THREE.ShaderChunk["map_fragment"],
                    THREE.ShaderChunk["specularmap_fragment"],
                    THREE.ShaderChunk["normal_fragment_begin"],
                    THREE.ShaderChunk["normal_fragment_maps"],

                    THREE.ShaderChunk["lights_phong_fragment"],
                    THREE.ShaderChunk["lights_fragment_begin"],
                    THREE.ShaderChunk["lights_fragment_maps"],
                    THREE.ShaderChunk["lights_fragment_end"],

                    "vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular + reflectedLight.indirectSpecular + totalEmissiveRadiance;",

                    "gl_FragColor = vec4( outgoingLight, diffuseColor.a );",

                    THREE.ShaderChunk["encodings_fragment"],
                    THREE.ShaderChunk["fog_fragment"],
                    
                "}"

               ].join("\n");

And i get the error below;

lib_20122019.js:18246 THREE.WebGLProgram: shader error: 0 35715 false gl.getProgramInfoLog No compiled fragment shader when at least one graphics shader is attached.

THREE.WebGLShader: gl.getShaderInfoLog() fragment
ERROR: 0:601: ‘vUv’ : undeclared identifier
ERROR: 0:601: ‘texture2D’ : no matching overloaded function found
ERROR: 0:601: ‘=’ : dimension mismatch
ERROR: 0:601: ‘=’ : cannot convert from ‘const mediump float’ to ‘highp 4-component vector of float’

I am trying to find the changes between r106 and r111 but couldnt find a solution. I think this shader material also doesnt work in safari altough it is in r106. I am sure i am doing really bad mistakes but i am not good at glsl. Stuck here…

Note: I already define “defines” and i set .extensions.derivatives = true
defines[ “USE_MAP” ] = “”;
defines[ “USE_NORMALMAP” ] = “”;
defines[ “USE_LIGHTMAP” ] = “”;

Your help is appreciated
Thanks!

2

Not exactly a solution, but have you noticed the InstancedMesh class added recently? It lets you position instances without modifying the material, meaning you don’t have to worry about threejs’ internal shader changes breaking your customized materials (which is probably what happened here).

3

Thanks for the answer. Interesting because i have struggled for this custom shader code for 1 month to get it working. Searched too many resources and didnt see this around 9 months ago. I think this will work if i can manually rotate and scale every instance.
Now i am exicted if we can also skeletal animate every instance with this. I will check it out. If it doesnt work i ll just modify shader chunk codes in the lib…

4

It was only released in r109, so probably wasn’t available when you were looking. It does let you manually rotate, scale, and position every instance. Not sure about skinning… it might support the same skeletal animation on every instance now, but I imagine separate skeletal animation on each instance would require quite a lot of modified shader chunks…

1 Like
5

Thanks. Applied and it works now. Saved me from shader chunks!

6

Here is a screenshot of how it looks like. The normalmaps are now properly set in uvs. Also added emissiveMap now. Btw it is in highest screen and texture resolution so it is impossible for everyone to play the game in this resolution. Thanks for your support.

discourse
discourse2560×969 200 KB