WebGL 2 Samples Pack

Run the live WebGL 2 Samples Pack.

Short and easy to understand samples demonstrating WebGL 2 features by Shuai Shao (Shrek), Trung Le and contributors. Advised by Patrick Cozzi, University of Pennsylvania.

Inspired by and ported from Christophe Riccio's (@Groovounet) OpenGL Samples Pack.

Tarek Sherif writes a really helpful WebGL 2 Examples repo which demonstrates how these features can be used to implement commonly-used algorithms.

Screenshots

| Texture LOD | Flat/smooth interpolation | | --- | ----| | | |

| Sampler object wrap | Transform feedback | | --- | ----| | | |

Samples Compatibility

:grey_exclamation: WebGL 2 is released on Chrome 56 and FireFox 51 now.

:grey_exclamation: Compatibility table updated on 2017/02/02

:warning: the minial-gltf-loader used for samples is in development and contributions are welcome.

| | Chrome Canary 58 Windows 10| Chrome Canary 58 OSX 10| Firefox Nightly 53 Windows 10| Firefox Developer Edition 52 OSX 10| |--------------|:-----------------:|:--------------------------------------:|:-----------------:|:-----------------------:| |draw_image_space|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |draw_instanced|:white_check_mark: |:white_check_mark:| :white_check_mark:|:white_check_mark:| |draw_primitive_restart|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |draw_range_arrays|:white_check_mark: | :white_check_mark:|:white_check_mark:|:white_check_mark:| |glsl_centroid|:white_check_mark: |:white_check_mark: | :white_check_mark:|:white_check_mark:| |glsl_flat_smooth_interpolators|:white_check_mark: |:white_check_mark:| :white_check_mark: |:white_check_mark:| |glsl_non_square_matrix|:white_check_mark: |:white_check_mark:| :white_check_mark: |:white_check_mark:| |query_occlusion|:white_check_mark:|:white_check_mark:| :white_check_mark:|:white_check_mark:| |sampler_object|:white_check_mark:|:white_check_mark:| :white_check_mark:|:white_check_mark:| |sampler_wrap|:white_check_mark:|:white_check_mark:| :white_check_mark:|:white_check_mark:| |sampler_filter|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |texture_derivative|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |texture_2d_array|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |texture_format|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |texture_fetch|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |texture_grad|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |texture_3d|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |texture_immutable|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |texture_integer|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |texture_lod|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |texture_offset|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |texture_pixel_store|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |texture_srgb|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |texture_vertex|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |transform_feedback_interleaved|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |transform_feedback_separated|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |transform_feedback_separated_2|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |transform_feedback_instanced|:white_check_mark:|TODO|:white_check_mark:|TODO| |fbo_rtt_draw_buffers|:white_check_mark:|TODO|:white_check_mark:|TODO| |fbo_rtt_texture_array|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |fbo_rtt_depth_texture|:white_check_mark:|TODO|:white_check_mark:|TODO| |fbo_read_pixels|:white_check_mark:|TODO|:white_check_mark:|TODO| |fbo_blit|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |fbo_multisample|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |fbo_new_blend_equation|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |buffer_copy|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |buffer_uniform|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:| |geo_texture_format|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|

Running the Samples Locally

Clone this repo:

git@github.com:WebGLSamples/WebGL2Samples.git

Then run a local web server from the repo's root directory. for example, if you have Python installed, run

cd WebGL2Samples
python -m SimpleHTTPServer

Then browse to

http://localhost:8000/

Build Instructions

The samples do not require a build; however, Node.js and gulp can be used to run JSHint to aid in development.

Install Node.js. From the root directory of this repo, run:

npm install

To run JSHint on the entire codebase, run

npm run jsHint

To run JSHint automatically when a file is saved, run the following and leave it open in a console window:

npm run jsHint-watch

Contributions

This is a community project. We welcome contributions! Check out the issues for ideas on what to contribute.

When you open a pull request, please make sure that GitHub reports that "All checks have passed", indicated by the white checkmark in a green circle on top of the "Merge pull request" button. Travis CI is used to run JSHint on your branch, and CLA assistant is used for signing a Contributor License Agreement (CLA). Submit an issue if you have any questions.

About WebGL Resource Deletion

WebGL applications should, in general, use the delete* APIs to manage their resources (buffers, textures, etc.) rather than relying on the browser's garbage collector to