marco/TunnelProofOfConcept
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tunnel demo

Browse Source
This commit is contained in:
Marco
2023-12-14 15:25:30 +01:00
commit c91f374c53
28 changed files with 9396 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

1
.cache/04/edfeab6adcb15a63bbc205328f007c.json Normal file
View File

@@ -0,0 +1 @@
{"id":"D9Nj","dependencies":[{"name":"/Users/marco/codeProjects/Tunnelv0.000000001/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"css":"body{background-color:#000;overflow:hidden}#container{width:100vw;height:100vh;position:fixed;top:0;left:0}","js":""},"sourceMaps":{"css":{"mappings":[{"source":"styles.css","name":null,"original":{"line":1,"column":0},"generated":{"line":1,"column":0}},{"source":"styles.css","name":null,"original":{"line":2,"column":2},"generated":{"line":1,"column":5}},{"source":"styles.css","name":null,"original":{"line":2,"column":27},"generated":{"line":1,"column":26}},{"source":"styles.css","name":null,"original":{"line":3,"column":2},"generated":{"line":1,"column":27}},{"source":"styles.css","name":null,"original":{"line":4,"column":0},"generated":{"line":1,"column":42}},{"source":"styles.css","name":null,"original":{"line":6,"column":0},"generated":{"line":1,"column":43}},{"source":"styles.css","name":null,"original":{"line":7,"column":2},"generated":{"line":1,"column":54}},{"source":"styles.css","name":null,"original":{"line":7,"column":14},"generated":{"line":1,"column":65}},{"source":"styles.css","name":null,"original":{"line":8,"column":2},"generated":{"line":1,"column":66}},{"source":"styles.css","name":null,"original":{"line":8,"column":15},"generated":{"line":1,"column":78}},{"source":"styles.css","name":null,"original":{"line":9,"column":2},"generated":{"line":1,"column":79}},{"source":"styles.css","name":null,"original":{"line":9,"column":17},"generated":{"line":1,"column":93}},{"source":"styles.css","name":null,"original":{"line":10,"column":2},"generated":{"line":1,"column":94}},{"source":"styles.css","name":null,"original":{"line":10,"column":8},"generated":{"line":1,"column":99}},{"source":"styles.css","name":null,"original":{"line":11,"column":2},"generated":{"line":1,"column":100}},{"source":"styles.css","name":null,"original":{"line":12,"column":0},"generated":{"line":1,"column":106}}],"sources":{"styles.css":"body {\n background-color: #000000;\n overflow: hidden;\n}\n\n#container {\n width: 100vw;\n height: 100vh;\n position: fixed;\n top: 0;\n left: 0;\n}\n"},"lineCount":null}},"error":null,"hash":"c955194d39ac31a63acc63e164a083d3","cacheData":{"env":{}}}

1
.cache/14/ec564e7c2591529f15bea45736704c.json Normal file
View File

@@ -0,0 +1 @@
{"id":"s8zH","dependencies":[{"name":"./src/index.js","dynamic":true,"resolved":"/Users/marco/codeProjects/Tunnelv0.000000001/src/index.js","parent":"/Users/marco/codeProjects/Tunnelv0.000000001/index.html"}],"generated":{"html":"<!DOCTYPE html><html><head><title>Parcel Sandbox</title><meta charset=\"UTF-8\"></head><body> <div id=\"container\"></div> <script src=\"/1fdf421c05c1140f6d71444ea2b27638.js\"></script> </body></html>"},"sourceMaps":null,"error":null,"hash":"ffd19cf20529c8363d4dd48f8ffc1b90","cacheData":{}}

1
.cache/44/7797d5c4b4691390722d6c3b0532b4.json Normal file
View File

File diff suppressed because one or more lines are too long

1
.cache/45/518cc30499e9370b83556744c65c6c.json Normal file
View File

File diff suppressed because one or more lines are too long

1
.cache/4e/e40a16bc87fe267ab7661448341aa4.json Normal file
View File

File diff suppressed because one or more lines are too long

1
.cache/51/cd404c597d69c6d952ba962e44543e.json Normal file
View File

@@ -0,0 +1 @@
{"id":"AJno","dependencies":[{"name":"/Users/marco/codeProjects/gpt_widgets/public/tunnel/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"#define GLSLIFY 1\\nvarying vec2 vUv;\\nuniform float time;\\n\\nvoid main() {\\nvUv = uv;\\n\\ngl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\\n}\";"},"sourceMaps":{"js":{"mappings":[{"source":"src/shaders/vertex.glsl","name":"module","original":{"line":1,"column":0},"generated":{"line":1,"column":0}},{"source":"src/shaders/vertex.glsl","name":"exports","original":{"line":1,"column":7},"generated":{"line":1,"column":7}},{"source":"src/shaders/vertex.glsl","original":{"line":1,"column":15},"generated":{"line":1,"column":15}}],"sources":{"src/shaders/vertex.glsl":"module.exports=\"#define GLSLIFY 1\\nvarying vec2 vUv;\\nuniform float time;\\n\\nvoid main() {\\nvUv = uv;\\n\\ngl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\\n}\";"},"lineCount":null}},"error":null,"hash":"bc2d4e3d907e4b2c446e730423be72eb","cacheData":{"env":{}}}

1
.cache/81/1ac6fe464e60ffd06c4c125b283858.json Normal file
View File

@@ -0,0 +1 @@
{"id":"AJno","dependencies":[{"name":"/Users/marco/codeProjects/Tunnelv0.000000001/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"#define GLSLIFY 1\\nvarying vec2 vUv;\\nuniform float time;\\n\\nvoid main() {\\nvUv = uv;\\n\\ngl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\\n}\";"},"sourceMaps":{"js":{"mappings":[{"source":"src/shaders/vertex.glsl","name":"module","original":{"line":1,"column":0},"generated":{"line":1,"column":0}},{"source":"src/shaders/vertex.glsl","name":"exports","original":{"line":1,"column":7},"generated":{"line":1,"column":7}},{"source":"src/shaders/vertex.glsl","original":{"line":1,"column":15},"generated":{"line":1,"column":15}}],"sources":{"src/shaders/vertex.glsl":"module.exports=\"#define GLSLIFY 1\\nvarying vec2 vUv;\\nuniform float time;\\n\\nvoid main() {\\nvUv = uv;\\n\\ngl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\\n}\";"},"lineCount":null}},"error":null,"hash":"bc2d4e3d907e4b2c446e730423be72eb","cacheData":{"env":{}}}

1
.cache/85/7361dbef2adab4203708b017091403.json Normal file
View File

@@ -0,0 +1 @@
{"id":"maiY","dependencies":[{"name":"/Users/marco/codeProjects/Tunnelv0.000000001/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"#define GLSLIFY 1\\nvarying vec2 vUv;\\nuniform float time;\\nuniform sampler2D u_texture;\\n\\n// https://www.shadertoy.com/view/4djSRW\\nfloat hash12(vec2 p){\\n vec3 p3 = fract(vec3(p.xyx) * .1031);\\n p3 += dot(p3, p3.yzx + 33.33);\\n return fract((p3.x + p3.y) * p3.z);\\n}\\n\\nvoid main() {\\n vec2 uv = vUv;\\n\\n uv.x *= 3.142596;\\n\\n const float numbers = 9.0;\\n\\n vec2 repeat = vec2(30.0, 60.0);\\n\\n vec2 cell = (uv * repeat);\\n\\n cell.x *= numbers;\\n cell = floor(cell);\\n\\n float rand = 100.0 * hash12(cell);\\n\\n float offset = mod(floor(time + rand), numbers) / numbers;\\n uv = fract(uv * repeat);\\n uv.x = fract(uv.x + offset);\\n\\n vec4 color = texture2D(u_texture, uv);\\n\\n color -= 0.05 * vec4(vec3(rand), 1.0);\\n gl_FragColor = color;\\n}\";"},"sourceMaps":{"js":{"mappings":[{"source":"src/shaders/fragment.glsl","name":"module","original":{"line":1,"column":0},"generated":{"line":1,"column":0}},{"source":"src/shaders/fragment.glsl","name":"exports","original":{"line":1,"column":7},"generated":{"line":1,"column":7}},{"source":"src/shaders/fragment.glsl","original":{"line":1,"column":15},"generated":{"line":1,"column":15}}],"sources":{"src/shaders/fragment.glsl":"module.exports=\"#define GLSLIFY 1\\nvarying vec2 vUv;\\nuniform float time;\\nuniform sampler2D u_texture;\\n\\n// https://www.shadertoy.com/view/4djSRW\\nfloat hash12(vec2 p){\\n vec3 p3 = fract(vec3(p.xyx) * .1031);\\n p3 += dot(p3, p3.yzx + 33.33);\\n return fract((p3.x + p3.y) * p3.z);\\n}\\n\\nvoid main() {\\n vec2 uv = vUv;\\n\\n uv.x *= 3.142596;\\n\\n const float numbers = 9.0;\\n\\n vec2 repeat = vec2(30.0, 60.0);\\n\\n vec2 cell = (uv * repeat);\\n\\n cell.x *= numbers;\\n cell = floor(cell);\\n\\n float rand = 100.0 * hash12(cell);\\n\\n float offset = mod(floor(time + rand), numbers) / numbers;\\n uv = fract(uv * repeat);\\n uv.x = fract(uv.x + offset);\\n\\n vec4 color = texture2D(u_texture, uv);\\n\\n color -= 0.05 * vec4(vec3(rand), 1.0);\\n gl_FragColor = color;\\n}\";"},"lineCount":null}},"error":null,"hash":"53fea719669dee75b0f4128c0196c8ce","cacheData":{"env":{}}}

1
.cache/8b/6fa7ad041c257e93bf6b02acaacbf7.json Normal file
View File

@@ -0,0 +1 @@
{"id":"EU5I","dependencies":[{"name":"/Users/marco/codeProjects/gpt_widgets/public/tunnel/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"/114e48fffb508a9b96228bea25eb0527.png\";"},"sourceMaps":null,"error":null,"hash":"4a40dbb24057ba1b6e128bc08d1fd5ab","cacheData":{"env":{}}}

1
.cache/93/4f21b0891f916b1c3cdb7880940251.json Normal file
View File

@@ -0,0 +1 @@
{"id":"s8zH","dependencies":[{"name":"./src/index.js","dynamic":true,"resolved":"/Users/marco/codeProjects/gpt_widgets/public/tunnel/src/index.js","parent":"/Users/marco/codeProjects/gpt_widgets/public/tunnel/index.html"}],"generated":{"html":"<!DOCTYPE html><html><head><title>Parcel Sandbox</title><meta charset=\"UTF-8\"></head><body> <div id=\"container\"></div> <script src=\"/1fdf421c05c1140f6d71444ea2b27638.js\"></script> </body></html>"},"sourceMaps":null,"error":null,"hash":"ffd19cf20529c8363d4dd48f8ffc1b90","cacheData":{}}

1
.cache/94/5a0793e825d4d66c68c9a5342bb385.json Normal file
View File

File diff suppressed because one or more lines are too long

1
.cache/bf/8839a0621fbcb8c28b0aeb3ea13789.json Normal file
View File

@@ -0,0 +1 @@
{"id":"EU5I","dependencies":[{"name":"/Users/marco/codeProjects/Tunnelv0.000000001/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"/114e48fffb508a9b96228bea25eb0527.png\";"},"sourceMaps":null,"error":null,"hash":"4f12e11ad26624affe88e0ef5e16ed44","cacheData":{"env":{}}}

1
.cache/d8/05fbccfad2f1f4d561a68fb4cc1c99.json Normal file
View File

@@ -0,0 +1 @@
{"id":"D9Nj","dependencies":[{"name":"/Users/marco/codeProjects/gpt_widgets/public/tunnel/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"css":"body{background-color:#000;overflow:hidden}#container{width:100vw;height:100vh;position:fixed;top:0;left:0}","js":""},"sourceMaps":{"css":{"mappings":[{"source":"styles.css","name":null,"original":{"line":1,"column":0},"generated":{"line":1,"column":0}},{"source":"styles.css","name":null,"original":{"line":2,"column":2},"generated":{"line":1,"column":5}},{"source":"styles.css","name":null,"original":{"line":2,"column":27},"generated":{"line":1,"column":26}},{"source":"styles.css","name":null,"original":{"line":3,"column":2},"generated":{"line":1,"column":27}},{"source":"styles.css","name":null,"original":{"line":4,"column":0},"generated":{"line":1,"column":42}},{"source":"styles.css","name":null,"original":{"line":6,"column":0},"generated":{"line":1,"column":43}},{"source":"styles.css","name":null,"original":{"line":7,"column":2},"generated":{"line":1,"column":54}},{"source":"styles.css","name":null,"original":{"line":7,"column":14},"generated":{"line":1,"column":65}},{"source":"styles.css","name":null,"original":{"line":8,"column":2},"generated":{"line":1,"column":66}},{"source":"styles.css","name":null,"original":{"line":8,"column":15},"generated":{"line":1,"column":78}},{"source":"styles.css","name":null,"original":{"line":9,"column":2},"generated":{"line":1,"column":79}},{"source":"styles.css","name":null,"original":{"line":9,"column":17},"generated":{"line":1,"column":93}},{"source":"styles.css","name":null,"original":{"line":10,"column":2},"generated":{"line":1,"column":94}},{"source":"styles.css","name":null,"original":{"line":10,"column":8},"generated":{"line":1,"column":99}},{"source":"styles.css","name":null,"original":{"line":11,"column":2},"generated":{"line":1,"column":100}},{"source":"styles.css","name":null,"original":{"line":12,"column":0},"generated":{"line":1,"column":106}}],"sources":{"styles.css":"body {\n background-color: #000000;\n overflow: hidden;\n}\n\n#container {\n width: 100vw;\n height: 100vh;\n position: fixed;\n top: 0;\n left: 0;\n}\n"},"lineCount":null}},"error":null,"hash":"c955194d39ac31a63acc63e164a083d3","cacheData":{"env":{}}}

1
.cache/ee/ba31e409e79f3f47fee1eeb71f3d6e.json Normal file
View File

@@ -0,0 +1 @@
{"id":"maiY","dependencies":[{"name":"/Users/marco/codeProjects/gpt_widgets/public/tunnel/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"#define GLSLIFY 1\\nvarying vec2 vUv;\\nuniform float time;\\nuniform sampler2D u_texture;\\n\\n// https://www.shadertoy.com/view/4djSRW\\nfloat hash12(vec2 p){\\n vec3 p3 = fract(vec3(p.xyx) * .1031);\\n p3 += dot(p3, p3.yzx + 33.33);\\n return fract((p3.x + p3.y) * p3.z);\\n}\\n\\nvoid main() {\\n vec2 uv = vUv;\\n\\n uv.x *= 3.142596;\\n\\n const float numbers = 9.0;\\n\\n vec2 repeat = vec2(6.0, 12.0);\\n\\n vec2 cell = (uv * repeat);\\n\\n cell.x *= numbers;\\n cell = floor(cell);\\n\\n float rand = 100.0 * hash12(cell);\\n\\n float offset = mod(floor(time + rand), numbers) / numbers;\\n uv = fract(uv * repeat);\\n uv.x = fract(uv.x + offset);\\n\\n vec4 color = texture2D(u_texture, uv);\\n\\n color -= 0.05 * vec4(vec3(rand), 1.0);\\n gl_FragColor = color;\\n}\";"},"sourceMaps":{"js":{"mappings":[{"source":"src/shaders/fragment.glsl","name":"module","original":{"line":1,"column":0},"generated":{"line":1,"column":0}},{"source":"src/shaders/fragment.glsl","name":"exports","original":{"line":1,"column":7},"generated":{"line":1,"column":7}},{"source":"src/shaders/fragment.glsl","original":{"line":1,"column":15},"generated":{"line":1,"column":15}}],"sources":{"src/shaders/fragment.glsl":"module.exports=\"#define GLSLIFY 1\\nvarying vec2 vUv;\\nuniform float time;\\nuniform sampler2D u_texture;\\n\\n// https://www.shadertoy.com/view/4djSRW\\nfloat hash12(vec2 p){\\n vec3 p3 = fract(vec3(p.xyx) * .1031);\\n p3 += dot(p3, p3.yzx + 33.33);\\n return fract((p3.x + p3.y) * p3.z);\\n}\\n\\nvoid main() {\\n vec2 uv = vUv;\\n\\n uv.x *= 3.142596;\\n\\n const float numbers = 9.0;\\n\\n vec2 repeat = vec2(6.0, 12.0);\\n\\n vec2 cell = (uv * repeat);\\n\\n cell.x *= numbers;\\n cell = floor(cell);\\n\\n float rand = 100.0 * hash12(cell);\\n\\n float offset = mod(floor(time + rand), numbers) / numbers;\\n uv = fract(uv * repeat);\\n uv.x = fract(uv.x + offset);\\n\\n vec4 color = texture2D(u_texture, uv);\\n\\n color -= 0.05 * vec4(vec3(rand), 1.0);\\n gl_FragColor = color;\\n}\";"},"lineCount":null}},"error":null,"hash":"f9c4cf33cb0be08e4858362d913aa2dc","cacheData":{"env":{}}}

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
/node_modules/

BIN
dist/.DS_Store vendored Normal file
View File

Binary file not shown.

15
index.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="container"></div>
<script src="./src/index.js"></script>
</body>
</html>

9124
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

24
package.json Normal file
View File

@@ -0,0 +1,24 @@
{
"name": "digit-tunnel",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"start": "parcel index.html --open",
"build": "parcel build index.html"
},
"dependencies": {
"parcel-bundler": "^1.6.1",
"three": "0.142.0"
},
"devDependencies": {
"@babel/core": "7.2.0",
"glslify-bundle": "^5.1.1",
"glslify-deps": "^1.3.2",
"typescript": "4.4.4"
},
"resolutions": {
"@babel/preset-env": "7.13.8"
},
"keywords": []
}

BIN
src/.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
src/123.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

BIN
src/1234.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

161
src/index.js Normal file
View File

@@ -0,0 +1,161 @@
// inspiration from Etienne Jacob
// https://www.thisiscolossal.com/wp-content/uploads/2018/12/agifcolossaltd2opt.gif
import "./styles.css";
import * as THREE from "three";
// import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import vertex from "./shaders/vertex.glsl";
import fragment from "./shaders/fragment.glsl";
import txt from "./123.png";
let timer = 0;
let mouseIsDown = false;
export default class Sketch {
constructor(options) {
this.clock = new THREE.Clock();
this.time = 0;
this.container = options.domElement;
this.height = this.container.offsetHeight;
this.width = this.container.offsetWidth;
this.camera = new THREE.PerspectiveCamera(
75,
this.width / this.height,
0.1,
1000
);
this.camera.position.set(0, 0, 10);
this.scene = new THREE.Scene();
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.setPixelRatio(window.devicePixelRatio * 2);
this.container.appendChild(this.renderer.domElement);
// this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.normal = new THREE.Vector3();
this.binormal = new THREE.Vector3();
this.resize();
this.addObjects();
this.render();
this.setUpResize();
}
addObjects() {
const texture = new THREE.TextureLoader().load(txt, (texture) => {
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;
});
this.material = new THREE.ShaderMaterial({
side: THREE.DoubleSide,
// transparent:true,
// wireframe: true,
uniforms: {
time: { type: "f", value: 0 },
uResolution: { type: "v4", value: new THREE.Vector4() },
u_texture: { type: "t", value: texture }
},
vertexShader: vertex,
fragmentShader: fragment
});
class CustomSinCurve extends THREE.Curve {
constructor(scale = 1) {
super();
this.scale = scale;
}
getPoint(t, optionalTarget = new THREE.Vector3()) {
const tx = Math.cos(2 * Math.PI * t);
const ty = Math.sin(2 * Math.PI * t);
const tz = 0.1 * Math.sin(8 * Math.PI * t);
return optionalTarget.set(tx, ty, tz).multiplyScalar(this.scale);
}
}
const path = new CustomSinCurve(10);
this.geometry = new THREE.TubeGeometry(path, 200, 0.5, 20, false);
this.mesh = new THREE.Mesh(this.geometry, this.material);
this.scene.add(this.mesh);
}
render() {
this.time = timer;
// https://threejs.org/examples/webgl_geometry_extrude_splines.html
let looptime = 10 * 1000;
let t = (this.time % looptime) / looptime;
let pos = this.geometry.parameters.path.getPointAt(t);
let segments = this.geometry.tangents.length;
let pickt = t * segments;
let pick = Math.floor(pickt);
let pickNext = (pick + 1) % segments;
this.binormal.subVectors(
this.geometry.binormals[pickNext],
this.geometry.binormals[pick]
);
this.binormal
.multiplyScalar(pickt - pick)
.add(this.geometry.binormals[pick]);
let dir = this.geometry.parameters.path.getTangentAt(t);
let offset = 0;
this.normal.copy(this.binormal).cross(dir);
pos.add(this.normal.clone().multiplyScalar(offset));
this.camera.position.copy(pos);
let lookAt = this.geometry.parameters.path.getPointAt(
(t + 1 / this.geometry.parameters.path.getLength()) % 1
);
this.camera.matrix.lookAt(this.camera.position, lookAt, this.normal);
this.camera.rotation.setFromRotationMatrix(
this.camera.matrix,
this.camera.rotation.order
);
this.material.uniforms.time.value = this.clock.getElapsedTime();
requestAnimationFrame(this.render.bind(this));
this.renderer.render(this.scene, this.camera);
}
resize() {
this.width = this.container.offsetWidth;
this.height = this.container.offsetHeight;
this.renderer.setSize(this.width, this.height);
this.camera.aspect = this.width / this.height;
this.camera.updateProjectionMatrix();
}
setUpResize() {
window.addEventListener("resize", this.resize.bind(this));
}
}
new Sketch({
domElement: document.getElementById("container")
});
window.addEventListener("mousedown", function (e) {
mouseIsDown = true;
});
window.addEventListener("mouseup", function (e) {
mouseIsDown = false;
});
window.addEventListener("mousemove", function (e) {
if (mouseIsDown) {
timer += ((e.clientY / window.innerHeight) * 2 - 1) * 10;
}
if (timer <= 0) {
timer = 0;
}
});
setInterval(() => {
timer += 1
}, 10)

36
src/shaders/fragment.glsl Normal file
View File

@@ -0,0 +1,36 @@
varying vec2 vUv;
uniform float time;
uniform sampler2D u_texture;
// https://www.shadertoy.com/view/4djSRW
float hash12(vec2 p){
vec3 p3 = fract(vec3(p.xyx) * .1031);
p3 += dot(p3, p3.yzx + 33.33);
return fract((p3.x + p3.y) * p3.z);
}
void main() {
vec2 uv = vUv;
uv.x *= 3.142596;
const float numbers = 9.0;
vec2 repeat = vec2(6.0, 12.0);
vec2 cell = (uv * repeat);
cell.x *= numbers;
cell = floor(cell);
float rand = 100.0 * hash12(cell);
float offset = mod(floor(time + rand), numbers) / numbers;
uv = fract(uv * repeat);
uv.x = fract(uv.x + offset);
vec4 color = texture2D(u_texture, uv);
color -= 0.05 * vec4(vec3(rand), 1.0);
gl_FragColor = color;
}

9
src/shaders/vertex.glsl Normal file
View File

@@ -0,0 +1,9 @@
varying vec2 vUv;
uniform float time;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

12
src/styles.css Normal file
View File

@@ -0,0 +1,12 @@
body {
background-color: #000000;
overflow: hidden;
}
#container {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}

BIN
thumbnail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB