├── LICENSE
├── README.md
├── css
└── webgl2examples.css
├── cube.html
├── deferred.html
├── dof.html
├── img
└── khronos_webgl.png
├── occlusion.html
├── oit-dual-depth-peeling.html
├── oit.html
├── particles.html
├── ssao.html
├── tests
├── oit-near-opaque.html
└── sorted-over-near-opaque.html
├── triangle.html
└── utils
├── gl-matrix.js
└── utils.js
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2017 Tarek Sherif
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | WebGL 2 Examples
2 | ================
3 |
4 | Rendering algorithms implemented in raw WebGL 2.
5 |
6 | Currently include:
7 | - [Just a Triangle](https://tsherif.github.io/webgl2examples/triangle.html) (vertex arrays)
8 | - [Phong-shaded Cube](https://tsherif.github.io/webgl2examples/cube.html) (vertex arrays, uniform buffers, immutable textures)
9 | - [Particles](https://tsherif.github.io/webgl2examples/particles.html) (vertex arrays, uniform buffers, transform feedback)
10 | - [Deferred Rendering](https://tsherif.github.io/webgl2examples/deferred.html) (vertex arrays, uniform buffers, immutable textures, multiple render targets, float textures, texelFetch, EXT_color_buffer_float)
11 | - [Depth of Field](https://tsherif.github.io/webgl2examples/dof.html) (vertex arrays, uniform buffers, immutable textures, depth textures, texelFetch, hardware instancing)
12 | - [Order-independent Transparency](https://tsherif.github.io/webgl2examples/oit.html) (vertex arrays, uniform buffers, immutable textures, multiple render targets, float textures, texelFetch, hardware instancing, EXT_color_buffer_float)
13 | - [Order-independent Transparency using Dual Depth Peeling](https://tsherif.github.io/webgl2examples/oit-dual-depth-peeling.html) (vertex arrays, uniform buffers, immutable textures, multiple render targets, float textures, texelFetch, hardware instancing, EXT_color_buffer_float)
14 | - [Screen Space Ambient Occlusion](https://tsherif.github.io/webgl2examples/ssao.html) (vertex arrays, uniform buffers, immutable textures, multiple render targets, float textures, texelFetch, hardware instancing, EXT_color_buffer_float)
15 | - [Occlusion Culling](https://tsherif.github.io/webgl2examples/occlusion.html) (vertex arrays, uniform buffers, immutable textures, occlusion query)
16 |
17 | 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.
18 |
19 | These examples can be thought of as companion to Shrek Shao and Trung Le's excellent [WebGL 2 Samples Pack](http://webglsamples.org/WebGL2Samples/). 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.
20 |
21 | Contributing
22 | ------------
23 |
24 | 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:
25 | - 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.
26 | - Shader code should be included at the top of the HTML file in script elements.
27 | - Small utility functions are fine (but shouldn't contain any GL calls!) and should go in [utils/utils.js](https://github.com/tsherif/webgl2examples/blob/master/utils/utils.js).
28 | - Use [glMatrix](https://github.com/tsherif/webgl2examples/blob/master/utils/gl-matrix.js) for the math.
29 |
--------------------------------------------------------------------------------
/css/webgl2examples.css:
--------------------------------------------------------------------------------
1 | html {
2 | overflow: hidden;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | }
8 |
9 | #example-title {
10 | position: absolute;
11 | top: 10px;
12 | left: 10px;
13 | color: white;
14 | background-color: gray;
15 | padding: 0.5em;
16 | max-width: 24%;
17 | }
18 |
19 | #example-title header {
20 | font-size: 1.2em;
21 | font-weight: bold;
22 | }
23 |
--------------------------------------------------------------------------------
/cube.html:
--------------------------------------------------------------------------------
1 |
2 |
24 |
25 |
26 | WebGL 2 Example: Phong-shaded Cube
27 |
28 |
29 |
30 |
31 |
32 |
33 |
