404 error text effect with animated waves effects. developed using HTML, CSS and threejs framework.
HTML Snippet
<div id="container"> <div class="bottom-right"> <a id="signature" href="https://www.shadertoy.com/user/balkhan/sort=popular&from=0&num=8"> _ </a> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.js"></script> <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"> uniform vec2 u_resolution; uniform float u_time; uniform sampler2D sam; void main() { t = u_time*.125; vec3 col = vec3(0., 0., 0.); // if (mod(float(gl_FragCoord.x), 30.) <= 1. || mod(float(gl_FragCoord.y), 30.) <= 1.) // discard; vec2 R = u_resolution.xy; float aspect = max(R.x/R.y, 1.*R.y/R.x); // R *= aspect; vec2 uv = vec2(gl_FragCoord.xy-R/2.) / R.xy; vec2 tcd = vec2(gl_FragCoord.xy) / R.xy; //uv *= aspect; vec3 dir = camera(uv*4.); vec3 pos = vec3(.0, .0, 0.0); pos.z = 44.5; h*=0.; vec2 inter = (march(pos, dir)); // col.xyz = 1.-ret_col*(1.-inter.x*.0125); col += h * 1.; col = max( col, texture2D(sam, tcd-vec2(.021,.0)).xyz*.0); gl_FragColor = vec4(col,1.0); } float mylength(vec3 p) {return max(abs(p.x), max(abs(p.y), abs(p.z)));} float mylength(vec2 p) {return max(abs(p.x), abs(p.y));} float sdCapsule( vec3 p, vec3 a, vec3 b, float r ) { vec3 pa = p-a, ba = b-a; float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0 ); return length( pa - ba*h ) - r; } float four_df(vec3 p, vec3 off) { p -= off; vec3 pp = p; // rotate(pp.xz, pp.y*.5+u_time*1.); // pp.xz = modA(pp.xz, 5.); pp.x -= 1.; float ret = sdCapsule(pp, vec3(.0, 10.*1.5, .0), vec3(.0, -10.*1.5, .0), .25 ); pp = p; rotate(pp.xy, 1.57); pp.z = abs(pp.z)-clamp(exp(-pp.y+0.), .0, 1.); ret = min(ret, sdCapsule(pp-vec3(min(exp(-pp.y+5.), 1.)*2.1*sin(pp.y*.5+u_time), .0, .0), vec3(.0, 10.*1.5, .0), vec3(.0, -7.*1.5, 0.0), .25) ); pp = p; rotate(pp.xy, 1.57*1.5); pp.x -= 6.5*1.5+1.; ret = min(ret, sdCapsule(pp, vec3(.0, 7.*1.5, .0), vec3(.0, -6.*1.5, 0.0), .25) ); return ret; } float scene(vec3 p) { float var; float mind = 1e5; var = atan(p.x,p.y); vec2 q = vec2( ( length(p.xy) )-10.,p.z); rotate(q, var*2.-u_time*.50); q = abs(q)-2.; rotate(q, var*4.+u_time*1.); q.y = abs(q.y)-.8; rotate(q, var*4.+u_time*1.); q.x = abs(q.x)-.8; ret_col = 1.-vec3(.350, .2, .3); mind = mylength(q)+.5+1.05*(length(fract(q*.125*(3.+3.*sin(var*2. - u_time*.250)) )-.5)-1.215); float the_4 = four_df(vec3((abs(p.x))*(p.x<0.0 ? -1. : 1.)+(p.x<0.0 ? 1. : -1.)*35.,p.yz), vec3(.0, .0, .0)); h += vec3(.725, .4, .5)*.0125/(.125021+.0051*mind*mind); mind = min(mind, the_4); h += -vec3(.5, .4, .5)*.0025/(.021+mind*mind); h += vec3(.31, .21, .25)*.00125/(.005+.000151*the_4*the_4); //mind = abs(mind)+.0051; return (mind); } vec2 march(vec3 pos, vec3 dir) { vec2 dist = vec2(0.0, 0.0); vec3 p = vec3(0.0, 0.0, 0.0); vec2 s = vec2(0.0, 0.0); pos.z += -10.; for (float i = -1.; i < I_MAX; ++i) { p = pos + dir * dist.y; dist.x = scene(p)*.7; dist.y += dist.x; // log trick by aiekick if (log(dist.y*dist.y/dist.x/1e5) > .0 || dist.x < E || dist.y > FAR) { break; } s.x++; } s.y = dist.y; return (s); } // Utilities void rotate(inout vec2 v, float angle) { v = vec2(cos(angle)*v.x+sin(angle)*v.y,-sin(angle)*v.x+cos(angle)*v.y); } vec3 camera(vec2 uv) { float fov = 1.; vec3 forw = vec3(0.0, 0.0, -1.0); vec3 right = vec3(1.0, 0.0, 0.0); vec3 up = vec3(0.0, 1.0, 0.0); return (normalize((uv.x) * right + (uv.y) * up + fov * forw)); } </script> </div>CSS Code
body { background-color: #000000; } .bottom-right { position: absolute; bottom: 20%; right: 10%; } #signature { font-family: "Times New Roman", Times, serif; font-size: 35px; } #container { width: 100%; height: 100%; }JavaScript Snippet
var container; var camera, scene, renderer; var uniforms; init(); animate(); function init() { container = document.getElementById( 'container' ); camera = new THREE.Camera(); camera.position.z = 1; scene = new THREE.Scene(); var geometry = new THREE.PlaneBufferGeometry( 2, 2 ); uniforms = { sam: {type: "t", value: new THREE.TextureLoader().load( "https://fr.cdn.v5.futura-sciences.com/buildsv6/images/wide1920/f/5/0/f50159600a_100519_plus-belle-image-science-2016.jpg" )}, u_time: { type: "f", value: 1.0 }, u_resolution: { type: "v2", value: new THREE.Vector2() }, u_mouse: { type: "v2", value: new THREE.Vector2() } }; 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(); renderer.setPixelRatio( window.devicePixelRatio ); container.appendChild( renderer.domElement ); onWindowResize(); window.addEventListener( 'resize', onWindowResize, false ); document.onmousemove = function(e){ uniforms.u_mouse.value.x = e.pageX uniforms.u_mouse.value.y = e.pageY } } 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.05; renderer.render( scene, camera ); }Preview
Leave a Reply