Examples: Added webgl2_volume_perlin

7c30f014 · Mr.doob · dbda2ef9 · 7c30f014 · 7c30f014 · 7c30f014
3 changed file
--- a/examples/files.js
+++ b/examples/files.js
@@ -314,7 +314,8 @@ var files = {
 		"webgl2_buffergeometry_attributes_integer",
 		"webgl2_materials_texture2darray",
 		"webgl2_materials_texture3d",
-		"webgl2_multisampled_renderbuffers"
+		"webgl2_multisampled_renderbuffers",
+		"webgl2_volume_perlin"
 	],
 	"webaudio": [
 		"webaudio_orientation",

--- a/examples/screenshots/webgl2_volume_perlin.jpg
+++ b/examples/screenshots/webgl2_volume_perlin.jpg
--- a/examples/webgl2_volume_perlin.html
+++ b/examples/webgl2_volume_perlin.html
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl2 - volume</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>
+
+	<body>
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl2 - volume
+		</div>
+
+		<script type="module">
+			import * as THREE from '../build/three.module.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { WEBGL } from './jsm/WebGL.js';
+
+			if ( WEBGL.isWebGL2Available() === false ) {
+
+				document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
+
+			}
+
+			let renderer, scene, camera;
+			let mesh;
+
+			init();
+			animate();
+
+			function init() {
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				document.body.appendChild( renderer.domElement );
+
+				scene = new THREE.Scene();
+
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera.position.set( 0, 0, 2 );
+
+				new OrbitControls( camera, renderer.domElement );
+
+				// Texture
+
+				const size = 128;
+				const data = new Float32Array( size * size * size );
+
+				let i = 0;
+				const scale = 0.051;
+				const perlin = new ImprovedNoise();
+
+				for ( let z = 0; z < size; z ++ ) {
+
+					for ( let y = 0; y < size; y ++ ) {
+
+						for ( let x = 0; x < size; x ++ ) {
+
+							data[ i ] = 0.5 + 0.5 * perlin.noise( x * scale, y * scale, z * scale );
+							i ++;
+
+						}
+
+					}
+
+				}
+
+				const texture = new THREE.DataTexture3D( data, size, size, size );
+				texture.format = THREE.RedFormat;
+				texture.type = THREE.FloatType;
+				texture.minFilter = THREE.LinearFilter;
+				texture.magFilter = THREE.LinearFilter;
+				texture.unpackAlignment = 1;
+
+				// Material
+
+				const vertexShader = `#version 300 es
+					in vec3 position;
+
+					uniform mat4 modelMatrix;
+					uniform mat4 modelViewMatrix;
+					uniform mat4 projectionMatrix;
+					uniform vec3 cameraPos;
+
+					out vec3 vOrigin;
+					out vec3 vDirection;
+
+					void main() {
+						vec4 worldPosition = modelViewMatrix * vec4( position, 1.0 );
+
+						vOrigin = vec3( inverse( modelMatrix ) * vec4( cameraPos, 1.0 ) ).xyz;
+						vDirection = position - vOrigin;
+
+						gl_Position = projectionMatrix * worldPosition;
+					}
+				`;
+
+				const fragmentShader = `#version 300 es
+					precision highp float;
+					precision highp sampler3D;
+
+					uniform mat4 modelViewMatrix;
+					uniform mat4 projectionMatrix;
+
+					in vec3 vOrigin;
+					in vec3 vDirection;
+
+					out vec4 color;
+
+					uniform sampler3D map;
+
+					uniform float threshold;
+					uniform float steps;
+
+					vec2 hitBox( vec3 orig, vec3 dir ) {
+						const vec3 box_min = vec3( - 0.5 );
+						const vec3 box_max = vec3( 0.5 );
+						vec3 inv_dir = 1.0 / dir;
+						vec3 tmin_tmp = ( box_min - orig ) * inv_dir;
+						vec3 tmax_tmp = ( box_max - orig ) * inv_dir;
+						vec3 tmin = min( tmin_tmp, tmax_tmp );
+						vec3 tmax = max( tmin_tmp, tmax_tmp );
+						float t0 = max( tmin.x, max( tmin.y, tmin.z ) );
+						float t1 = min( tmax.x, min( tmax.y, tmax.z ) );
+						return vec2( t0, t1 );
+					}
+
+					float sample1( vec3 p ) {
+						return texture( map, p ).r;
+					}
+
+					#define epsilon .0001
+
+					vec3 normal( vec3 coord ) {
+						if ( coord.x < epsilon ) return vec3( 1.0, 0.0, 0.0 );
+						if ( coord.y < epsilon ) return vec3( 0.0, 1.0, 0.0 );
+						if ( coord.z < epsilon ) return vec3( 0.0, 0.0, 1.0 );
+						if ( coord.x > 1.0 - epsilon ) return vec3( - 1.0, 0.0, 0.0 );
+						if ( coord.y > 1.0 - epsilon ) return vec3( 0.0, - 1.0, 0.0 );
+						if ( coord.z > 1.0 - epsilon ) return vec3( 0.0, 0.0, - 1.0 );
+
+						float step = 0.01;
+						float x = sample1( coord + vec3( - step, 0.0, 0.0 ) ) - sample1( coord + vec3( step, 0.0, 0.0 ) );
+						float y = sample1( coord + vec3( 0.0, - step, 0.0 ) ) - sample1( coord + vec3( 0.0, step, 0.0 ) );
+						float z = sample1( coord + vec3( 0.0, 0.0, - step ) ) - sample1( coord + vec3( 0.0, 0.0, step ) );
+
+						return normalize( vec3( x, y, z ) );
+					}
+
+					void main(){
+
+						vec3 rayDir = normalize( vDirection );
+						vec2 bounds = hitBox( vOrigin, rayDir );
+
+						if ( bounds.x > bounds.y ) discard;
+
+						bounds.x = max( bounds.x, 0.0 );
+
+						vec3 p = vOrigin + bounds.x * rayDir;
+						vec3 inc = 1.0 / abs( rayDir );
+						float delta = min( inc.x, min( inc.y, inc.z ) );
+						delta /= steps;
+
+						for ( float t = bounds.x; t < bounds.y; t += delta ) {
+
+							float d = sample1( p + 0.5 );
+
+							if ( d > threshold ) {
+
+								color.rgb = normal( p + 0.5 ) * 0.5 + ( p * 1.5 + 0.25 );
+								color.a = 1.;
+								break;
+
+							}
+
+							p += rayDir * delta;
+
+						}
+
+						if ( color.a == 0.0 ) discard;
+
+					}
+				`;
+
+				const geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
+				const material = new THREE.RawShaderMaterial( {
+					uniforms: {
+						map: { value: texture },
+						cameraPos: { value: new THREE.Vector3() },
+						threshold: { value: 0.6 },
+						steps: { value: 200 }
+					},
+					vertexShader,
+					fragmentShader,
+					side: THREE.BackSide,
+				} );
+
+				mesh = new THREE.Mesh( geometry, material );
+				scene.add( mesh );
+
+				//
+
+				const parameters = { threshold: 0.6, steps: 200 };
+
+				function update() {
+
+					material.uniforms.threshold.value = parameters.threshold;
+					material.uniforms.steps.value = parameters.steps;
+
+				}
+
+				const gui = new GUI();
+				gui.add( parameters, 'threshold', 0, 1, 0.01 ).onChange( update );
+				gui.add( parameters, 'steps', 0, 200, 1 ).onChange( update );
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				mesh.material.uniforms.cameraPos.value.copy( camera.position );
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>