How can I use DataTexture for BatchedMesh to access per-instance data in shader?

ingun37 · October 19, 2024, 4:40pm

I was using InstancedMesh with custom InstancedBufferAttributes. Then I got to have many of such InstancedMeshs that use the same material, so I tried to use BatchedMesh to draw them at once. But I was getting some internal errors so I checked the ThreeJS code and then I found a big difference between InstancedMesh and BatchedMesh which was that InstancedMesh use InstancedBufferAttribute while BatchedMesh use DataTexture to manage per-instance data (this part). Does it mean BatchedMesh doesn’t use drawArraysInstanced internally therefore I can’t use InstancedBufferAttribute? If so, do I need to use DataTexture as well to achieve the same thing?

agargaro · October 19, 2024, 6:00pm

BatchedMesh uses multidraw.

Yes, you should use DataTexture.

Do you need help? (I’m using DataTexture also for my InstancedMesh2 library).

ingun37 · October 20, 2024, 1:17am

Yes I do! How do I access per-instance data using DataTexture? Meanwhile I’ll try to figure out myself by looking at the yours and THreeJS’s code

agargaro · October 20, 2024, 9:53am

Create DataTexture:

You can find utility methods for creating DataTexture here:

github.com

agargaro/instanced-mesh/blob/31f1d8731be5ae60da7ba9c791b7034fa44d4611/src/utils/createTexture.ts

import { DataTexture, FloatType, RedFormat, RedIntegerFormat, RGBAFormat, RGFormat, UnsignedIntType } from "three";

export function createTexture_float(count: number): DataTexture {
    const size = Math.ceil(Math.sqrt(count));
    const array = new Float32Array(size * size);
    const texture = new DataTexture(array, size, size, RedFormat, FloatType);
    texture.needsUpdate = true;
    return texture;
}

export function createTexture_uint(count: number): DataTexture {
    const size = Math.ceil(Math.sqrt(count));
    const array = new Uint32Array(size * size);
    const texture = new DataTexture(array, size, size, RedIntegerFormat, UnsignedIntType);
    texture.needsUpdate = true;
    return texture;
}

export function createTexture_vec2(count: number): DataTexture {
    const size = Math.ceil(Math.sqrt(count));

This file has been truncated. show original

Like with BatchedMesh, create textures with equal width and height, because creating a texture width = N and height = 1, might fail.

Get Instance index in the shader

I recommend this site to check the shaders of three.js:
https://ycw.github.io/three-shaderlib-skim/dist

You should check these two parts

#include <batching_pars_vertex>
...
#include <batching_vertex>

You can get the instance ID in this way:

getIndirectIndex( gl_DrawID )

Get instance data

You can find utility methods for get data from texture here:

github.com

agargaro/instanced-mesh/blob/31f1d8731be5ae60da7ba9c791b7034fa44d4611/src/shaders/chunks/get_from_texture.glsl.ts

export default /* glsl */`
	float getFloatFromTexture( sampler2D texture, const in uint i ) {
		int size = textureSize( texture, 0 ).x;
		int j = int( i );
		int x = j % size;
		int y = j / size;
		return float( texelFetch( texture, ivec2( x, y ), 0 ).r );
	}

	vec2 getVec2FromTexture( sampler2D texture, const in uint i ) {
		int size = textureSize( texture, 0 ).x;
		int j = int( i );
		int x = j % size;
		int y = j / size;
		return texelFetch( texture, ivec2( x, y ), 0 ).rg;
	}

    vec3 getVec3FromTexture( sampler2D texture, const in uint i ) {
		int size = textureSize( texture, 0 ).x;
		int j = int( i );

This file has been truncated. show original

Obviously pay attention to the types and declare the texture uniform in your shader.

I hope I haven’t forgotten anything

ingun37 · October 21, 2024, 9:58am

I managed to use BatchedMesh instead of InstancedMesh, but the result performance was, even with dramatic decrease in the number of draw calls, not as good as expected. So I did some researching and It seems like, to benefit from both multi-drawing and instancing, you should use multiDrawElementsInstancedWEBGL or multiDrawArraysInstancedWEBGL. But my debugger said it was using multiDrawElementsWEBGL. So I checked the ThreeJS code and there was indeed a code that use the multiDrawElementsInstancedWEBGL but the code seemed unreachable. Because _multiDrawInstances has to be not null but there’s no code in ThreeJS that sets it with any value.

Is ThreeJS is still under development on using both MultiDraw and Instancing? cc @donmccurdy @agargaro

agargaro · October 21, 2024, 11:11am

It’s possible to use those commands but it’s not recommended because they don’t work on firefox.

github.com/mrdoob/three.js

BatchedMesh: Deprecate old instancing render paths.

mrdoob:dev ← CodyJasonBennett:batchedmesh-remove-old-instancing-renderpath

opened 10:18PM - 14 Oct 24 UTC

CodyJasonBennett

+13 -2

**Description** Deprecates the now-unreferenced instanced multidraw rendering… paths from #28103, which was superseded by #28404, and does not implement a fallback for Firefox. Instancing is since emulated by appending instances into the multidraw arguments themselves and using indirection for sorting/visibility, which has a fallback implemented for Firefox.

I created an example (not cleaned) that use multidrawInstanced to handle InstancedMesh LODs with a single drawCall, but I don’t think I’ll ever use it:

If individual frustum culling by instance might be useful to you, you might take a look at the library I linked to earlier.

Topic		Replies	Views
Can I draw many InstancedMeshes using BatchedMesh Questions instanced-mesh , batchedmesh , instancedmesh	3	90	September 24, 2024
How to change texture/color per object instance in InstancedMesh Questions textures , instanced-mesh	15	12598	January 31, 2021
How to set different textures on each InstancedMesh? Questions textures , geometry , mesh , instanced-mesh	3	4789	September 1, 2021
InstancedMesh - can it be used to draw hundreds of planes with different textures? Questions textures , geometry , instanced-mesh	16	7929	October 13, 2022
InstancedBufferGeometry UV mapping Questions uv-mapping , instanced-mesh	5	1141	May 28, 2024

How can I use DataTexture for BatchedMesh to access per-instance data in shader?

Create DataTexture:

Get Instance index in the shader

Get instance data

Related topics