Introducing Threeify!

Threeify is a modern and fast 3D Typescript library.

Examples

Clear Coat Specular BRDF

A test of a clear coat GGX specular lobe BRDF with separate a distinct normal map layered on top of a standard GGX specular BRDF.

Try example...
Lambertian Diffuse BRDF

A test of the Lambertian diffuse BRDF in isolation.

Try example...
Sheen BRDF

A test of a Charlie-based Sheen BRDF. Sheen is useful rendering realistic cloth.

Try example...
GGX Specular BRDF

A test of the GGX specular BRDF layered on top of the Lambertian diffuse BRDF.

Try example...
GGX Specular Anisotropic BRDF

A test of the GGX specular BRDF modified via a bend normal to simulate anisotropy layered on top of the Lambertian diffuse BRDF. Anisotropy is specified via a flow map.

Try example...
Cube Map Texture

A bare-bones test of loading and rendering with a cubemap texture directly.

Try example...
High Dynamic Range Texture

Loading Radiance HDR (encoded as RGBE) and then storing it in RGBD format. The RGBD data is decoded to linear for rendering and then sRGB corrected when written to the output.

Try example...
Cube Map from Equirectangular Map

This loads a latlong map (AKA lat-long map) and renders it to the faces of a cube map.

Try example...
Cube Map LOD Roughness

A test of explicitly setting the cube map LOD to simulate reflections with varying surface roughness. Requires the ext_shader_texture_lod extension.

Try example...
Cube Map Manual Mipmap Textures

Load manually generated mipmaps into the cubemap.

Try example...
Render to Cube Map Textures

Rendering to the faces of a cube map on each frame.

Try example...
Animated Uniforms

A simple test of animated uniforms.

Try example...
Interleaved Geometry

A test of interleaving and rendering arbitrary geometry. Interleaved geometry can be more efficient for GPUs to render because all data for one vertex is collocated.

Try example...
Cube Diffuse

A bare-bones test of lighting a cube geometry directly.

Try example...
Orthographic Camera

A test of using an orthographic camera to render.

Try example...
Drawing A Triangle

A bare-bones test of drawing geometry directly.

Try example...
Device Orientation

Click once on the screen to active. The cube moves based on your devices orientation.

Try example...
Layered Compositor

A layered renderer which takes a set of layers and renders them back to front.

Try example...
Directional Light

A directional light is represented by a direction and an irradiance

Try example...
Multiple Punctual Lights

Multiple punctual lights are used: spot, point and directional.

Try example...
Point Light

A point light has an intensity-color, a position and range.

Try example...
Spot Light

Similar to a point light but has a direction and an inner and outer cone angle for the falloff. (TODO: Add units.)

Try example...
Blend States & Premultiplied Alpha

Columns are blend states, rows are premultipled alpha.

Try example...
Material Output Channels

Demonstrates the ability to select the output channel of the material shader. Cycles between beauty, albedo, roughness, metalness, occlusion, emissive, normal, depth, ambient, diffuse and specular.

Try example...
Height Map Microgeometry

A height map is used to simulate microgeometry that is not represented in the mesh. When the height map only affects lighting, but not geometry, it is called bump mapping. This is a box sphere where the height map adds the brick shapes.

Try example...
Height Map-based Displacement

A height map is used to displace the positions of the mesh in the normal direction in an animated fashion. A normal map is also blended in and out in time to simulation a morphing effect.

Try example...
Normal Map Microgeometry

A normal map is used to simulate microgeometry that is not represented in the mesh. This is a smooth sphere where the normal map adds the golf ball dimples.

Try example...
Normal Map Microgeometry Reference

Try example...
Lambertian PMREM Generation

This takes as input an latlong image (AKA lat-long image), converts it to a cubemap and then as a background without converting it to a cubemap.

Try example...
Equirectangular Background Pass

Uses a latlong image (AKA lat-long image) as a background without converting it to a cubemap.

Try example...
Textures

A simple test of rendering a texture.

Try example...
Canvas Texture

Redrawing a canvas into a texture every frame.

Try example...
Depth Texture

A simple test of rendering to a depth texture framebuffer attachment and then accessing that texture (as an albedo map on geometry which is then rendered to screen.)

Try example...
Render to Texture

A simple test of rendering to a texture, and then using that texture as an albedo map on another geometry and writing that to screen.

Try example...
SVG Textures

A simple test of rendering an svg file as texture.

Try example...
Getting Started - Video Texture

Rendering a playing video into a texture.

Try example...
GLSL Unit Test Runner

Runs all the glsl unit tests.

Try example...
Threeify on Github