Instance geometry Opacity

Hello everyone!

I’m testing the Opacity of instanced. Here’s my code. When I watch from a transparent object, I can see the former object through perspective, but the latter object can’t see through perspective. I don’t know if it’s related to sorting. How can I help you? Thank you very much!

 <script id="vertexShader" type="x-shader/x-vertex">
	precision highp float;
	attribute vec3 instancePosition;
	attribute vec4 instanceQuaternion;
    attribute vec3 instanceScale;

    attribute vec3 instanceColor;
    varying vec3 vInstanceColor;

    attribute float instanceOpacity;
    varying float vInstanceOpacity;

	vec3 applyTRS( vec3 position, vec3 translation, vec4 quaternion, vec3 scale ) {
		position *= scale;
		position += 2.0 * cross(, cross(, position ) + quaternion.w * position );
		return position + translation;
	void main(){
		vInstanceColor = instanceColor;
        vInstanceOpacity = instanceOpacity;
		vec3 transformed = applyTRS(, instancePosition, instanceQuaternion, instanceScale );
		gl_Position = projectionMatrix * modelViewMatrix * vec4( transformed, 1.0 );

<script id="fragmentShader" type="x-shader/x-fragment">
	precision highp float;
	varying vec3 vInstanceColor;
    varying float vInstanceOpacity;
	void main() {
		gl_FragColor = vec4( vInstanceColor, vInstanceOpacity );

function initDatas() {

        var instancePositions = [
            -5, 0, 0,
            0, 0, 0,
            5, 0, 0,
            7, 0, 0
        var instanceQuaternions = [
            0, 0, 0, 1,
            0, 0, 0, 1,
            0, 0, 0, 1,
            0, 0, 0, 1
        var instanceScales = [
            1, 1, 1,
            0.7, 0.7, 0.7,
            1, 1, 1,
            0.5, 0.5, 0.5,
        var red = new THREE.Color(0xff0000);
        var green = new THREE.Color(0x00ff00);
        var blue = new THREE.Color(0x0000ff);
        var white = new THREE.Color(0xffffff);
        var instanceColors = [
            red.r, red.g, red.b,
            green.r, green.g, green.b,
            blue.r, blue.g, blue.b,
            white.r, white.g, white.b
        var instanceOpacitys = [

        var instancedGeometry = new THREE.InstancedBufferGeometry();
        instancedGeometry.copy(new THREE.BoxBufferGeometry(1, 1, 1));
        instancedGeometry.addAttribute('instancePosition', new THREE.InstancedBufferAttribute(new Float32Array(instancePositions), 3));
        instancedGeometry.addAttribute('instanceQuaternion', new THREE.InstancedBufferAttribute(new Float32Array(instanceQuaternions), 4));
        instancedGeometry.addAttribute('instanceScale', new THREE.InstancedBufferAttribute(new Float32Array(instanceScales), 3));
        instancedGeometry.addAttribute('instanceColor', new THREE.InstancedBufferAttribute(new Float32Array(instanceColors), 3));
        instancedGeometry.addAttribute('instanceOpacity', new THREE.InstancedBufferAttribute(new Float32Array(instanceOpacitys), 1));

        var shaderMaterial = new THREE.ShaderMaterial({
            uniforms: {},
            transparent: true,
            vertexShader: document.getElementById('vertexShader').textContent,
            fragmentShader: document.getElementById('fragmentShader').textContent
        var instancedMesh = new THREE.Mesh(instancedGeometry, shaderMaterial);
        instancedMesh.frustumCulled = false;

It is the same issue like mentioned in this stackoverflow thread:

The instances are rendered in the order they appear in the buffer. The faces of each instance are rendered in the ordered specified by the geometry.

In other words, transparency with instancing is tricky. One approach that might help is to sort the instances based on their distance to the camera. The stackoverflow post shares the code for this task.

Sorry, we cannot access in China :sleepy: . As I’ve read in this article, is there no better way to sort instances? Because real-time sorting requires more performance.
Thank you for your reply!

1 Like

Hey @xjindf, sorting isn’t necessarily expensive. You can quite comfortably sort 10,000 elements or so on the CPU should not take too long.

here’s an example of 1500 particles being sorted each frame:
(see Particle engine for more detail)

It’s not always affordable, but when you have a small enough number of things to sort - it can be surprisingly cheap.

@xjindf can you access either of these?

There’s probably about 100 other alternatives to jsfiddle. I’m sure they are not all blocked. Also, you know… get a VPN.

1 Like

Thank you. I’ll try it.

Thank you for your reminder. I’ll pay attention to it next time.

VPNs are illegal in China, I would not recommend this.

1 Like

I couldn’t agree more. I know that there might be a disclaimer covering this somewhere, but it would be nice if the admins of this forum would not incite the users to commit crimes :slight_smile:

The order of drawing is blue, green and red.

Problem in the picture may be caused by deep occlusion.

tbh, it sounds more like the goverment is commiting a crime, but well, they have the power :poop:

Like @Usnul suggested you can just sort them, how many instances are expected?

I meant it half jokingly. I myself have been censored here many many times, and at least once for no valid reason.

I consider myself champion of free speech, and I HATE doublespeak and double standards. I’m surprised I wasn’t banned already and I think that this is a huge improvement. Let’s work together against censorship! :heart:

I don’t want to talk about anything beyond the topic. Let’s end this post. Happy weekend, everyone!