Cubic Tunnel

Developer
XORXOR
Size
4,791 Kb
Views
4,048
  1. Cubic Tunnel Previews
  2. Cubic Tunnel HTML Codes
  3. Cubic Tunnel CSS Codes
  4. Cubic Tunnel JS Codes

How do I make an cubic tunnel?

Created by XORXOR, 2016 Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0) https://www.shadertoy.com/view/MtdSWr#. What is a cubic tunnel? How do you make a cubic tunnel? This script and codes were developed by XORXOR on 27 January 2023, Friday.

Cubic Tunnel Previews
IQ Test

Cubic Tunnel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cubic Tunnel</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"></div>
<script id="vertexShader" type="x-shader/x-vertex"> void main() { gl_Position = vec4( position, 1.0 ); }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
// Created by XORXOR, 2016
// Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)
// https://www.shadertoy.com/view/4ldXR4
//
// Tried to recreate mr. div's cubic_tunnel animgif
// https://mrdiv.tumblr.com/post/90669206322/cubictunnel	uniform sampler2D iChannel0; uniform vec2 iResolution; uniform float iGlobalTime; uniform vec3 iMouse;
//#define ANTIALIAS
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 ) );
}
float map( vec3 p )
{ p.z = mod( p.z, 8.0 ); float d = sdBox( p - vec3( 0.0, 1.0, 1.0 ), vec3( 1.5, 0.5, 0.5 ) ); d = min( d, sdBox( p - vec3( 1.0, 0.0, 1.0 ), vec3( 0.5 ) ) ); d = min( d, sdBox( p - vec3( -1.0, 1.0, 3.0 ), vec3( 0.5, 0.5, 1.5 ) ) ); d = min( d, sdBox( p - vec3( -1.0, 0.0, 5.0 ), vec3( 0.5, 1.5, 0.5 ) ) ); d = min( d, sdBox( p - vec3( 0.0, -1.0, 5.0 ), vec3( 0.5 ) ) ); d = min( d, sdBox( p - vec3( 1.0, -1.0, 6.5 ), vec3( 0.5, 0.5, 2.0 ) ) ); d = min( d, sdBox( p - vec3( 1.0, -1.0, 0.5 ), vec3( 0.5, 0.5, 1.0 ) ) ); return d;
}
float trace( vec3 ro, vec3 rd, float kTMax )
{ const float kTMin = 0.01; const float kEps = 0.001; float t = kTMin; float res; for ( int i = 0; i < 64; i++ ) { vec3 pos = ro + rd * t; res = map( pos ); if ( ( res < kEps ) || ( t > kTMax ) ) { break; } t += res; } if ( t < kTMax ) { return t; } else { return -1.0; }
}
float traceRefl( vec3 ro, vec3 rd, float kTMax )
{ const float kTMin = 0.01; const float kEps = 0.001; float t = kTMin; float res; for ( int i = 0; i < 100; i++ ) { vec3 pos = ro + rd * t; res = map( pos ); if ( ( res < kEps ) || ( t > kTMax ) ) { break; } t += res * clamp( 0.1 * float( i + 1 ) * 0.1, 0.0, 1.0 ); } if ( t < kTMax ) { return t; } else { return -1.0; }
}
mat3 calcCamera( vec3 eye, vec3 target )
{ vec3 cw = normalize( target - eye ); vec3 cu = cross( cw, vec3( 0, 1, 0 ) ); vec3 cv = cross( cu, cw ); return mat3( cu, cv, cw );
}
float edge2d( vec2 coord )
{ const float edge = 0.95; vec2 ec = smoothstep( edge, 1.0, coord ); ec += 1.0 - smoothstep( -1.0, -edge, coord ); return dot( ec, vec2( 1.0 ) );
}
float edge( vec3 coord )
{ vec3 c = 1.0 - 2.0 * fract( ( coord + 0.5 ) ); float x = edge2d( c.xy ); float y = edge2d( c.yz ); float z = edge2d( c.xz ); return 1.0 - x * y * z;
}
vec3 calcNormal( vec3 p )
{ const vec2 e = vec2( 0.005, 0 ); float dp = map( p ); return normalize( vec3( dp - map( p - e.xyy ), dp - map( p - e.yxy ), dp - map( p - e.yyx ) ) );
}
float calcShadow( vec3 ro, vec3 rd, float mint, float maxt )
{ float t = mint; float res = 1.0; for ( int i = 0; i < 10; i++ ) { float h = map( ro + rd * t ); res = min( res, 1.5 * h / t ); t += h; if ( ( h < 0.001 ) || ( t > maxt ) ) { break; } } return clamp( res, 0.0, 1.0 );
}
float calcAo( vec3 pos, vec3 n )
{ float sca = 2.0; float occ = 0.0; for( int i = 0; i < 5; i++ ) { float hr = 0.01 + float( i ) * 0.5 / 4.0; float dd = map( n * hr + pos ); occ += ( hr - dd ) * sca; sca *= 0.6; } return clamp( 1.0 - occ, 0.0, 1.0 );
}
// Bump mapping from Shane:
// https://www.shadertoy.com/view/ltjXzd
vec3 tex3D( sampler2D tex, in vec3 p, in vec3 n )
{ n = max( ( abs( n ) - 0.2 ) * 7.0 , 0.001 ); n /= ( n.x + n.y + n.z ); return 1.0 - ( texture2D( tex, p.yz ) * n.x + texture2D( tex, p.zx ) * n.y + texture2D( tex, p.xy ) * n.z ).xyz;
}
vec3 doBumpMap( sampler2D tex, in vec3 p, in vec3 nor, float bumpfactor)
{ const float eps = 0.01; vec3 grad = vec3( tex3D( tex, vec3( p.x - eps, p.y, p.z ), nor ).x, tex3D( tex, vec3( p.x, p.y - eps, p.z ), nor ).x, tex3D( tex, vec3( p.x, p.y, p.z - eps ), nor ).x ); grad = ( grad - tex3D( tex, p , nor ).x ) / eps; grad -= nor * dot( nor, grad ); return normalize( nor + grad * bumpfactor );
}
vec3 color( vec3 pos, vec3 nor, vec3 ro, vec3 rd )
{ vec3 col = vec3( 0.36, 0.15, 0.06 ); if ( dot( rd, rd ) > 0.001 ) { nor = doBumpMap( iChannel0, pos, nor, 0.003 ); vec3 ref = reflect( rd, nor ); vec3 ldir = normalize( vec3( -2.0, 2.5, 4.0 ) ); float dif = max( dot( nor, ldir ), 0.0 ); float spe = pow( clamp( dot( ref, ldir ), 0.0, 1.0 ), 6.0 ); col += 0.2 * dif; col += spe; } float ao = calcAo( pos, nor ); col *= ( 0.3 + ao ); col *= edge( pos ); float d = abs( pos.z - ro.z ); col = mix( 1.0 - col, col, clamp( d / 10.0, 0.0, 1.0 ) ); col += pow( 0.3 * max( abs( pos.x ), abs( pos.y ) ), 2.0 );; return col;
}
vec3 render( vec3 ro, vec3 rd )
{ float t = trace( ro, rd, 40.0 ); vec3 col = vec3( 1.0 ); if ( t > 0.0 ) { vec3 pos = ro + t * rd; vec3 nor = calcNormal( pos ); vec3 ref = reflect( rd, nor ); col = color( pos, nor, ro, rd ); float tRef = traceRefl( pos, ref, 10.0 ); if ( tRef > 0.0 ) { vec3 refPos = pos + tRef * ref; vec3 refNor = calcNormal( refPos ); col += 0.1 * color( refPos, refNor, vec3( 0.0 ), vec3( 0.0 ) ); } col = mix( col, vec3( 1.0 ), smoothstep( 0.0, 30.0, t ) ); } return col;
}
mat2 rot2( float a )
{ float c = cos( a ); float s = sin( a ); return mat2( c, -s, s, c );
}
void main()
{ vec2 mo = vec2( 0.0 ); if ( iMouse.z > 0.5 ) { mo = 2.0 * iMouse.xy / iResolution.xy - 1.0; mo.y *= -1.0; mo *= 3.14159 * 0.1; } float time = iGlobalTime * 6.0; vec3 eye = vec3( 0.0, 0.0, 0.0 - time ); vec3 target = vec3( 0.0, 0.0, -20.0 ); target.xz *= rot2( mo.x ); target.yz *= rot2( mo.y ); target.z -= time; mat3 cam = calcCamera( eye, target ); vec3 col = vec3( 0.0 ) ;
#ifdef ANTIALIAS for ( int i = 0; i < 4; i++ ) { vec2 off = vec2( mod( float( i ), 2.0 ), mod( float( i / 2 ), 2.0 ) ) / 2.0;
#else vec2 off = vec2( 0.0 );
#endif vec2 uv = ( gl_FragCoord.xy + off - 0.5 * iResolution.xy ) / iResolution.y; vec3 rd = cam * normalize( vec3( uv, 2.0 ) ); col += render( eye, rd );
#ifdef ANTIALIAS } col *= 1.0 / 4.0;
#endif gl_FragColor = vec4( col, 1.0 );
}
</script> <script src='https://threejs.org/build/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Cubic Tunnel - Script Codes CSS Codes

