tunnel demo

.cache/04/edfeab6adcb15a63bbc205328f007c.json

@@ -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":{}}}

.cache/14/ec564e7c2591529f15bea45736704c.json

@@ -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":{}}

.cache/51/cd404c597d69c6d952ba962e44543e.json

@@ -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":{}}}

.cache/81/1ac6fe464e60ffd06c4c125b283858.json

@@ -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":{}}}

.cache/85/7361dbef2adab4203708b017091403.json

@@ -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":{}}}

.cache/8b/6fa7ad041c257e93bf6b02acaacbf7.json

@@ -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":{}}}

.cache/93/4f21b0891f916b1c3cdb7880940251.json

@@ -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":{}}

.cache/bf/8839a0621fbcb8c28b0aeb3ea13789.json

@@ -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":{}}}

.cache/d8/05fbccfad2f1f4d561a68fb4cc1c99.json

@@ -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":{}}}

.cache/ee/ba31e409e79f3f47fee1eeb71f3d6e.json

@@ -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":{}}}

.gitignore

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

index.html

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

package.json

@@ -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": []
+}

src/index.js

@@ -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)

src/shaders/fragment.glsl

@@ -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;
+}

src/shaders/vertex.glsl

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

src/styles.css

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