123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>three.js webgl - 2D texture array framebuffer attachment</title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <link type="text/css" rel="stylesheet" href="main.css">
- </head>
- <script id="vertex-postprocess" type="x-shader/x-vertex">
- out vec2 vUv;
- void main()
- {
- vUv = uv;
- gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
- }
- </script>
- <!--
- Fragment shader processing an input 2d texture array and writing the output
- into a framebuffer. The framebuffer should have a 2d texture array bound
- as color attachment.
- -->
- <script id="fragment-postprocess" type="x-shader/x-fragment">
- precision highp sampler2DArray;
- precision mediump float;
- in vec2 vUv;
- uniform sampler2DArray uTexture;
- uniform int uDepth;
- uniform float uIntensity;
- void main()
- {
- float voxel = texture(uTexture, vec3( vUv, uDepth )).r;
- gl_FragColor.r = voxel * uIntensity;
- }
- </script>
- <script id="vs" type="x-shader/x-vertex">
- uniform vec2 size;
- out vec2 vUv;
- void main() {
- gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
- // Convert position.xy to 1.0-0.0
- vUv.xy = position.xy / size + 0.5;
- vUv.y = 1.0 - vUv.y; // original data is upside down
- }
- </script>
- <script id="fs" type="x-shader/x-fragment">
- precision highp float;
- precision highp int;
- precision highp sampler2DArray;
- uniform sampler2DArray diffuse;
- in vec2 vUv;
- uniform int depth;
- void main() {
- vec4 color = texture( diffuse, vec3( vUv, depth ) );
- // lighten a bit
- gl_FragColor = vec4( color.rrr * 1.5, 1.0 );
- }
- </script>
- <body>
- <div id="info">
- <a href="https://threejs.org" target="_blank" rel="noopener">
- three.js
- </a>
- - 2D Texture array framebuffer color attachment
- <br />
- <p>
- This example shows how to render to an array of 2D texture.</br>
- WebGL2 allows to render to specific "layers" in 3D texture and array of textures.
- </p>
- Scanned head data by
- <a href="https://www.codeproject.com/Articles/352270/Getting-started-with-Volume-Rendering" target="_blank" rel="noopener">Divine Augustine</a><br />
- licensed under
- <a href="https://www.codeproject.com/info/cpol10.aspx" target="_blank" rel="noopener">CPOL</a>
- </div>
- <script type="importmap">
- {
- "imports": {
- "three": "../build/three.module.js",
- "three/addons/": "./jsm/"
- }
- }
- </script>
- <script type="module">
- import * as THREE from 'three';
- import Stats from 'three/addons/libs/stats.module.js';
- import { unzipSync } from 'three/addons/libs/fflate.module.js';
- import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
- const DIMENSIONS = {
- width: 256,
- height: 256,
- depth: 109
- };
- const params = {
- intensity: 1
- };
- /** Post-processing objects */
- const postProcessScene = new THREE.Scene();
- const postProcessCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
- const renderTarget = new THREE.WebGLArrayRenderTarget( DIMENSIONS.width, DIMENSIONS.height, DIMENSIONS.depth );
- renderTarget.texture.format = THREE.RedFormat;
- const postProcessMaterial = new THREE.ShaderMaterial( {
- uniforms: {
- uTexture: { value: null },
- uDepth: { value: 55 },
- uIntensity: { value: 1.0 }
- },
- vertexShader: document.getElementById( 'vertex-postprocess' ).textContent.trim(),
- fragmentShader: document.getElementById( 'fragment-postprocess' ).textContent.trim()
- } );
- let depthStep = 0.4;
- let camera, scene, mesh, renderer, stats;
- const planeWidth = 50;
- const planeHeight = 50;
- init();
- function init() {
- const container = document.createElement( 'div' );
- document.body.appendChild( container );
- camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
- camera.position.z = 70;
- scene = new THREE.Scene();
- /** Post-processing scene */
- const planeGeometry = new THREE.PlaneGeometry( 2, 2 );
- const screenQuad = new THREE.Mesh( planeGeometry, postProcessMaterial );
- postProcessScene.add( screenQuad );
- // 2D Texture array is available on WebGL 2.0
- renderer = new THREE.WebGLRenderer();
- renderer.setPixelRatio( window.devicePixelRatio );
- renderer.setSize( window.innerWidth, window.innerHeight );
- container.appendChild( renderer.domElement );
- stats = new Stats();
- container.appendChild( stats.dom );
- window.addEventListener( 'resize', onWindowResize );
- const gui = new GUI();
- gui.add( params, 'intensity', 0, 1 ).step( 0.01 ).onChange( value => postProcessMaterial.uniforms.uIntensity.value = value );
- gui.open();
- // width 256, height 256, depth 109, 8-bit, zip archived raw data
- new THREE.FileLoader()
- .setResponseType( 'arraybuffer' )
- .load( 'textures/3d/head256x256x109.zip', function ( data ) {
- const zip = unzipSync( new Uint8Array( data ) );
- const array = new Uint8Array( zip[ 'head256x256x109' ].buffer );
- const texture = new THREE.DataArrayTexture( array, DIMENSIONS.width, DIMENSIONS.height, DIMENSIONS.depth );
- texture.format = THREE.RedFormat;
- texture.needsUpdate = true;
- const material = new THREE.ShaderMaterial( {
- uniforms: {
- diffuse: { value: renderTarget.texture },
- depth: { value: 55 },
- size: { value: new THREE.Vector2( planeWidth, planeHeight ) }
- },
- vertexShader: document.getElementById( 'vs' ).textContent.trim(),
- fragmentShader: document.getElementById( 'fs' ).textContent.trim()
- } );
- const geometry = new THREE.PlaneGeometry( planeWidth, planeHeight );
- mesh = new THREE.Mesh( geometry, material );
- scene.add( mesh );
- postProcessMaterial.uniforms.uTexture.value = texture;
- renderer.setAnimationLoop( animate );
- } );
- }
- function onWindowResize() {
- camera.aspect = window.innerWidth / window.innerHeight;
- camera.updateProjectionMatrix();
- renderer.setSize( window.innerWidth, window.innerHeight );
- }
- function animate() {
- let value = mesh.material.uniforms[ 'depth' ].value;
- value += depthStep;
- if ( value > 109.0 || value < 0.0 ) {
- if ( value > 1.0 ) value = 109.0 * 2.0 - value;
- if ( value < 0.0 ) value = - value;
- depthStep = - depthStep;
- }
- mesh.material.uniforms[ 'depth' ].value = value;
- render();
- stats.update();
- }
- /**
- * Renders the 2D array into the render target `renderTarget`.
- */
- function renderTo2DArray() {
- const layer = Math.floor( mesh.material.uniforms[ 'depth' ].value );
- postProcessMaterial.uniforms.uDepth.value = layer;
- renderer.setRenderTarget( renderTarget, layer );
- renderer.render( postProcessScene, postProcessCamera );
- renderer.setRenderTarget( null );
- }
- function render() {
- // Step 1 - Render the input DataArrayTexture into render target
- renderTo2DArray();
- // Step 2 - Renders the scene containing the plane with a material
- // sampling the render target texture.
- renderer.render( scene, camera );
- }
- </script>
- </body>
- </html>
|