# Instance geometry Opacity

**URL:** <https://discourse.threejs.org/t/instance-geometry-opacity/9164>\
**Category:** Questions\
**Tags:** instancing, transparency\
**Created:** [August 21, 2019, 9:33am UTC](https://discourse.threejs.org/t/instance-geometry-opacity/9164 "2019-08-21T09:33:53Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![xjindf](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/xjindf/32/24657_2.png) [@xjindf](https://discourse.threejs.org/u/xjindf)\
**Post date:** [August 21, 2019, 9:33am UTC](https://discourse.threejs.org/t/instance-geometry-opacity/9164/1 "2019-08-21T09:33:53Z")

</div>

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( quaternion.xyz, cross( quaternion.xyz, position ) + quaternion.w * position );
		return position + translation;
	}
	void main(){
		vInstanceColor = instanceColor;
        vInstanceOpacity = instanceOpacity;
		vec3 transformed = applyTRS( position.xyz, instancePosition, instanceQuaternion, instanceScale );
		gl_Position = projectionMatrix * modelViewMatrix * vec4( transformed, 1.0 );
	}
</script>

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

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 = [
            1,
            0.2,
            1,
            0.5
        ];

        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;
        scene.add(instancedMesh);
    }
```

---

<div class="post-metadata">

**Author:** ![xjindf](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/xjindf/32/24657_2.png) [@xjindf](https://discourse.threejs.org/u/xjindf)\
**Post date:** [August 21, 2019, 9:39am UTC](https://discourse.threejs.org/t/instance-geometry-opacity/9164/2 "2019-08-21T09:39:18Z")

</div>

![1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/b/b3b7dc76edc03d5016c5f5f109ea24c2fbdf3d70.png)  
 ![2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/cd5c7f3127f694ea1e1ab2bedd85d1841d26857e.png)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 21, 2019, 3:31pm UTC](https://discourse.threejs.org/t/instance-geometry-opacity/9164/3 "2019-08-21T15:31:00Z")

</div>

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

> <https://stackoverflow.com/questions/43502415/transparency-within-instanced-shapes>

> 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.

---

<div class="post-metadata">

**Author:** ![xjindf](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/xjindf/32/24657_2.png) [@xjindf](https://discourse.threejs.org/u/xjindf)\
**Post date:** [August 22, 2019, 12:01am UTC](https://discourse.threejs.org/t/instance-geometry-opacity/9164/4 "2019-08-22T00:01:58Z")

</div>

Sorry, we cannot access [https://jsfiddle.net](https://jsfiddle.net) in China 😪 . 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！

---

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [August 22, 2019, 2:14am UTC](https://discourse.threejs.org/t/instance-geometry-opacity/9164/5 "2019-08-22T02:14:44Z")

</div>

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:  
[http://server1.lazy-kitty.com/tests/particles\_sorting\_2019\_08\_22](http://server1.lazy-kitty.com/tests/particles_sorting_2019_08_22)  
(see [Particle engine](https://discourse.threejs.org/t/particle-engine/8044/14) 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.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [August 22, 2019, 3:08am UTC](https://discourse.threejs.org/t/instance-geometry-opacity/9164/6 "2019-08-22T03:08:11Z")

</div>

@xjindf can you access either of these?

- [https://glitch.com/edit/#!/three-js?path=views/demo.js:1:0](https://glitch.com/edit/#!/three-js?path=views/demo.js:1:0)

- [https://codepen.io/looeee/pen/PpEyJv](https://codepen.io/looeee/pen/PpEyJv)

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

---

<div class="post-metadata">

**Author:** ![xjindf](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/xjindf/32/24657_2.png) [@xjindf](https://discourse.threejs.org/u/xjindf)\
**Post date:** [August 22, 2019, 3:10am UTC](https://discourse.threejs.org/t/instance-geometry-opacity/9164/7 "2019-08-22T03:10:54Z")

</div>

Thank you. I’ll try it.

---

<div class="post-metadata">

**Author:** ![xjindf](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/xjindf/32/24657_2.png) [@xjindf](https://discourse.threejs.org/u/xjindf)\
**Post date:** [August 22, 2019, 3:12am UTC](https://discourse.threejs.org/t/instance-geometry-opacity/9164/8 "2019-08-22T03:12:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [August 22, 2019, 10:07am UTC](https://discourse.threejs.org/t/instance-geometry-opacity/9164/9 "2019-08-22T10:07:39Z")

</div>

> [@looeee](#):
>
> get a VPN

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

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [August 23, 2019, 1:31am UTC](https://discourse.threejs.org/t/instance-geometry-opacity/9164/10 "2019-08-23T01:31:25Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![Thinkia](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thinkia/32/818_2.png) [@Thinkia](https://discourse.threejs.org/u/Thinkia)\
**Post date:** [August 23, 2019, 3:19am UTC](https://discourse.threejs.org/t/instance-geometry-opacity/9164/12 "2019-08-23T03:19:13Z")

</div>

The order of drawing is blue, green and red.

Problem in the picture may be caused by deep occlusion.

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [August 23, 2019, 3:21am UTC](https://discourse.threejs.org/t/instance-geometry-opacity/9164/13 "2019-08-23T03:21:12Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [August 23, 2019, 10:14am UTC](https://discourse.threejs.org/t/instance-geometry-opacity/9164/15 "2019-08-23T10:14:12Z")

</div>

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! ❤

---

<div class="post-metadata">

**Author:** ![xjindf](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/xjindf/32/24657_2.png) [@xjindf](https://discourse.threejs.org/u/xjindf)\
**Post date:** [August 23, 2019, 10:24am UTC](https://discourse.threejs.org/t/instance-geometry-opacity/9164/16 "2019-08-23T10:24:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 23, 2019, 10:39am UTC](https://discourse.threejs.org/t/instance-geometry-opacity/9164/17 "2019-08-23T10:39:45Z")

</div>

Closed on August 23, 2019, 10:39am UTC