*{ padding: 0; margin: 0;
}

Cubic Tunnel - Script Codes JS Codes

/*
Created by XORXOR, 2016
Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)
https://www.shadertoy.com/view/MtdSWr#
Tried to recreate mr. div's cubic_tunnel animgif https://mrdiv.tumblr.com/post/90669206322/cubictunnel
*/
var container;
var camera, scene, renderer;
var uniforms;
var startTime;
var textureLoader = new THREE.TextureLoader();
var texture;
textureLoader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/tex12.png', function ( tex ) { texture = tex; init(); animate(); })
init();
animate();
function init() { container = document.getElementById( 'container' ); startTime = Date.now(); camera = new THREE.Camera(); camera.position.z = 1; scene = new THREE.Scene(); var geometry = new THREE.PlaneBufferGeometry( 4, 3 ); uniforms = { iGlobalTime: { type: "f", value: 1.0 }, iResolution: { type: "v2", value: new THREE.Vector2() }, iMouse: { type: "v3", value: new THREE.Vector3() }, iChannel0: { type: "t", value:texture } }; uniforms.iChannel0.value.wrapS = uniforms.iChannel0.value.wrapT = THREE.RepeatWrapping; var material = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: document.getElementById( 'vertexShader' ).textContent, fragmentShader: document.getElementById( 'fragmentShader' ).textContent } ); var mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer = new THREE.WebGLRenderer(); container.appendChild( renderer.domElement ); onWindowResize(); window.addEventListener( 'resize', onWindowResize, false ); window.addEventListener( 'mousedown', mouseDown ); window.addEventListener( 'mouseup', mouseUp ); window.addEventListener( 'mousemove', mouseMove );
}
function onWindowResize( event ) { uniforms.iResolution.value.x = window.innerWidth; uniforms.iResolution.value.y = window.innerHeight; renderer.setSize( window.innerWidth, window.innerHeight );
}
function mouseDown( event ) { uniforms.iMouse.value.x = event.clientX; uniforms.iMouse.value.y = event.clientY; uniforms.iMouse.value.z = 1.0;
}
function mouseMove( event ) { uniforms.iMouse.value.x = event.clientX; uniforms.iMouse.value.y = event.clientY;
}
function mouseUp( event ) { uniforms.iMouse.value.x = event.clientX; uniforms.iMouse.value.y = event.clientY; uniforms.iMouse.value.z = 0.0;
}
function animate() { requestAnimationFrame( animate ); render();
}
function render() { var currentTime = Date.now(); uniforms.iGlobalTime.value = (currentTime - startTime) * 0.001; renderer.render( scene, camera );
}
Cubic Tunnel - Script Codes
Cubic Tunnel - Script Codes
Home Page Home
Developer XORXOR
Username xorxor_hu
Uploaded January 27, 2023
Rating 4
Size 4,791 Kb
Views 4,048
Do you need developer help for Cubic Tunnel?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

XORXOR (xorxor_hu) Script Codes
Name
Birds
Morphing Tubes
Grid of Birds
Kaleidoscope
2050
The Walking Raymarcher
Pastel Pump
Complex Form with Black and White Bands
Complex Form with Black and White Spirals
Pipes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!