Rendering algorithms implemented in raw WebGL 2.
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Latest commit f8b8073 Jul 11, 2018
Permalink
Failed to load latest commit information.
css OIT example Mar 28, 2017
img Cleanup, links to github Mar 18, 2017
tests Switch weight func May 10, 2018
utils Cleanup round 1 Jul 19, 2017
LICENSE License Mar 18, 2017
README.md Fix readme Jul 19, 2017
cube.html Charset Jul 11, 2018
deferred.html Charset Jul 11, 2018
dof.html Charset Jul 11, 2018
occlusion.html Charset Jul 11, 2018
oit.html Charset Jul 11, 2018
particles.html Charset Jul 11, 2018
ssao.html Charset Jul 11, 2018
triangle.html Charset Jul 11, 2018

README.md

WebGL 2 Examples

Rendering algorithms implemented in raw WebGL 2.

Currently include:

  • Just a Triangle (vertex arrays)
  • Phong-shaded Cube (vertex arrays, uniform buffers, immutable textures)
  • Particles (vertex arrays, uniform buffers, transform feedback)
  • Deferred Rendering (vertex arrays, uniform buffers, immutable textures, multiple render targets, float textures, texelFetch, EXT_color_buffer_float)
  • Depth of Field (vertex arrays, uniform buffers, immutable textures, depth textures, texelFetch, hardware instancing)
  • Order-independent Transparency (vertex arrays, uniform buffers, immutable textures, multiple render targets, float textures, texelFetch, hardware instancing, EXT_color_buffer_float)
  • Screen Space Ambient Occlusion (vertex arrays, uniform buffers, immutable textures, multiple render targets, float textures, texelFetch, hardware instancing, EXT_color_buffer_float)
  • Occlusion Culling (vertex arrays, uniform buffers, immutable textures, occlusion query)

All examples are implemented in a single HTML file with minimal use of functions, modules, classes or other abstractions. The goal is to allow the reader to easily see, in sequential order, all GL calls that are made.

These examples can be thought of as companion to Shrek Shao and Trung Le's excellent WebGL 2 Samples Pack. While their samples demonstrate individual features of WebGL 2, this project aims to demonstrate how those features can be used to implement commonly-used algorithms.

Contributing

Contributions are welcome! Especially new examples that show features that aren't included in the current set. The only requirement is that new examples use a similar basic structure:

  • All GL calls are made at the top level (without being split up into "helper functions"). A reader should be able to read through the source HTML and see all GL calls that are made, in the order that they made.
  • Shader code should be included at the top of the HTML file in script elements.
  • Small utility functions are fine (but shouldn't contain any GL calls!) and should go in utils/utils.js.
  • Use glMatrix for the math.