Bdtjtk

My question in brief: Are there any examples of how one can render textures with custom (non grid-like) offsets using indexed, instanced quads in Three.js?

My question with context: I am working on a Three.js scene with lots of quads, each of which is meant to display an image from an image atlas. Each image in the atlas is 32px on each side. The quads are rendered using an indexed, instanced geometry; so there are 4 vertices that define the "prototype" for all quad instances, and all instance-specific information is supplied to a RawShaderMaterial as attributes.

The challenge is that the image to be represented on a given quad is contained in a 32px square in the atlas, but those little images can have margins. So while the images form a grid of sorts in the atlas, each has a known margin of unused pixels at the top and sides (sample atlas region):

The relevant attributes that handle these margins are:

var geometry = new THREE.InstancedBufferGeometry();



// uv identifies the blueprint uv values

geometry.addAttribute('uv', new THREE.BufferAttribute(new Float32Array([ 1, 1, 0, 1, 0, 0, 1, 0, ]), 2));



// texOffset = the offset of an instance's 32px cell in the atlas {x,y}

geometry.addAttribute('texOffset', new IBA(... 2, true, 1));



// uvOffset = the left/right and top/bottom margins of an instance's image in its 32px cell

geometry.addAttribute('uvOffset', new IBA(..., 2, true, 1));

Then inside the fragment shader I can render the full 32px cell for the instance with:

vec2 scaledUv = vUv + vTextureOffset;

gl_FragColor = texture2D(texIdx, scaledUv);

My question is: How can I render just the subset of a 32px square that contains the image, assuming I can create a vec2 uvOffset that includes the left and top offsets for the image in its 32px cell container? Any help others can offer with this question would be greatly appreciated.

The range of UVs is [0.0, 1.0], so let's say you want a margin of 0.1 on left/right sides. This leaves you with a visible range of [0.1, 0.9]. To make the margins invisible, you can use the step() function to create an opacity curve such as this one:

Anything below 0.1 and anything above 0.9 will have an opacity of 0.

// You first declare the range of the margin (this has x and y)

vec2 uvMargin = vec2(0.1, 0.2);



// Anything outside the margin will have 0 opacity, 

// anything inside the margin will have 1 opacity



// First, you apply a step() function to the left X value

float opacity = step(uvMargin.x, vUV.x);



// then to the right X value (1.0 - margin)

opacity *= step(vUV.x, 1.0 - uvMargin.x);



// then the top Y value

opacity *= step(uvMargin.y, vUV.y)



// then the bottom Y value

opacity *= step(vUV.y, 1.0 - uvMargin.y);



// Sample the texture

vec2 scaledUv = vUv + vTextureOffset;

gl_FragColor = texture2D(texIdx, scaledUv);



// Apply opacity to alpha

gl_FragColor.a = opacity;

This can be optimized, but I took it step-by-step for clarity. When you set transparent: true to your material, you'll see that anything outside the margin is invisible.

• If you find problems with GPU picking, maybe you could add an indistinguishable amount to opacity, like gl_FragColor.a = opacity + 0.01;
  


• If you find aliasing or jagged edges that you don't like, you could try smoothstep() instead.


• You'll have to declare the uvMargin as an InstancedBufferAttribute instead of doing it in the shader like I did.