feat: some shit

src/content/projects/plantarium/_components/leaves.ts

@@ -0,0 +1,88 @@
+import { Camera, Color, Geometry, GLTFLoader, Mesh, Program, Renderer, Transform } from 'ogl';
+import { rand, randMinMax } from "./random";
+
+import fragment from "./Leaf.frag";
+import vertex from "./Leaf.vert";
+import { rgbToHex } from '@helpers/colors';
+
+let rotation = 0;
+
+export function setRotation(r: number) {
+  rotation = r;
+}
+
+export function createLeaves({ canvas, num = 20, alpha = false, minZ = -1, maxZ = 1 }: { canvas: HTMLCanvasElement, num?: number, alpha?: boolean, minZ?: number, maxZ?: number }) {
+
+
+  const renderer = new Renderer({ dpr: 1, canvas, alpha: true });
+  const gl = renderer.gl;
+
+  const background = window.getComputedStyle(document.body);
+  const d = new Color(rgbToHex(background.backgroundColor));
+
+  const camera = new Camera(gl, { fov: 15 });
+  camera.position.z = 5;
+
+  function resize() {
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    camera.perspective({ aspect: gl.canvas.width / gl.canvas.height });
+  }
+  window.addEventListener('resize', resize, false);
+  resize();
+
+  const scene = new Transform();
+
+  const program = new Program(gl, {
+    vertex,
+    fragment,
+    cullFace: gl.NONE,
+    depthTest: true,
+    uniforms: {
+      uTime: { value: 0 },
+      uRot: { value: 0 },
+      uBackground: { value: d },
+    },
+  });
+
+  let mesh: Mesh;
+  loadModel();
+  async function loadModel() {
+
+    const model = await GLTFLoader.load(gl, "/models/leaf.glb");
+
+    const data = model.nodes[0].children[0].geometry.attributes;
+
+    let offset = new Float32Array(num * 3);
+    let random = new Float32Array(num * 3);
+    for (let i = 0; i < num; i++) {
+      offset.set([rand(8), rand(4), randMinMax(minZ, maxZ)], i * 3);
+
+      // unique random values are always handy for instances.
+      // Here they will be used for rotation, scale and movement.
+      random.set([Math.random(), Math.random(), Math.random()], i * 3);
+    }
+
+    const geometry = new Geometry(gl, {
+      ...data,
+
+      // simply add the 'instanced' property to flag as an instanced attribute.
+      // set the value as the divisor number
+      offset: { instanced: 1, size: 3, data: offset },
+      random: { instanced: 1, size: 3, data: random },
+    });
+
+    mesh = new Mesh(gl, { geometry, program });
+    mesh.scale.set(0.2, 0.2, 0.2)
+    mesh.setParent(scene);
+  }
+
+  requestAnimationFrame(update);
+  function update(t: number) {
+    requestAnimationFrame(update);
+
+    program.uniforms.uTime.value = t * 0.001;
+    program.uniforms.uRot.value = rotation;
+    renderer.render({ scene, camera });
+  }
+
+}