You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

366 lines
8.3 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - raymarching - reflect</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">
<style type="text/css">
html, body {
height: 100%;
}
#container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl raymarching example<br/>
reflect by <a href="https://github.com/gam0022" target="_blank" rel="noopener">gam0022</a> (<a href="http://qiita.com/gam0022/items/03699a07e4a4b5f2d41f" target="_blank" rel="noopener">article</a>)
</div>
<div id="container">
<canvas id="canvas"></canvas>
</div>
<script id="fragment_shader" type="x-shader/x-fragment">
precision highp float;
uniform vec2 resolution;
uniform mat4 viewMatrix;
uniform vec3 cameraPosition;
uniform mat4 cameraWorldMatrix;
uniform mat4 cameraProjectionMatrixInverse;
const float EPS = 0.01;
const float OFFSET = EPS * 100.0;
const vec3 lightDir = vec3( -0.48666426339228763, 0.8111071056538127, -0.3244428422615251 );
// distance functions
vec3 opRep( 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( opRep( 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 pos, out vec3 normal, out bool hit ) {
// marching loop
float dist;
float depth = 0.0;
pos = origin;
for ( int i = 0; i < 64; i++ ){
dist = sceneDist( pos );
depth += dist;
pos = origin + depth * ray;
if ( abs(dist) < EPS ) break;
}
// hit check and calc color
vec3 color;
if ( abs(dist) < EPS ) {
normal = getNormal( pos );
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( pos + normal * OFFSET, lightDir );
color = ( sceneColor( pos ).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) {
// screen position
vec2 screenPos = ( gl_FragCoord.xy * 2.0 - resolution ) / resolution;
// ray direction in normalized device coordinate
vec4 ndcRay = vec4( screenPos.xy, 1.0, 1.0 );
// convert ray direction from normalized device coordinate to world coordinate
vec3 ray = ( cameraWorldMatrix * cameraProjectionMatrixInverse * ndcRay ).xyz;
ray = normalize( ray );
// camera position
vec3 cPos = cameraPosition;
// cast ray
vec3 color = vec3( 0.0 );
vec3 pos, normal;
bool hit;
float alpha = 1.0;
for ( int i = 0; i < 3; i++ ) {
color += alpha * getRayColor( cPos, ray, pos, normal, hit );
alpha *= 0.3;
ray = normalize( reflect( ray, normal ) );
cPos = pos + normal * OFFSET;
if ( !hit ) break;
}
gl_FragColor = vec4( color, 1.0 );
}
</script>
<script id="vertex_shader" type="x-shader/x-vertex">
attribute vec3 position;
void main(void) {
gl_Position = vec4(position, 1.0);
}
</script>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<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 { GUI } from 'three/addons/libs/lil-gui.module.min.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
let dolly, camera, scene, renderer;
let geometry, material, mesh;
let stats, clock;
const canvas = document.querySelector( '#canvas' );
const config = {
saveImage: function () {
renderer.render( scene, camera );
window.open( canvas.toDataURL() );
},
resolution: '512'
};
init();
render();
function init() {
renderer = new THREE.WebGLRenderer( { canvas: canvas } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( config.resolution, config.resolution );
window.addEventListener( 'resize', onWindowResize );
// THREE.Scene
scene = new THREE.Scene();
dolly = new THREE.Group();
scene.add( dolly );
clock = new THREE.Clock();
camera = new THREE.PerspectiveCamera( 60, canvas.width / canvas.height, 1, 2000 );
camera.position.z = 4;
dolly.add( camera );
geometry = new THREE.PlaneGeometry( 2.0, 2.0 );
material = new THREE.RawShaderMaterial( {
uniforms: {
resolution: { value: new THREE.Vector2( canvas.width, canvas.height ) },
cameraWorldMatrix: { value: camera.matrixWorld },
cameraProjectionMatrixInverse: { value: camera.projectionMatrixInverse.clone() }
},
vertexShader: document.getElementById( 'vertex_shader' ).textContent,
fragmentShader: document.getElementById( 'fragment_shader' ).textContent
} );
mesh = new THREE.Mesh( geometry, material );
mesh.frustumCulled = false;
scene.add( mesh );
// Controls
const controls = new OrbitControls( camera, canvas );
controls.enableZoom = false;
// GUI
const gui = new GUI();
gui.add( config, 'saveImage' ).name( 'Save Image' );
gui.add( config, 'resolution', [ '256', '512', '800', 'full' ] ).name( 'Resolution' ).onChange( onWindowResize );
stats = new Stats();
document.body.appendChild( stats.dom );
}
function onWindowResize() {
if ( config.resolution === 'full' ) {
renderer.setSize( window.innerWidth, window.innerHeight );
} else {
renderer.setSize( config.resolution, config.resolution );
}
camera.aspect = canvas.width / canvas.height;
camera.updateProjectionMatrix();
material.uniforms.resolution.value.set( canvas.width, canvas.height );
material.uniforms.cameraProjectionMatrixInverse.value.copy( camera.projectionMatrixInverse );
}
function render() {
stats.begin();
const elapsedTime = clock.getElapsedTime();
dolly.position.z = - elapsedTime;
renderer.render( scene, camera );
stats.end();
requestAnimationFrame( render );
}
</script>
</body>
</html>