{"id":13530366,"url":"https://github.com/WebGLSamples/WebGL2Samples","last_synced_at":"2025-04-01T18:31:38.082Z","repository":{"id":43557364,"uuid":"46760026","full_name":"WebGLSamples/WebGL2Samples","owner":"WebGLSamples","description":"Short and easy to understand samples demonstrating WebGL 2 features","archived":false,"fork":false,"pushed_at":"2021-11-10T17:38:18.000Z","size":13483,"stargazers_count":1018,"open_issues_count":8,"forks_count":144,"subscribers_count":61,"default_branch":"master","last_synced_at":"2025-02-11T17:56:44.109Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebGLSamples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-24T01:51:44.000Z","updated_at":"2025-02-08T06:19:06.000Z","dependencies_parsed_at":"2022-07-16T05:46:18.983Z","dependency_job_id":null,"html_url":"https://github.com/WebGLSamples/WebGL2Samples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebGLSamples%2FWebGL2Samples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebGLSamples%2FWebGL2Samples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebGLSamples%2FWebGL2Samples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebGLSamples%2FWebGL2Samples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebGLSamples","download_url":"https://codeload.github.com/WebGLSamples/WebGL2Samples/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246691577,"owners_count":20818535,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T07:00:48.826Z","updated_at":"2025-04-01T18:31:37.129Z","avatar_url":"https://github.com/WebGLSamples.png","language":"HTML","readme":"WebGL 2 Samples Pack\n=====================\n\n[![Build Status](https://travis-ci.org/WebGLSamples/WebGL2Samples.svg?branch=master)](https://travis-ci.org/WebGLSamples/WebGL2Samples)\n[![License](http://img.shields.io/:license-mit-blue.svg)](https://github.com/WebGLSamples/WebGL2Samples/blob/master/LICENSE.md)\n\nRun the live **[WebGL 2 Samples Pack](http://webglsamples.org/WebGL2Samples/)**.\n\nShort and easy to understand samples demonstrating WebGL 2 features by [Shuai Shao (Shrek)](https://shrekshao.github.io), [Trung Le](http://www.trungtuanle.com/) and contributors. Advised by [Patrick Cozzi](http://www.seas.upenn.edu/~pcozzi/), University of Pennsylvania.\n\nInspired by and ported from Christophe Riccio's ([@Groovounet](https://github.com/Groovounet)) [OpenGL Samples Pack](https://github.com/g-truc/ogl-samples).\n\nTarek Sherif writes a really helpful [WebGL 2 Examples](https://github.com/tsherif/webgl2examples) repo which demonstrates how these features can be used to implement commonly-used algorithms.\n\n## Screenshots\n\n| [Texture LOD](http://webglsamples.org/WebGL2Samples/#texture_lod) | [Flat/smooth interpolation](http://webglsamples.org/WebGL2Samples/#glsl_flat_smooth_interpolators) |\n| --- | ----|\n|[![Screenshot texture LOD](assets/img/screenshot_texture_lod.png)](http://webglsamples.org/WebGL2Samples/#texture_lod) | [![Screenshot flat smooth](assets/img/screenshot_flat_smooth.png)](http://webglsamples.org/WebGL2Samples/#glsl_flat_smooth_interpolators)|\n\n| [Sampler object wrap](http://webglsamples.org/WebGL2Samples/#sampler_wrap) | [Transform feedback](http://webglsamples.org/WebGL2Samples/#transform_feedback_separated_2) |\n| --- | ----|\n|[![Screenshot sampler object wrap](assets/img/screenshot_sampler_object.png)](http://webglsamples.org/WebGL2Samples/#sampler_wrap) | [![Screenshot transform feedback](assets/img/screenshot_transform_feedback.png)](http://webglsamples.org/WebGL2Samples/#transform_feedback_separated_2)|\n\n## Samples Compatibility\n\n:grey_exclamation: WebGL 2 is released on Chrome 56 and FireFox 51 now.\n\n:grey_exclamation: Compatibility table updated on 2017/02/02\n\n:warning: the [minial-gltf-loader](https://github.com/shrekshao/minimal-gltf-loader) used for samples is in development and contributions are welcome.\n\n|              | Chrome Canary 58 Windows 10| Chrome Canary 58 OSX 10| Firefox Nightly 53 Windows 10| Firefox Developer Edition 52 OSX 10|\n|--------------|:-----------------:|:--------------------------------------:|:-----------------:|:-----------------------:|\n|[draw_image_space](http://webglsamples.org/WebGL2Samples/#draw_image_space)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[draw_instanced](http://webglsamples.org/WebGL2Samples/#draw_instanced)|:white_check_mark: |:white_check_mark:| :white_check_mark:|:white_check_mark:|\n|[draw_primitive_restart](http://webglsamples.org/WebGL2Samples/#draw_primitive_restart)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[draw_range_arrays](http://webglsamples.org/WebGL2Samples/#draw_range_arrays)|:white_check_mark: | :white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[glsl_centroid](http://webglsamples.org/WebGL2Samples/#glsl_centroid)|:white_check_mark: |:white_check_mark: | :white_check_mark:|:white_check_mark:|\n|[glsl_flat_smooth_interpolators](http://webglsamples.org/WebGL2Samples/#glsl_flat_smooth_interpolators)|:white_check_mark: |:white_check_mark:| :white_check_mark: |:white_check_mark:|\n|[glsl_non_square_matrix](http://webglsamples.org/WebGL2Samples/#glsl_non_square_matrix)|:white_check_mark: |:white_check_mark:| :white_check_mark: |:white_check_mark:|\n|[query_occlusion](http://webglsamples.org/WebGL2Samples/#query_occlusion)|:white_check_mark:|:white_check_mark:| :white_check_mark:|:white_check_mark:|\n|[sampler_object](http://webglsamples.org/WebGL2Samples/#sampler_filter)|:white_check_mark:|:white_check_mark:| :white_check_mark:|:white_check_mark:|\n|[sampler_wrap](http://webglsamples.org/WebGL2Samples/#sampler_filter)|:white_check_mark:|:white_check_mark:| :white_check_mark:|:white_check_mark:|\n|[sampler_filter](http://webglsamples.org/WebGL2Samples/#sampler_filter)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[texture_derivative](http://webglsamples.org/WebGL2Samples/#texture_derivative)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[texture_2d_array](http://webglsamples.org/WebGL2Samples/#texture_2d_array)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[texture_format](http://webglsamples.org/WebGL2Samples/#texture_format)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[texture_fetch](http://webglsamples.org/WebGL2Samples/#texture_fetch)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[texture_grad](http://webglsamples.org/WebGL2Samples/#texture_grad)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[texture_3d](http://webglsamples.org/WebGL2Samples/#texture_3d)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[texture_immutable](http://webglsamples.org/WebGL2Samples/#texture_immutable)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[texture_integer](http://webglsamples.org/WebGL2Samples/#texture_integer)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[texture_lod](http://webglsamples.org/WebGL2Samples/#texture_lod)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[texture_offset](http://webglsamples.org/WebGL2Samples/#texture_offset)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[texture_pixel_store](http://webglsamples.org/WebGL2Samples/#texture_pixel_store)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[texture_srgb](http://webglsamples.org/WebGL2Samples/#texture_srgb)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[texture_vertex](http://webglsamples.org/WebGL2Samples/#texture_vertex)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[transform_feedback_interleaved](http://webglsamples.org/WebGL2Samples/#transform_feedback_interleaved)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[transform_feedback_separated](http://webglsamples.org/WebGL2Samples/#transform_feedback_separated)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[transform_feedback_separated_2](http://webglsamples.org/WebGL2Samples/#transform_feedback_separated_2)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[transform_feedback_instanced](http://webglsamples.org/WebGL2Samples/#transform_feedback_instanced)|:white_check_mark:|TODO|:white_check_mark:|TODO|\n|[fbo_rtt_draw_buffers](http://webglsamples.org/WebGL2Samples/#fbo_rtt_draw_buffers)|:white_check_mark:|TODO|:white_check_mark:|TODO|\n|[fbo_rtt_texture_array](http://webglsamples.org/WebGL2Samples/#fbo_rtt_texture_array)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[fbo_rtt_depth_texture](http://webglsamples.org/WebGL2Samples/#fbo_rtt_depth_texture)|:white_check_mark:|TODO|:white_check_mark:|TODO|\n|[fbo_read_pixels](http://webglsamples.org/WebGL2Samples/#fbo_read_pixels)|:white_check_mark:|TODO|:white_check_mark:|TODO|\n|[fbo_blit](http://webglsamples.org/WebGL2Samples/#fbo_blit)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[fbo_multisample](http://webglsamples.org/WebGL2Samples/#fbo_multisample)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[fbo_new_blend_equation](http://webglsamples.org/WebGL2Samples/#fbo_new_blend_equation)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[buffer_copy](http://webglsamples.org/WebGL2Samples/#buffer_copy)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[buffer_uniform](http://webglsamples.org/WebGL2Samples/#buffer_uniform)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n|[geo_texture_format](http://webglsamples.org/WebGL2Samples/#geo_texture_format)|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|\n\n\n## Running the Samples Locally\n\nClone this repo:\n```\ngit@github.com:WebGLSamples/WebGL2Samples.git\n```\n\nThen run a local web server from the repo's root directory.  for example, if you have [Python](https://www.python.org/) installed, run\n```\ncd WebGL2Samples\npython -m SimpleHTTPServer\n```\nThen browse to\n```\nhttp://localhost:8000/\n```\n\n### Build Instructions\n\nThe samples do not require a build; however, Node.js and gulp can be used to run JSHint to aid in development.\n\nInstall [Node.js](http://nodejs.org/).  From the root directory of this repo, run:\n```\nnpm install\n```\nTo run JSHint on the entire codebase, run\n```\nnpm run jsHint\n```\nTo run JSHint automatically when a file is saved, run the following and leave it open in a console window:\n```\nnpm run jsHint-watch\n```\n\n## Contributions\n\nThis is a community project.  We welcome contributions!  Check out the [issues](https://github.com/WebGLSamples/WebGL2Samples/issues) for ideas on what to contribute.\n\nWhen 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](https://cla-assistant.io/) is used for signing a Contributor License Agreement (CLA).  Submit an [issue](https://github.com/WebGLSamples/WebGL2Samples/issues) if you have any questions.\n\n## About WebGL Resource Deletion\n\nWebGL 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:\n\nhttps://www.khronos.org/registry/webgl/specs/latest/1.0/#3\n\nhttps://bugs.chromium.org/p/chromium/issues/detail?id=5638\n\n## WebGL 2 Resources\n\n* [WebGL 2 course](https://docs.google.com/presentation/d/1Orx0GB0cQcYhHkYsaEcoo5js3c5-pv7ahPniIRIzzfg/edit?usp=sharing) from SIGGRAPH Asia 2015\n* [WebGL 2 Spec](https://www.khronos.org/registry/webgl/specs/latest/2.0/)\n* [OpenGL ES 3.0 Reference Pages](https://www.khronos.org/opengles/sdk/docs/man3/)\n* [WebGL Report](http://webglreport.com/)\n\n## Acknowledgements\n\n* [three.js example page framework](https://github.com/mrdoob/three.js) by Mr.doob ([@mrdoob](https://github.com/mrdoob)) and contributors\n* [OpenGL Samples Pack](https://github.com/g-truc/ogl-samples) by Christophe Riccio ([@Groovounet](https://github.com/Groovounet)) and contributors\n* [Cesium](https://github.com/AnalyticalGraphicsInc/cesium) build script by Matt Amato ([@mramato](https://github.com/mramato)) and contributors\n* [webgl2-particles](https://github.com/toji/webgl2-particles) by Brandon Jones ([@toji](https://github.com/toji)) and Mr.doob ([@mrdoob](https://github.com/mrdoob))\n","funding_links":[],"categories":["HTML","Learning"],"sub_categories":["Computer Graphics"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWebGLSamples%2FWebGL2Samples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWebGLSamples%2FWebGL2Samples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWebGLSamples%2FWebGL2Samples/lists"}