# Radiance > Lightweight, reactive WebGL library A toolkit for building shader-driven experiences. You can find below three groups of links: 1. User guides to get started with the library and learn how to use it (starting from "### Introduction") 2. Code samples for different use cases (starting from "### Basics") 3. Documentation of the API: functions, types etc (starting from "### Core") ## Table of Contents ### Introduction - [Why this lib?](/guide/introduction/why-this-lib.md) - [Getting Started](/guide/introduction/getting-started.md) - [Recommended Tooling](/guide/introduction/recommended-tooling.md) ### Essentials - [Update uniforms at runtime](/guide/essentials/update-uniforms.md) - [Choose when to render](/guide/essentials/render-modes.md) - [Handle resize and device pixel ratio](/guide/essentials/resize-and-dpr.md) - [Draw custom geometry](/guide/essentials/draw-geometry.md) - [Draw many copies with instancing](/guide/essentials/instancing.md) - [Sample images, videos and data](/guide/essentials/load-textures.md) - [React to pointer events](/guide/essentials/pointer-events.md) ### Post-processing - [Write a custom post-processing effect](/guide/post-processing/custom-effect.md) - [Chain and order post effects](/guide/post-processing/effect-chain.md) - [Tone map the output](/guide/post-processing/tone-map-the-output.md) ### GPU Simulations - [Run a simulation with ping-pong framebuffers](/guide/gpgpu/ping-pong-simulations.md) - [Capture vertex output with transform feedback](/guide/gpgpu/transform-feedback.md) ### Advanced Usage - [Mount and unmount in a UI framework](/guide/advanced/mount-in-a-ui-framework.md) - [Render in a worker with OffscreenCanvas](/guide/advanced/offscreen-worker.md) ### Troubleshooting - [Debug shader compilation errors](/guide/troubleshooting/debug-shader-errors.md) - [Fix a black or frozen canvas](/guide/troubleshooting/fix-a-black-canvas.md) ### Concepts - [About reactive rendering](/guide/concepts/reactive-rendering.md) - [About the rendering pipeline](/guide/concepts/rendering-pipeline.md) - [About GPU computation](/guide/concepts/gpgpu.md) - [About color management](/guide/concepts/color-management.md) - [About performance](/guide/concepts/performance.md) ### Reference - [Shader conventions](/guide/reference/shader-conventions.md) - [Uniform values and sources](/guide/reference/uniform-sources.md) - [Built-in effects](/guide/reference/built-in-effects.md) ### Basics - [Drawing modes](/examples/basics/drawing-modes.md): Compare WebGL drawing modes by rendering the same geometry with different primitive types. - [Full screen canvas](/examples/basics/full-screen.md): Draw a full-screen shader and use the built-in UV and time uniforms for simple animation. - [Indices](/examples/basics/indices.md): Draw indexed geometry by reusing vertex data through an index buffer. - [Instancing](/examples/basics/instancing.md): Draw a field of spinning cubes scattered in 3D in a single draw call with per-instance attributes. - [Particles](/examples/basics/particles.md): Render an animated particle galaxy with custom vertex attributes, point sprites, and additive blending. - [Play / Pause](/examples/basics/play-pause.md): Start and stop rendering with a button to control an animation loop. - [Resize](/examples/basics/resize.md): Keep a shader responsive to canvas resizing with the automatically updated resolution uniform. - [Uniforms](/examples/basics/uniforms.md): Bind UI controls to shader uniforms and trigger re-renders as values change. ### Interactions - [Pointer coordinates](/examples/interactions/pointer.md): Track pointer events and feed normalized cursor coordinates into shader uniforms. ### Post-processing (built-in) - [Bloom](/examples/post-processing-builtin/bloom.md): Combine the built-in bloom and tone-mapping effects to add glow and exposure control. - [Dither](/examples/post-processing-builtin/dither.md): Reduce a lit blue sphere to a small color palette with the built-in dither post-processing effect. - [FXAA](/examples/post-processing-builtin/fxaa.md): Compare a raw render with the built-in fast approximate anti-aliasing effect using a split-screen scissor test. - [Noise](/examples/post-processing-builtin/noise.md): Add animated procedural noise to a rendered image with the built-in noise post-processing effect. - [Pixelate](/examples/post-processing-builtin/pixelate.md): Snap a render to chunky square blocks with the built-in pixelate post-processing effect. - [Trails](/examples/post-processing-builtin/trails.md): Add persistent motion trails to animated particles with the built-in trails post-processing effect. ### Post-processing (custom) - [Multi pass](/examples/post-processing/multi-pass.md): Chain multiple effect passes together to build a configurable bloom-style post-processing pipeline. - [Single pass](/examples/post-processing/single-pass.md): Apply a single post-processing effect pass with a tweakable sepia filter. ### Gpgpu - [Particles](/examples/gpgpu/particles.md): Update particle positions on the GPU with a ping-pong framebuffer simulation and render them as points. - [Boids](/examples/gpgpu/boids.md): Simulate flocking boids on the GPU with ping-pong framebuffers and interactive behavior controls. - [Game of Life](/examples/gpgpu/game-of-life.md): Run Conway's Game of Life entirely on the GPU and display the evolving cell state texture. - [Maths](/examples/gpgpu/maths.md) ### Textures - [Canvas 2D](/examples/textures/canvas2d.md): Draw content in a 2D canvas and reuse it as a texture in a WebGL scene. - [Data](/examples/textures/data.md): Render a texture from raw pixel data and inspect how each texel maps onto the canvas. - [Image](/examples/textures/image.md): Load an image texture asynchronously and swap it in after rendering an initial placeholder texture. - [Video](/examples/textures/video.md): Use an HTML video as a live texture and sample its frames directly in a fragment shader. ### Use Cases - [Ray Tracing](/examples/use cases/ray tracing.md): A basic ray tracing example implemented in GLSL. ### Libraries - [Motion](/examples/libraries/motion.md): Animate uniforms using the Motion library. ### Core #### Attribute - [setAttribute()](/api/core/attribute/functions/setAttribute.md) #### Program - [createProgram()](/api/core/program/functions/createProgram.md) #### Render Target - [createRenderTarget()](/api/core/renderTarget/functions/createRenderTarget.md) - [setRenderTarget()](/api/core/renderTarget/functions/setRenderTarget.md) - [RenderTarget](/api/core/renderTarget/type-aliases/RenderTarget.md) - [RenderTargetParams](/api/core/renderTarget/type-aliases/RenderTargetParams.md) #### Shader - [createShader()](/api/core/shader/functions/createShader.md) #### Texture - [loadTexture()](/api/core/texture/functions/loadTexture.md) - [loadVideoTexture()](/api/core/texture/functions/loadVideoTexture.md) - [createFloatDataTexture()](/api/core/texture/functions/createFloatDataTexture.md) - [BaseTextureParams](/api/core/texture/type-aliases/BaseTextureParams.md) - [DataTextureParams](/api/core/texture/type-aliases/DataTextureParams.md) - [ImageTextureParams\](/api/core/texture/type-aliases/ImageTextureParams.md) - [TextureParams](/api/core/texture/type-aliases/TextureParams.md) - [LoadVideoParams](/api/core/texture/type-aliases/LoadVideoParams.md) ### Effects #### Bloom - [bloom()](/api/effects/bloom/functions/bloom.md) #### Dither - [effects/dither/blueNoiseMask](/api/effects/dither/blueNoiseMask.md) #### Dither - [ditherBayer()](/api/effects/dither/functions/ditherBayer.md) - [ditherBlueNoise()](/api/effects/dither/functions/ditherBlueNoise.md) - [ditherIgn()](/api/effects/dither/functions/ditherIgn.md) - [ditherWhiteNoise()](/api/effects/dither/functions/ditherWhiteNoise.md) - [ditherHalftone()](/api/effects/dither/functions/ditherHalftone.md) #### Fxaa - [fxaa()](/api/effects/fxaa/functions/fxaa.md) #### Noise - [noise()](/api/effects/noise/functions/noise.md) #### Pixelate - [pixelate()](/api/effects/pixelate/functions/pixelate.md) #### Tone Mapping - [linearToneMapping()](/api/effects/toneMapping/functions/linearToneMapping.md) - [hableToneMapping()](/api/effects/toneMapping/functions/hableToneMapping.md) - [acesToneMapping()](/api/effects/toneMapping/functions/acesToneMapping.md) - [neutralToneMapping()](/api/effects/toneMapping/functions/neutralToneMapping.md) - [cineonToneMapping()](/api/effects/toneMapping/functions/cineonToneMapping.md) - [agxToneMapping()](/api/effects/toneMapping/functions/agxToneMapping.md) - [reinhardToneMapping()](/api/effects/toneMapping/functions/reinhardToneMapping.md) - [ToneMappingParams](/api/effects/toneMapping/type-aliases/ToneMappingParams.md) #### Trails - [trails()](/api/effects/trails/functions/trails.md) ### Global #### Canvas - [glCanvas()](/api/global/glCanvas/functions/glCanvas.md) - [GLCanvas\ = [`UniformSources`](../../../types/types/type-aliases/UniformSources.md)<[`UniformContext`](../../../types/types/interfaces/UniformContext.md)>>](/api/global/glCanvas/type-aliases/GLCanvas.md) #### Context - [glContext()](/api/global/glContext/functions/glContext.md) ### Helpers #### Loop - [loop()](/api/helpers/loop/functions/loop.md) - [playAllLoops()](/api/helpers/loop/functions/playAllLoops.md) - [pauseAllLoops()](/api/helpers/loop/functions/pauseAllLoops.md) #### Pointer Events - [onPointerEvents()](/api/helpers/onPointerEvents/functions/onPointerEvents.md) #### Resize - [onResize()](/api/helpers/onResize/functions/onResize.md) ### Passes #### Composite Effect Pass - [compositeEffectPass()](/api/passes/compositeEffectPass/functions/compositeEffectPass.md) - [CompositeEffectPass\ = [`UniformSources`](../../../types/types/type-aliases/UniformSources.md)<[`EffectUniformContext`](../../effectPass/type-aliases/EffectUniformContext.md)>>](/api/passes/compositeEffectPass/type-aliases/CompositeEffectPass.md) #### Compositor - [compositor()](/api/passes/compositor/functions/compositor.md) - [Compositor](/api/passes/compositor/type-aliases/Compositor.md) #### Effect Pass - [effectPass()](/api/passes/effectPass/functions/effectPass.md) - [floatTargetConfig](/api/passes/effectPass/variables/floatTargetConfig.md) - [EffectPass\](/api/passes/effectPass/type-aliases/EffectPass.md) - [EffectUniformContext](/api/passes/effectPass/type-aliases/EffectUniformContext.md) - [EffectUniforms](/api/passes/effectPass/type-aliases/EffectUniforms.md) #### Ping Pong FBO - [pingPongFBO()](/api/passes/pingPongFBO/functions/pingPongFBO.md) - [PingPongFBOPass\ = `Record`<`string`, `never`>>](/api/passes/pingPongFBO/type-aliases/PingPongFBOPass.md) #### Quad Render Pass - [quadRenderPass()](/api/passes/quadRenderPass/functions/quadRenderPass.md) #### Raw Render Pass - [rawRenderPass()](/api/passes/rawRenderPass/functions/rawRenderPass.md) - [RawRenderPass\>](/api/passes/rawRenderPass/type-aliases/RawRenderPass.md) - [RenderCallback](/api/passes/rawRenderPass/type-aliases/RenderCallback.md) - [UpdatedCallback\ = `Record`<`string`, `never`>, K *extends* `Extract`\ = `Extract`\>](/api/passes/rawRenderPass/type-aliases/UpdatedCallback.md) - [RawRenderOptions](/api/passes/rawRenderPass/type-aliases/RawRenderOptions.md) #### Render Pass - [renderPass()](/api/passes/renderPass/functions/renderPass.md) - [RenderPass\ = [`UniformSources`](../../../types/types/type-aliases/UniformSources.md)<`any`>, Context *extends* [`UniformContext`](../../../types/types/interfaces/UniformContext.md) = [`UniformContext`](../../../types/types/interfaces/UniformContext.md)>](/api/passes/renderPass/type-aliases/RenderPass.md) - [RenderOptions\](/api/passes/renderPass/type-aliases/RenderOptions.md) #### Transform Feedback - [transformFeedback()](/api/passes/transformFeedback/functions/transformFeedback.md) - [TransformFeedbackPass\ = `Record`<`string`, `never`>>](/api/passes/transformFeedback/type-aliases/TransformFeedbackPass.md) ### Types #### Types - [VectorUniform](/api/types/types/type-aliases/VectorUniform.md) - [MatrixUniform](/api/types/types/type-aliases/MatrixUniform.md) - [TextureUniform](/api/types/types/type-aliases/TextureUniform.md) - [UniformValue](/api/types/types/type-aliases/UniformValue.md) - [UniformContext](/api/types/types/interfaces/UniformContext.md) - [UniformSource\](/api/types/types/type-aliases/UniformSource.md) - [UniformSources\](/api/types/types/type-aliases/UniformSources.md) - [UniformValues](/api/types/types/type-aliases/UniformValues.md) - [TypedArray](/api/types/types/type-aliases/TypedArray.md) - [Attribute](/api/types/types/interfaces/Attribute.md) - [Disposable](/api/types/types/interfaces/Disposable.md) ### Other - [@radiancejs/gl](/api/modules.md)