three.js - Spread a Threejs Texture across an InstancedMesh

Question

So Ultimately, I need to send in additional attributes to a vertex shader (uvOffsets, instance count) in order to spread a Three js Texture across any number of instances in an InstancedMesh.

In r97 how I did this was I created a built-in material with a video texture, then created a ShaderMaterial with bits from the ShaderChunk that I edited to include specific defines/attributes and attached that as a customDepthMaterial to the mesh. The geometry was an InstancedBufferGeogetry. I'm not sure why this combination of things worked exactly, but it did. And yes, it was hacky, copy/paste kind of stuff.

This does not work in r124 since InstancedBufferGeometry and built-in Materials apparently no longer work together to create a mesh (can't get a Three.js InstancedBufferGeometry to appear in a scene).

I figured the best way to do this in r124 is to just use ShaderMaterial (without the 'built-in material) and leverage the ShaderLib so I don't have to re-write all the underlying shader code in terms of light/reflection etc characteristics, something like:

const material3 = new THREE.ShaderMaterial({
        vertexShader: THREE.ShaderLib.phong.vertexShader,
      fragmentShader: THREE.ShaderLib.phong.fragmentShader,
      uniforms: THREE.ShaderLib.phong.uniforms,
      side: THREE.DoubleSide
    });

I'd create a few of my own edited shaders that look for defines, and then use this in an InstancedMesh. Before getting too far down the road, I wanted to just see if this was possible out of the box, so to speak. That is, using ShaderLib shaders in a ShaderMaterial. I can't find any example of ShaderLib usage but I posted a fiddle here: https://jsfiddle.net/rsweeten/gqo591nx/49/

Built-in Material seems to work in InstancedMesh, but not ShaderMaterial when using ShaderLib, tho I'm Not sure if ShaderLib is intended to be used like this.

UPDATE: I know there've been many discussions about customizing Materials/shaders. I'll keep digging around. (https://github.com/mrdoob/three.js/issues/11475)

question from:https://stackoverflow.com/questions/65877453/spread-a-threejs-texture-across-an-instancedmesh

Answer 1

Waitting for answers