ogl-typescript

import { Renderer, Camera, Transform, Program, Geometry, Mesh } from 'ogl-typescript'; // 1. Setup Renderer const renderer = new Renderer({ canvas: document.createElement('canvas'), width: window.innerWidth, height: window.innerHeight, dpr: Math.min(window.devicePixelRatio, 2), }); document.body.appendChild(renderer.canvas); // 2. Setup Camera const camera = new Camera({ fov: 45 }); camera.position.set(0, 0, 5); camera.lookAt([0, 0, 0]); // 3. Create a Scene (as a Transform) to hold objects const scene = new Transform(); // 4. Create Geometry (a simple plane) const geometry = new Geometry(renderer.gl, { position: { size: 3, data: new Float32Array([ -1, 1, 0, // Top-left -1, -1, 0, // Bottom-left 1, -1, 0, // Bottom-right 1, 1, 0, // Top-right ]), }, uv: { size: 2, data: new Float32Array([ 0, 1, 0, 0, 1, 0, 1, 1, ]), }, index: { data: new Uint16Array([ 0, 1, 2, 0, 2, 3, ]), }, }); // 5. Create a basic Program (shader) to define material properties const program = new Program(renderer.gl, { vertex: /* glsl */ ` attribute vec3 position; attribute vec2 uv; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragment: /* glsl */ ` precision highp float; varying vec2 vUv; void main() { gl_FragColor = vec4(vUv.x, vUv.y, 0.5, 1.0); } `, }); // 6. Create a Mesh by combining geometry and program, then add to scene const mesh = new Mesh(renderer.gl, { geometry, program }); mesh.setParent(scene); // 7. Render Loop for animation function update() { requestAnimationFrame(update); // Rotate the mesh for visual interest mesh.rotation.y -= 0.005; mesh.rotation.x -= 0.003; renderer.render({ scene, camera }); } requestAnimationFrame(update); // Basic resize handling to keep aspect ratio correct window.addEventListener('resize', () => { renderer.setSize(window.innerWidth, window.innerHeight); camera.perspective({ aspect: window.innerWidth / window.innerHeight }); });