Added raymarching reflect example.

1048d675 · gam0022 · a7a67619 · 1048d675 · 1048d675
隐藏空白更改
内联并排

Showing with 353 addition and 1 deletion

examples/files.js examples/files.js +2 -1

examples/webgl_raymarching_reflect.html examples/webgl_raymarching_reflect.html +351 -0

未找到文件。
--- a/examples/files.js
+++ b/examples/files.js
@@ -219,7 +219,8 @@ var files = {
 		"webgl_custom_attributes_lines",
 		"webgl_custom_attributes_points",
 		"webgl_custom_attributes_points2",
-		"webgl_custom_attributes_points3"
+		"webgl_custom_attributes_points3",
+		"webgl_raymarching_reflect"
 	],
 	"webvr": [
 		"webvr_cubes",

--- a/examples/webgl_raymarching_reflect.html
+++ b/examples/webgl_raymarching_reflect.html
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<title>three.js webgl - raymarching - reflect</title>
+		<style type="text/css">
+			body {
+				background-color: black;
+				margin: 0;
+				padding: 0;
+			}
+
+			a { color: skyblue }
+
+			canvas {
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				margin: auto;
+			}
+
+			#info {
+				color: white;
+				font-size: 13px;
+				position: absolute;
+				bottom: 10px;
+				width: 100%;
+				text-align: center;
+				z-index: 100;
+			}
+		</style>
+	</head>
+	<body>
+
+		<div id="info">
+			<a href="http://threejs.org" target="_blank">three.js</a> - webgl raymarching example -
+			reflect by <a href="https://github.com/gam0022" target="_blank">gam0022</a> (<a href="http://qiita.com/gam0022/items/03699a07e4a4b5f2d41f" target="_blank">article in Japanese</a>)
+		</div>
+
+		<script id="fragment_shader" type="x-shader/x-fragment">
+
+			precision highp float;
+			uniform float time;
+			uniform vec2 resolution;
+			uniform vec2 mouse;
+
+			const float EPS = 0.01;
+			const float OFFSET = EPS * 100.0;
+			const vec3 lightDir = vec3( -0.48666426339228763, 0.8111071056538127, -0.3244428422615251 );
+
+			// distance functions
+			vec3 onRep( vec3 p, float interval ) {
+
+				vec2 q = mod( p.xz, interval ) - interval * 0.5;
+				return vec3( q.x, p.y, q.y );
+
+			}
+
+			float sphereDist( vec3 p, float r ) {
+
+				return length( onRep( p, 3.0 ) ) - r;
+
+			}
+
+			float floorDist( vec3 p ){
+
+				return dot(p, vec3( 0.0, 1.0, 0.0 ) ) + 1.0;
+
+			}
+
+			vec4 minVec4( vec4 a, vec4 b ) {
+
+				return ( a.a < b.a ) ? a : b;
+
+			}
+
+			float checkeredPattern( vec3 p ) {
+
+				float u = 1.0 - floor( mod( p.x, 2.0 ) );
+				float v = 1.0 - floor( mod( p.z, 2.0 ) );
+
+				if ( ( u == 1.0 && v < 1.0 ) || ( u < 1.0 && v == 1.0 ) ) {
+
+					return 0.2;
+
+				} else {
+
+					return 1.0;
+
+				}
+
+			}
+
+			vec3 hsv2rgb( vec3 c ) {
+
+				vec4 K = vec4( 1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0 );
+				vec3 p = abs( fract( c.xxx + K.xyz ) * 6.0 - K.www );
+				return c.z * mix( K.xxx, clamp( p - K.xxx, 0.0, 1.0 ), c.y );
+
+			}
+
+			float sceneDist( vec3 p ) {
+
+				return min(
+					sphereDist( p, 1.0 ),
+					floorDist( p )
+				);
+
+			}
+
+			vec4 sceneColor( vec3 p ) {
+
+				return minVec4(
+					// 3 * 6 / 2 = 9
+					vec4( hsv2rgb(vec3( ( p.z + p.x ) / 9.0, 1.0, 1.0 ) ), sphereDist( p, 1.0 ) ),
+					vec4( vec3( 0.5 ) * checkeredPattern( p ), floorDist( p ) )
+				);
+
+			}
+
+			vec3 getNormal( vec3 p ) {
+
+				return normalize(vec3(
+					sceneDist(p + vec3( EPS, 0.0, 0.0 ) ) - sceneDist(p + vec3( -EPS, 0.0, 0.0 ) ),
+					sceneDist(p + vec3( 0.0, EPS, 0.0 ) ) - sceneDist(p + vec3( 0.0, -EPS, 0.0 ) ),
+					sceneDist(p + vec3( 0.0, 0.0, EPS ) ) - sceneDist(p + vec3( 0.0, 0.0, -EPS ) )
+				));
+
+			}
+
+			float getShadow( vec3 ro, vec3 rd ) {
+
+				float h = 0.0;
+				float c = 0.0;
+				float r = 1.0;
+				float shadowCoef = 0.5;
+
+				for ( float t = 0.0; t < 50.0; t++ ) {
+
+					h = sceneDist( ro + rd * c );
+
+					if ( h < EPS ) return shadowCoef;
+
+					r = min( r, h * 16.0 / c );
+					c += h;
+
+				}
+
+				return 1.0 - shadowCoef + r * shadowCoef;
+
+			}
+
+			vec3 getRayColor( vec3 origin, vec3 ray, out vec3 p, out vec3 normal, out bool hit ) {
+
+				// marching loop
+				float dist;
+				float depth = 0.0;
+				p = origin;
+
+				for ( int i = 0; i < 64; i++ ){
+
+					dist = sceneDist( p );
+					depth += dist;
+					p = origin + depth * ray;
+
+					if ( abs(dist) < EPS ) break;
+
+				}
+
+				// hit check and calc color
+				vec3 color;
+
+				if ( abs(dist) < EPS ) {
+
+					normal = getNormal(p);
+					float diffuse = clamp( dot( lightDir, normal ), 0.1, 1.0 );
+					float specular = pow( clamp( dot( reflect( lightDir, normal ), ray ), 0.0, 1.0 ), 10.0 );
+					float shadow = getShadow( p + normal * OFFSET, lightDir );
+					color = ( sceneColor( p ).rgb * diffuse + vec3( 0.8 ) * specular ) * max( 0.5, shadow );
+
+					hit = true;
+
+				} else {
+
+					color = vec3( 0.0 );
+
+				}
+
+				return color - pow( clamp( 0.05 * depth, 0.0, 0.6 ), 2.0 );
+
+			}
+
+			void main(void) {
+
+				// fragment position
+				vec2 p = ( gl_FragCoord.xy * 2.0 - resolution ) / min( resolution.x, resolution.y );
+
+				// camera and ray
+				vec3 cPos  = vec3( mouse.x - 0.5, mouse.y * 4.0 - 0.2, time );
+				vec3 cDir  = normalize( vec3( 0.0, -0.3, 1.0 ) );
+				vec3 cUp   = cross( cDir, vec3( 1.0, 0.0 ,0.0 ) );
+				vec3 cSide = cross( cDir, cUp );
+				float targetDepth = 1.3;
+				vec3 ray = normalize( cSide * p.x + cUp * p.y + cDir * targetDepth );
+
+				vec3 color = vec3( 0.0 );
+				vec3 q, normal;
+				bool hit;
+				float alpha = 1.0;
+
+				for ( int i = 0; i < 3; i++ ) {
+
+					color += alpha * getRayColor( cPos, ray, q, normal, hit );
+					alpha *= 0.3;
+					ray = normalize( reflect( ray, normal ) );
+					cPos = q + normal * OFFSET;
+
+					if ( !hit ) break;
+
+				}
+
+				gl_FragColor = vec4(color, 1.0);
+
+			}
+
+		</script>
+
+		<script id="vertex_shader" type="x-shader/x-vertex">
+
+			void main(void) {
+
+				gl_Position = vec4(position, 1.0);
+
+			}
+
+		</script>
+
+		<script src="../build/three.min.js"></script>
+
+		<script src="js/libs/stats.min.js"></script>
+		<script src="js/libs/dat.gui.min.js"></script>
+
+		<script>
+
+			var scene, camera, renderer;
+			var geometry, material, mesh;
+			var mouse = new THREE.Vector2( 0.5, 0.5 );
+			var canvas;
+			var stats;
+
+			var config = {
+				saveImage: function() {
+
+					renderer.render( scene, camera );
+					window.open( canvas.toDataURL() );
+
+				},
+				recursion: 3,
+				resolution: '512',
+			};
+
+			init();
+			render();
+
+			function init() {
+
+				scene = new THREE.Scene();
+				camera = new THREE.Camera();
+
+				geometry = new THREE.PlaneBufferGeometry( 2.0, 2.0 );
+				material = new THREE.ShaderMaterial( {
+					uniforms: {
+						time: { type: 'f', value: 0.0 },
+						resolution: { type: 'v2', value: new THREE.Vector2( 512, 512 ) },
+						mouse: { type: 'v2', value: mouse },
+					},
+					vertexShader: document.getElementById( 'vertex_shader' ).textContent,
+					fragmentShader: document.getElementById( 'fragment_shader' ).textContent
+				} );
+				mesh = new THREE.Mesh( geometry, material );
+				scene.add( mesh );
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( 512, 512 );
+
+				canvas = renderer.domElement;
+				canvas.addEventListener( 'mousemove', onMouseMove );
+				window.addEventListener( 'resize', onWindowResize );
+				document.body.appendChild( canvas );
+
+				var gui = new dat.GUI();
+				gui.add( config, 'saveImage' ).name( 'Save Image' );
+				gui.add( config, 'resolution', [ '256', '512', '800', 'full' ] ).name( 'Resolution' ).onChange( function( value ) {
+
+					if ( value !== 'full' ) {
+
+						canvas.width = value;
+						canvas.height = value;
+
+					}
+					onWindowResize();
+
+				} );
+
+				stats = new Stats();
+				document.body.appendChild( stats.domElement );
+
+			}
+
+			function render( timestamp ) {
+
+				stats.begin();
+
+				material.uniforms.time.value = timestamp * 0.001;
+				material.uniforms.resolution.value = new THREE.Vector2( canvas.width, canvas.height );
+				material.uniforms.mouse.value = mouse;
+				renderer.render( scene, camera );
+
+				stats.end();
+				requestAnimationFrame( render );
+
+			}
+
+			function onMouseMove( e ) {
+
+				mouse.x = e.offsetX / canvas.width;
+				mouse.y = e.offsetY / canvas.height;
+
+			}
+
+			function onWindowResize( e ) {
+
+				if ( config.resolution === 'full' ) {
+
+					canvas.width = window.innerWidth;
+					canvas.height = window.innerHeight;
+
+				}
+
+				renderer.setSize( canvas.width, canvas.height );
+
+			}
+
+		</script>
+
+	</body>
+</html>