regl Example Gallery
Filter Tags
basic.js
This example is a simple demonstration of how to use regl to draw a triangle.
Tags: basic
batch.js
This example demonstrates how to use batch mode commands
To use a command in batch mode, we pass in an array of objects. Then the command is executed once for each object in the array.
Tags: basic
bunny.js
This example shows how to draw a mesh with regl
Tags: basic
camera.js
This example shows how to implement a movable camera with regl.
Tags: basic
cube.js
This examples renders a spinning textured cube.
Tags: basic
dynamic.js
This example shows how to pass props to draw commands
Tags: basic
elements.js
This example demonstrates how you can use `elements` to draw lines.
Tags: basic, lines
feedback.js
This example shows how to use copyTexImage2D to implement feedback effects
Tags: basic
instance-mesh.js
In this example, it is shown how you can draw a bunch of bunny meshes using the instancing feature of regl.
Tags: instancing, basic
instance-triangle.js
In this example, it is shown how you can draw a bunch of triangles using the instancing feature of regl.
Tags: instancing, basic
life.js
This example implements the game of life in regl.
Tags: fbo, basic
lighting.js
This example shows how you can apply multiple light sources to a model
Tags: basic, lighting
line-primitives.js
This example demonstrates how to draw line loops and line strips .
Tags: basic, lines
microphone.js
This example shows how to create a simple audio visualization, using your microphone as input.
Tags: audio, basic, lines
minecraft.js
This example shows how you can implement a simple Minecraft renderer in regl.
Tags: basic
mipmap.js
This example shows how you can use mipmaps in regl.
Tags: basic
particles.js
This example show how you can render point particles in regl
Tags: basic
pong.js
In this example, we implement a simple pong game.
The demonstratred features are: batching, and how you can implement a game loop with regl.
Note that the ball will probably go through the paddles once it goes really fast. So the game could be a lot more stable. But in order to keep the example short and readable, we have refrained from fixing this.
Tags: basic, game
scope.js
This examples demonstrates scopes
Tags: basic
stats.js
This example demonstrates the regl-stats-widget, which provides a visual representation of the total GPU-time of draw-calls
Tags: basic
text.js
This example shows how you can draw vectorized text in regl.
Tags: basic
texture.js
This example shows how you can load and draw a texture in regl
Tags: basic
theta360.js
This example shows how to render a 360 panoramic environment map.
Tags: basic
tile.js
This example implements a simple 2D tiled sprite renderer.
Tags: basic
video.js
This example shows how to overlay a chroma keyed video over a background rendered by regl.
Tags: basic, video
audio.js
This example shows how to implement an audio visualization, using an mp3-file as input.
Tags: audio, advanced
blur.js
This examples demonstrates how we can render a height map, how to place out several models(using the batching feature), and how to implement a simple fullscreen post-process effect(using the framebuffer feature) in regl.
The post-process effect is a simple box filter blur.
Tags: advanced, fbo
cloth.js
In this example, we use the mass-spring model described by Thomas Jakobsen to implement a simple cloth simulation. It is also demonstrated how we can manage a dynamic mesh in regl.
You can read more about cloth simulation here and here
Tags: physics, advanced
cube-fbo.js
This example shows how you can render reflections using cubic framebuffers.
Tags: advanced, fbo
dds.js
This example shows how you can parse dds files with resl.
Tags: advanced
deferred_shading.js
This example is a simple implementation of deferred shading.
The focus of this implementation was readability, so it is not an optimized implementation, and can certainly be made more efficient. (by for instance getting rid of the "position" render target. It can be computed from the depth buffer. )
This example demonstrates the usage of Multiple-render targets in regl.
Tags: advanced, fbo, lighting, mrt
envmap.js
This example shows how you can render reflections with an environment map.
Tags: advanced
geomorph.js
No description
Tags: advanced
graph.js
No description.
Tags: gpgpu, advanced
implicit-surface.js
Implicit surface raytracing demo. Many ideas and pieces of code taken from here and here
Tags: advanced
line.js
This example demonstrates rendering screen space projected lines from a technique described here.
This technique requires each vertex to reference the previous and next vertex in the line; this example utilizes attribute byte offsets to share a single position buffer for all three of these attributes.
Tags: advanced
metaball.js
Metaball rendering demo. Many ideas and code taken from here
Tags: advanced
physics.js
In this example, it is shown how you can integrate ammo.js into regl, and use it to create a simple physics simulation. By clicking, you are able to shoot balls at the wall.
Tags: advanced, physics
planar-reflection.js
This example shows how you can render planar reflections using the stencil buffer
We are using the algorithm described here
To render the reflections, we mirror all the meshes on the y-axis, and then render them, and then we render the floor with alpha blending over them. However, we use the stencil buffer to make sure that the mirrored objects are only visible in the reflecting white tiles. If we did not use the stencil buffer, we would be able to see the mirrored meshes under the floor, which is weird.
Tags: stencil, advanced
point-light-shadow.js
This example shows how you can render shadows for point-lights using `regl.framebufferCube`
You can read more about shadows for point-lights here and here
Tags: shadows, fbo, advanced
raycast.js
In this demo, it is shown how to implement 3D object picking. If you click on an object, an outline is drawn around it.
Tags: advanced
reduction.js
This example implements a parallell reduction algorithm on the GPU.
Given some elements x0, x1, x2,..., and a binary operator 'op', the parallell reduction becomes 'op(x0, op(x1, op(x2,...) ))'. For example, given the elements 4, 2, 4, 1, and the operator '+', the parallell reduction will be 11, which is just the sum of the elements.
Tags: gpgpu, fbo
shadow_map.js
This example shows how you can render a shadow map for a directional light source in regl.
Tags: shadows, fbo, advanced
shadow-volume.js
This example shows how to implement shadow volumes.
This implementation was based on Mikola Lysneko's implementation here. But note that it has been cleaned up a lot, many comments have been added, and some bugs have been fixed.
You can read more about shadow volumes here and here
Tags: shadows, stencil, advanced
sprites.js
This example shows how to update and render some simple particles on the GPU, creating a simple particle simulation.
Tags: advanced, fbo
stencil-transition.js
This example implements a blocky, dissolve transition effect, that transitions between two 3D models. It uses the stencil buffer to achieve this.
Tags: stencil, advanced