I am working on creating a scene with thousands of simple meshes, and I decided to implement InstancedBufferGeometry for better performance. Most of my code is based on the example provided here:
Although instancing works well, it seems to only function properly with the THREE.RawShaderMaterial as shown in the example:
instancedMaterial = new THREE.RawShaderMaterial( {
uniforms: {
map: { value: new THREE.TextureLoader().load( 'textures/grassAlpha.png' ) },
time: { value: 0 }
},
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );
This involves using certain shaders:
<script id="vertexShader" type="x-shader/x-vertex">
precision highp float;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform float time;
attribute vec3 position;
attribute vec3 offset;
attribute vec2 uv;
attribute vec4 orientation;
varying vec2 vUv;
void main() {
vec3 vPosition = position;
vec3 vcV = cross( orientation.xyz, vPosition );
vPosition = vcV * ( 2.0 * orientation.w ) + ( cross( orientation.xyz, vcV ) * 2.0 + vPosition );
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( offset + vPosition, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
precision highp float;
uniform sampler2D map;
varying vec2 vUv;
void main() {
vec4 texelColor = texture2D( map, vUv );
if ( texelColor.a < 0.4 ) discard;
gl_FragColor = texelColor;
}
</script>
My question now is how can I integrate THREE.MeshPhongMaterial instead of the current shader setup? When I try to use other materials like basic or phong, the mesh either disappears or becomes fully transparent without any console errors.