Render to DataTexture2DArray fails
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Render to DataTexture2DArray</title>
</head>
<body>
<script id="vs" type="x-shader/x-vertex">
void main() {
gl_Position = vec4( position, 1.0 );
}
</script>
<script id="fs" type="x-shader/x-fragment">
precision highp sampler2D;
uniform vec2 texSize;
uniform sampler2D tex;
void main() {
vec2 coordinate = gl_FragCoord.xy / texSize;
gl_FragColor = texture(tex, coordinate);
}
</script>
<script id="fs-array" type="x-shader/x-fragment">
precision highp sampler2DArray;
uniform vec2 texSize;
uniform sampler2DArray tex;
uniform int layer;
void main() {
vec2 coordinate = gl_FragCoord.xy / texSize;
gl_FragColor = texture(tex, vec3( coordinate, layer ));
}
</script>
<script src="https://threejs.org/build/three.js"></script>
<script type="module">
import {WEBGL} from 'https://threejs.org/examples/jsm/WebGL.js';
if ( WEBGL.isWebGL2Available() === false ) {
document.body.appendChild(WEBGL.getWebGL2ErrorMessage());
}
</script>
</body>
</html>
JavaScript
const textureWidth = 1;
const textureHeight = 1;
const numLayers = 2;
// Setup scene etc.
const scene = new THREE.Scene();
const camera = new THREE.Camera();
const renderer = new THREE.WebGLRenderer();
const mesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2));
scene.add(mesh);
// Render
renderTextureTest();
renderToTextureArrayTest();
function renderTextureTest() {
console.log('Render to DataTexture');
const originalTexture = createOriginalTexture();
mesh.material = createShaderMaterial();
const renderTarget1 = createRenderTarget();
const renderTarget2 = createRenderTarget();
renderTextureToTarget(originalTexture, renderTarget1);
console.log('Result after first render', readOutput(renderTarget1));
renderTextureToTarget(renderTarget1.texture, renderTarget2);
console.log('Result after second render', readOutput(renderTarget2));
}
function renderToTextureArrayTest() {
console.log('Render to DataTexture2DArray');
const originalTexture = createOriginalArrayTexture();
mesh.material = createShaderArrayMaterial();
const renderTarget1 = createArrayRenderTarget();
const renderTarget2 = createArrayRenderTarget();
for(let layer = 0; layer<numLayers; ++layer) {
renderTextureToTarget(originalTexture, renderTarget1, layer);
console.log('Result after first render of layer ' + layer, readOutput(renderTarget1));
renderTextureToTarget(renderTarget1.texture, renderTarget2, layer);
console.log('Result after second render of layer ' + layer, readOutput(renderTarget2));
}
}
function createShaderMaterial() {
return new THREE.ShaderMaterial({
uniforms: {
tex: {value: null},
texSize: {value: [textureWidth, textureHeight]},
},
vertexShader:...