hello-regl

100%

✓ Published0🌍 Public

Last edited May 8, 2017

Created on May 8, 2017

A rotating, three-dimensional bunny model is rendered in real time using WebGL. The visualization demonstrates how vertex normals, computed from the bunny's triangular mesh via `angleNormals`, define surface colors, mapping each normal vector to an RGB value. The scene uses a `regl-camera` setup for orbital control and a red background, with the `bunny` package providing the model geometry. The example serves as a minimal introduction to setting up a `regl` rendering pipeline with shaders.

AI-generated description

Set up (from http://rickyreusser.com/2016/12/07/from-nothing-to-something-in-webgl/):

yarn init -y
yarn add angle-normals browserify budo bunny indexhtmlify regl regl-camera

Add to package.json

"scripts": {
  "start": "budo index.js --open --live --host localhost",
  "build": "browserify index.js | indexhtmlify > index.html"
},

Run yarn run start to dev, yarn run build to generate a build index.html.

yarn run hmr-start almost works - not sure how to structure the regl code inside of ud.

ISC Licensed

Similar vizzes

Loading thumbnail…

regl-demo

A WebGL triangle rendered with regl animates its background color in a smooth, time-based loop. The vertex shader derives the triangle’s fragment color from its position attributes, producing a gradient across the shape. The example uses `regl.frame` for continuous rendering and `regl.clear` to update the background, demonstrating basic GLSL shader setup and attribute passing with the regl API.

11wheel

69% match

Loading thumbnail…

regl-ladder-2

A cluster of 100,000 colored points animates across the screen, moving in a repeating wave pattern with a sinusoidal x-shift and vertical bobbing. The visualization demonstrates a performance optimization in regl, a WebGL library: passing all point attributes (position, color, speed) as a single packed array per frame outperforms passing separate attribute arrays, enabling 60 fps versus the slower alternative. Using regl’s shader system and GPU buffers, the code animates points via a cubic easing function, with colors alternating between blue and orange based on parity. The data is generated procedurally, with random x, y, and speed values for each point.

11wheel

65% match

Loading thumbnail…

regl-hot-server

A dense cluster of 100,000 points animates through looping random walks, with colors transitioning along the viridis colormap. The visualization cycles between five precomputed datasets, interpolating point positions in a WebGL vertex shader. Built with regl and React, it demonstrates a hot-reloading workflow where editing `script.js` updates the page without a full reload, using hot-server and watchify to stream changes directly to the browser.

11wheel

64% match

Loading thumbnail…

regl-circles

Twenty thousand colored circles fall from the top of the viewport, then settle into horizontal bands based on each circle's speed and size. Two quantized scales map circle index to a target row, and a WebGL shader renders each point with a soft-edged stroke and rounded fill. The animation cycles continuously via a REGL frame loop, with position and color computed per frame in the vertex and fragment shaders using D3 scales and lodash for data shuffling.

11wheel

63% match

Loading thumbnail…

regl-hurricane

Animated WebGL visualization of 10,000 line segments that continuously morph between different geometric patterns—a circle, then two distinct random point distributions. The code uses the regl framework with custom GLSL vertex and fragment shaders to interpolate between precomputed buffer states, cycling through three datasets in a loop. Line color shifts from blue to red based on each segment's position index, while d3 generates the underlying point data and easing functions control the smooth transitions.

11wheel

62% match

Loading thumbnail…

threejs-sphere

A red Three.js sphere moves downward in an animated WebGL scene, with repeatedly spawned random point lights flashing around it. The sphere’s position is updated each frame based on elapsed time, creating a falling arc, while new white lights appear at random locations, producing flickering illumination on the sphere’s Lambert-shaded surface. The example demonstrates basic Three.js scene setup, mesh creation, lighting, and requestAnimationFrame-driven rendering.

11wheel

59% match

Loading thumbnail…

three-vrm example

A 3D VRM avatar performs motion capture animation synced to a live webcam feed. The webcam video and PoseNet-detected keypoints are drawn onto a 2D overlay canvas, while the estimated pose data drives the avatar’s joint rotations in a Three.js WebGL scene with GridHelper and AxesHelper. The code uses TensorFlow.js PoseNet, THREE.VRM, GLTFLoader, and OrbitControls, rendering the avatar from a local .vrm model.

HHirosaji

59% match

Loading thumbnail…

three.js webgl - morph targets - horse

A three-dimensional horse model with animated morph targets rotates in a circular path around its center. The scene uses Three.js with the GLTFLoader to load a Horse.glb model, and an AnimationMixer plays its built-in clip. Two directional lights illuminate the mesh, which is scaled and set against a light gray background. The camera orbits continuously while the animation updates each frame, demonstrating WebGL rendering.

CCurran Kelleher

59% match