Tsl Transparency issue
HTML
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three/build/three.module.js",
"threeGPU": "https://unpkg.com/three/build/three.webgpu.js",
"three/addons/": "https://unpkg.com/three/examples/jsm/"
}
}
</script>
JavaScript
// Choose this one for older webgl renderer
import * as THREE from 'three';
// Choose this one for web gpu renderer with TSL
// import * as THREE from 'threeGPU';
// const TSL = THREE.TSL
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// Choose this one for older webgl renderer
const renderer = new THREE.WebGLRenderer();
// Choose this one for web gpu renderer with TSL
// const renderer = new THREE.WebGPURenderer( { forceWebGL: true, } );
// await renderer.init();
renderer.outputColorSpace = THREE.SRGBColorSpace
renderer.autoClear = false
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// An example of some compressed data that when uncompressed is in srgb color space
const compressedColorTexture = new THREE.DataTexture(new Uint32Array([30]), 1, 1, THREE.RedIntegerFormat, THREE.UnsignedIntType )
compressedColorTexture.needsUpdate = true
let material
if (renderer.isWebGPURenderer) {
// This code for WebGPURenderer Node
class CompressedColorMaterial extends THREE.NodeMaterial {
constructor(parameters = {}) {
super();
this.transparent = true;
this.setValues(parameters)
}
setup( builder ) {
const vColor = TSL.varyingProperty( 'vec4', 'vColor' );
this.vertexNode = TSL.Fn(() => {
const unsigned32Raw = TSL.textureLoad(compressedColorTexture, TSL.vec2(0, 0)).r;
const exampleDecompressionToSRGBColor = TSL.vec4(
TSL.float(unsigned32Raw).div(100),
TSL.float(unsigned32Raw).div(200),
TSL.float(unsigned32Raw).div(300),
TSL.float(unsigned32Raw).div(52)
);
const linearSpaceColor = TSL.toWorkingColorSpace(exampleDecompressionToSRGBColor)
vColor.assign(linearSpaceColor)
return TSL.cameraProjectionMatrix.mul(TSL.modelViewMatrix).mul(TSL.vec4(TSL.attribute('position', 'vec3'), TSL.float(1.0)))
})()
this.fragmentNode = TSL.Fn(() => {
...