三维距离场
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo5_3 三维距离场 2</title>
<script src="../external/three.js"></script>
<script src="../controls/OrbitControls.js"></script>
<style>
body {
overflow: hidden;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec2 u_resolution;
uniform float u_time;
uniform float u_scale;
varying vec2 vUv;
uniform vec2 u_mouse;
uniform vec2 u_pan;
// The MIT License
// Copyright © 2013 Inigo Quilez
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
// A list of useful distance function to simple primitives. All
// these functions (except for ellipsoid) return an exact
// euclidean distance, meaning they produce a better SDF than
// what you'd get if you were constructing them from boolean
// operations.
//
// More info here:
//
// https://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm
//------------------------------------------------------------------
float dot2( in vec2 v ) { return dot(v,v); }
float dot2( in vec3 v ) { return dot(v,v); }
float ndot( in vec2 a, in vec2 b ) { return a.x*b.x - a.y*b.y; }
float sdPlane( vec3 p )
{
return p.y;
}
float sdSphere( vec3 p, float s )
{
return length(p)-s;
}
float sdBox( vec3 p, vec3 b )
{
vec3 d = abs(p) - b;
return min(max(d.x,max(d.y,d.z)),0.0) + length(max(d,0.0));
}
// vertical
float sdCylinder( vec3 p, vec2 h )
{
vec2 d = abs(vec2(length(p.xz),p.y)) - h;
return min(max(d.x,d.y),0.0) + length(max(d,0.0));
}
// arbitrary orientation
float sdCylinder(vec3 p, vec3 a, vec3 b, float r)
{
vec3 pa = p - a;
vec3 ba = b - a;
float baba = dot(ba,ba);
float paba = dot(pa,ba);
float x = length(pa*baba-ba*paba) - r*baba;
float y = abs(paba-baba*0.5)-baba*0.5;
float x2 = x*x;
float y2 = y*y*baba;
float d = (max(x,y)<0.0)?-min(x2,y2):(((x>0.0)?x2:0.0)+((y>0.0)?y2:0.0));
return sign(d)*sqrt(abs(d))/baba;
}
//------------------------------------------------------------------
vec2 opU( vec2 d1, vec2 d2 ) {
return (d1.x<d2.x) ? d1 : d2;
}
vec2 substract(vec2 d2, vec2 d1) {
return (-d1.x > d2.x) ? vec2(-d1.x, d1.y) : d2;
}
vec2 substract1(vec2 d1, vec2 d2) {
return (-d1.x > d2.x) ? d2 : d1;
}
float substract0(float d1, float d2) {
return max(-d1, d2);
}
vec2 intersect(vec2 d1, vec2 d2) {
return (d1.x < d2.x) ? d2 : d1;
}
//------------------------------------------------------------------
#define ZERO 0
//(min(iFrame,0))
//------------------------------------------------------------------
vec2 map( in vec3 pos )
{
vec2 res = vec2( 1e10, 0.0 );
{
res = opU( res, vec2( sdBox( pos-vec3( 0.0,0.3, 0.0), vec3(0.3,0.3,0.3) ), 1.0 ) );
res = substract( res, vec2( sdSphere( pos-vec3(0.3, 0.5, 0.3), 0.4 ), 26.9 ) );
}
return res;
}
// http://iquilezles.org/www/articles/boxfunctions/boxfunctions.htm
vec2 iBox( in vec3 ro, in vec3 rd, in vec3 rad )
{
vec3 m = 1.0/rd;
vec3 n = m*ro;
vec3 k = abs(m)*rad;
vec3 t1 = -n - k;
vec3 t2 = -n + k;
return vec2( max( max( t1.x, t1.y ), t1.z ),
min( min( t2.x, t2.y ), t2.z ) );
}
vec2 raycast( in vec3 ro, in vec3 rd )
{
vec2 res = vec2(-1.0,-1.0);
float tmin = 1.0;
float tmax = 20.0;
// raytrace floor plane
float tp1 = (0.0-ro.y)/rd.y;
if( tp1>0.0 )
{
tmax = min( tmax, tp1 );
res = vec2( tp1, 1.0 );
}
//else return res;
// raymarch primitives
vec2 tb = iBox( ro-vec3(0.0,0.4,-0.5), rd, vec3(2.5,0.41,3.0) );
if( tb.x<tb.y && tb.y>0.0 && tb.x<tmax) {
//return vec2(tb.x,2.0);
tmin = max(tb.x,tmin);
tmax = min(tb.y,tmax);
float t = tmin;
for( int i=0; i<70; i ++ ) {
if (t >= tmax)
break;
vec2 h = map( ro+rd*t );
if( abs(h.x)<(0.0001*t) )
{
res = vec2(t,h.y);
break;
}
t += h.x;
}
}
return res;
}
// http://iquilezles.org/www/articles/rmshadows/rmshadows.htm
float calcSoftshadow( in vec3 ro, in vec3 rd, in float mint, in float tmax )
{
// bounding volume
float tp = (0.8-ro.y)/rd.y; if( tp>0.0 ) tmax = min( tmax, tp );
float res = 1.0;
float t = mint;
for( int i=ZERO; i<24; i++ )
{
float h = map( ro + rd*t ).x;
float s = clamp(8.0*h/t,0.0,1.0);
res = min( res, s*s*(3.0-2.0*s) );
t += clamp( h, 0.02, 0.2 );
if( res<0.004 || t>tmax ) break;
}
return clamp( res, 0.0, 1.0 );
}
// http://iquilezles.org/www/articles/normalsSDF/normalsSDF.htm
vec3 calcNormal( in vec3 pos )
{
// #if 0
vec2 e = vec2(1.0,-1.0)*0.5773*0.0005;
return normalize( e.xyy*map( pos + e.xyy ).x +
e.yyx*map( pos + e.yyx ).x +
e.yxy*map( pos + e.yxy ).x +
e.xxx*map( pos + e.xxx ).x );
// #else
// // inspired by tdhooper and klems - a way to prevent the compiler from inlining map() 4 times
// vec3 n = vec3(0.0);
// for( int i=ZERO; i<4; i++ )
// {
// vec3 e = 0.5773*(2.0*vec3((((i+3)>>1)&1),((i>>1)&1),(i&1))-1.0);
// n += e*map(pos+0.0005*e).x;
// //if( n.x+n.y+n.z>100.0 ) break;
// }
// return normalize(n);
// #endif
}
float calcAO( in vec3 pos, in vec3 nor )
{
float occ = 0.0;
float sca = 1.0;
for( int i=ZERO; i<5; i++ )
{
float h = 0.01 + 0.12*float(i)/4.0;
float d = map( pos + h*nor ).x;
occ += (h-d)*sca;
sca *= 0.95;
if( occ>0.35 ) break;
}
return clamp( 1.0 - 3.0*occ, 0.0, 1.0 ) * (0.5+0.5*nor.y);
}
// http://iquilezles.org/www/articles/checkerfiltering/checkerfiltering.htm
float checkersGradBox( in vec2 p, in vec2 dpdx, in vec2 dpdy )
{
// filter kernel
vec2 w = abs(dpdx)+abs(dpdy) + 0.001;
// analytical integral (box filter)
vec2 i = 2.0*(abs(fract((p-0.5*w)*0.5)-0.5)-abs(fract((p+0.5*w)*0.5)-0.5))/w;
// xor pattern
return 0.5 - 0.5*i.x*i.y;
}
vec3 render( in vec3 ro, in vec3 rd, in vec3 rdx, in vec3 rdy )
{
// background
vec3 col = vec3(0.7, 0.7, 0.9) - max(rd.y,0.0)*0.3;
// raycast scene
vec2 res = raycast(ro,rd);
float t = res.x;
float m = res.y;
if( m>-0.5 )
{
vec3 pos = ro + t*rd;
vec3 nor = (m<1.5) ? vec3(0.0,1.0,0.0) : calcNormal( pos );
vec3 ref = reflect( rd, nor );
// material
col = 0.2 + 0.2*sin( m*2.0 + vec3(0.0,1.0,2.0) );
float ks = 1.0;
if( m<1.5 )
{
// project pixel footprint into the plane
vec3 dpdx = ro.y*(rd/rd.y-rdx/rdx.y);
vec3 dpdy = ro.y*(rd/rd.y-rdy/rdy.y);
float f = checkersGradBox( 3.0*pos.xz, 3.0*dpdx.xz, 3.0*dpdy.xz );
col = 0.15 + f*vec3(0.05);
ks = 0.4;
}
// lighting
float occ = calcAO( pos, nor );
vec3 lin = vec3(0.0);
// sun
{
vec3 lig = normalize( vec3(-0.5, 0.4, -0.6) );
vec3 hal = normalize( lig-rd );
float dif = clamp( dot( nor, lig ), 0.0, 1.0 );
//if( dif>0.0001 )
dif *= calcSoftshadow( pos, lig, 0.02, 2.5 );
float spe = pow( clamp( dot( nor, hal ), 0.0, 1.0 ),16.0);
spe *= dif;
spe *= 0.04+0.96*pow(clamp(1.0-dot(hal,lig),0.0,1.0),5.0);
lin += col*2.20*dif*vec3(1.30,1.00,0.70);
lin += 5.00*spe*vec3(1.30,1.00,0.70)*ks;
}
// sky
{
float dif = sqrt(clamp( 0.5+0.5*nor.y, 0.0, 1.0 ));
dif *= occ;
float spe = smoothstep( -0.2, 0.2, ref.y );
spe *= dif;
spe *= 0.04+0.96*pow(clamp(1.0+dot(nor,rd),0.0,1.0), 5.0 );
//if( spe>0.001 )
spe *= calcSoftshadow( pos, ref, 0.02, 2.5 );
lin += col*0.60*dif*vec3(0.40,0.60,1.15);
lin += 2.00*spe*vec3(0.40,0.60,1.30)*ks;
}
// back
{
float dif = clamp( dot( nor, normalize(vec3(0.5,0.0,0.6))), 0.0, 1.0 )*clamp( 1.0-pos.y,0.0,1.0);
dif *= occ;
lin += col*0.55*dif*vec3(0.25,0.25,0.25);
}
// sss
{
float dif = pow(clamp(1.0+dot(nor,rd),0.0,1.0),2.0);
dif *= occ;
lin += col*0.25*dif*vec3(1.00,1.00,1.00);
}
col = lin;
col = mix( col, vec3(0.7,0.7,0.9), 1.0-exp( -0.0001*t*t*t ) );
}
return vec3( clamp(col,0.0,1.0) );
}
mat3 setCamera( in vec3 ro, in vec3 ta, float cr )
{
vec3 cw = normalize(ta-ro);
vec3 cp = vec3(sin(cr), cos(cr),0.0);
vec3 cu = normalize( cross(cw,cp) );
vec3 cv = ( cross(cu,cw) );
return mat3( cu, cv, cw );
}
vec2 iResolution = vec2(1024.0, 576.0);
void main() {
vec2 fragCoord = iResolution * vUv;
vec2 mo = u_mouse.xy/iResolution.xy;
float time = 32.0;// + u_time*1.5;
// camera
vec3 ta = vec3(0.0); //vec3( 0.5, -0.5, -0.6 );
// ta.x += u_pan.x, ta.z += u_pan.y;
vec3 dif = vec3( 4.5*cos(0.1*time + 7.0*mo.x), 1.3 + 4.0*mo.y, 4.5*sin(0.1*time + 7.0*mo.x) ) * u_scale;
// camera-to-world transformation
float theta = 0.0;
vec3 up = vec3(sin(theta), cos(theta),0.0);
vec3 cw = -normalize(dif);
vec3 ca0 = normalize( cross(cw, up) );
vec3 panOffset = cross(up, ca0) * u_pan.y - ca0 * u_pan.x;
ta += panOffset;
vec3 ro = ta + dif;
vec3 cv = ( cross(ca0,cw) );
mat3 ca = mat3( ca0, cv, cw ); //setCamera( ro, ta, theta );
vec3 tot = vec3(0.0);
vec2 p = (2.0*fragCoord-iResolution.xy)/iResolution.y;
// ray direction
vec3 rd = ca * normalize( vec3(p,2.5) );
// ray differentials
vec2 px = (2.0*(fragCoord+vec2(1.0,0.0))-iResolution.xy)/iResolution.y;
vec2 py = (2.0*(fragCoord+vec2(0.0,1.0))-iResolution.xy)/iResolution.y;
vec3 rdx = ca * normalize( vec3(px,2.5) );
vec3 rdy = ca * normalize( vec3(py,2.5) );
// render
vec3 col = render( ro, rd, rdx, rdy );
// gain
// col = col*3.0/(2.5+col);
// gamma
col = pow( col, vec3(0.4545) );
tot += col;
gl_FragColor = vec4( tot, 1.0 );
}
</script>
<script>
//https://www.shadertoy.com/view/Xds3zN
//http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/
var container;
var camera, scene, renderer, orbitControls;
var uniforms;
var mesh;
init();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set(0, 0, 2);
scene = new THREE.Scene();
scene.add(new THREE.AxesHelper(20));
var geometry = new THREE.PlaneBufferGeometry( 2 * 1.024, 2 * 0.576 );
uniforms = {
u_time: { type: "f", value: 1.0 },
u_scale: { type: "f", value: 1.0 },
u_resolution: { type: "v2", value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
u_mouse: { type: "v2", value: new THREE.Vector2(-1, -1) },
u_pan: { type: "v2", value: new THREE.Vector2(0, 0) },
};
var material = new THREE.ShaderMaterial( {
uniforms: uniforms,
side: THREE.DoubleSide,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );
material.extensions.derivatives = true;
var material2 = new THREE.MeshBasicMaterial({color: '#00bbbb', wireframe: true, side: THREE.DoubleSide})
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
container.appendChild( renderer.domElement );
orbitControls = new THREE.OrbitControls( camera, renderer.domElement );
onWindowResize();
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize( event ) {
renderer.setSize( window.innerWidth, window.innerHeight );
// uniforms.u_resolution.value.x = renderer.domElement.width;
// uniforms.u_resolution.value.y = renderer.domElement.height;
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
uniforms.u_time.value += 0.01; //0.008
renderer.render( scene, camera );
}
document.addEventListener( 'contextmenu', (event) => {
event.preventDefault();
} );
let zoomSpeed = 1.0, zoomFactor = zoomSpeed * 0.95;
document.addEventListener( 'wheel', onMouseWheel, {passive: false} );
function onMouseWheel(event) {
event.preventDefault();
event.stopPropagation();
if (event.deltaY < 0) { //dollyOut
uniforms.u_scale.value *= zoomFactor;
} else if (event.deltaY > 0) { //dollyIn
uniforms.u_scale.value /= zoomFactor;
}
}
let prePos, moved = new THREE.Vector2(0, 0);
let paned = new THREE.Vector3(0, 0, 0);
let state_paning = 2, state_rotating = 1, state;
document.addEventListener('mousedown', onDocumentMouseDown, false);
function onDocumentMouseDown(event) {
let vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);
vector = vector.unproject(camera);
console.log(event.button);
let raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
let lst = raycaster.intersectObjects([mesh]);
if (lst.length == 0) {
orbitControls.enabled = true;
document.removeEventListener('mousemove', onMouseMove)
return;
}
if (event.button == 2) {
state = state_paning;
} else {
state = state_rotating;
}
prePos = lst[0].point;
orbitControls.enabled = false;
document.addEventListener('mousemove', onMouseMove)
}
document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', onMouseMove)
})
function onMouseMove(event) {
let vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);
vector = vector.unproject(camera);
let raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
let lst = raycaster.intersectObjects([mesh]);
if (lst.length == 0) {
return;
}
let curPos = lst[0].point, dd = new THREE.Vector3();
if (prePos) {
dd = curPos.clone().sub(prePos);
}
prePos = curPos;
if (state == state_rotating) {
moved.x += dd.x, moved.y += dd.y;
uniforms.u_mouse.value.x = moved.x * 1024;
uniforms.u_mouse.value.y = moved.y * 576;
} else if (state == state_paning) {
paned.x += dd.x, paned.y -= dd.y;
uniforms.u_pan.value.x = paned.x;
uniforms.u_pan.value.y = paned.y;
}
}
</script>
</body>
</html>
shader 和鼠标的交互，参考THREE.OrbitControls的源码来修改，有三种交互
- 旋转视角 rotate
- 放缩视角 scale
- 移动视角 pan
1989
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
