Short and easy to understand samples demonstrating WebGL 2 features
HTML GLSL JavaScript
Latest commit a76bde8 Feb 7, 2017 @shrekshao shrekshao committed on GitHub [readme] webgl2 released on chrome 56 and firefox 51

README.md

WebGL 2 Samples Pack

Build Status License

Run the live WebGL 2 Samples Pack.

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

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

Screenshots

Texture LOD Flat/smooth interpolation
Screenshot texture LOD Screenshot flat smooth
Sampler object wrap Transform feedback
Screenshot sampler object wrap Screenshot transform feedback

Samples Compatibility

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

Compatibility table updated on 2017/02/02

⚠️ 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
draw_instanced
draw_primitive_restart
draw_range_arrays
glsl_centroid
glsl_discard
glsl_flat_smooth_interpolators
glsl_non_square_matrix
query_occlusion
sampler_object
sampler_wrap
sampler_filter
texture_derivative
texture_2d_array
texture_format
texture_fetch
texture_grad
texture_3d
texture_immutable
texture_integer
texture_lod
texture_offset
texture_pixel_store
texture_srgb
texture_vertex
transform_feedback_interleaved
transform_feedback_separated
transform_feedback_separated_2
fbo_rtt_texture_array
fbo_blit
fbo_multisample
fbo_new_blend_equation
buffer_copy
buffer_uniform
geo_texture_format

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 reclaim them. Note that many of the samples here do not delete their resources explicitly; this is the case because they would only be reclaimed upon page unload, and it's neither necessary nor desirable to install an onunload handler only for the purpose of destroying WebGL resources. See the following pages for more details:

https://www.khronos.org/registry/webgl/specs/latest/1.0/#3

https://bugs.chromium.org/p/chromium/issues/detail?id=5638

WebGL 2 Resources

Acknowledgements