# Cubic Tunnel

Developer
Size
4,791 Kb
Views
4,048

## 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

## Cubic Tunnel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<body> <div id="container"></div>
<script id="vertexShader" type="x-shader/x-vertex"> void main() { gl_Position = vec4( position, 1.0 ); }
</script>
// Created by XORXOR, 2016
// Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)
//
// 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:
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 JS Codes

/*
Created by XORXOR, 2016
Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)
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 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 );
}
 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.

XORXOR (xorxor_hu) Script Codes
 Name Size The Walking Raymarcher 7,934 Kb Morphing Tubes 3,406 Kb Kaleidoscope 3,536 Kb Complex Form with Black and White Spirals 3,340 Kb 2050 3,612 Kb Pastel Pump 3,763 Kb Birds 5,934 Kb Pipes 3,300 Kb Grid of Birds 3,512 Kb Complex Form with Black and White Bands 3,209 Kb
Create amazing sales emails 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.