Whenever I attempt to run this example, it works perfectly fine with the provided sample. However, when I try to use my own binary file that contains a series of continuous 2D frames in JPG format which were exported from here, I end up with an image lacking detail like this:
https://i.sstatic.net/z0RU4.gif
This is the code used for converting the binary file:
<?php
header("Content-type: application/octet-stream");
header('Content-disposition: attachment; filename=head256x256x1092.bin');
$dirs = scandir('512');
unset($dirs[0]);
unset($dirs[1]);
natsort($dirs);
foreach($dirs as $dir):
$fp = fopen('512/'.$dir, "r");
while (!feof($fp))
{
echo fread($fp, 65536);
flush(); // this is essential for large downloads
}
fclose($fp);
endforeach;
?>
~
This is the three.js file reader implementation:
new THREE.FileLoader()
.setResponseType( 'arraybuffer' )
.load( 'head256x256x1092.zip', function ( data ) {
var zip = new JSZip( data );
var array = zip.files[ 'head256x256x1092.bin' ].asUint8Array();
var texture = new THREE.DataTexture2DArray( array, 256, 256, 109 );
texture.format = THREE.RedFormat;
texture.type = THREE.UnsignedByteType;
texture.needsUpdate = true;
var material = new THREE.ShaderMaterial( {
uniforms: {
diffuse: { value: texture },
depth: { value: 0 },
size: { value: new THREE.Vector2( planeWidth, planeHeight ) }
},
vertexShader: document.getElementById( 'vs' ).textContent.trim(),
fragmentShader: document.getElementById( 'fs' ).textContent.trim()
} );
var geometry = new THREE.PlaneBufferGeometry( planeWidth, planeHeight );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
} );