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);
}
. As I’ve read in this article, is there no better way to sort instances? Because real-time sorting requires more performance.
