tsherif / Webgl2examples
Licence: mit
Rendering algorithms implemented in raw WebGL 2.
Stars: ✭ 353
Projects that are alternatives of or similar to Webgl2examples
Spector.js
Explore and Troubleshoot your WebGL scenes with ease.
Stars: ✭ 599 (+69.69%)
Mutual labels: 3d, webgl, webgl2
Spritejs
A cross platform high-performance graphics system.
Stars: ✭ 4,712 (+1234.84%)
Mutual labels: 3d, webgl, webgl2
Curtainsjs
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.
Stars: ✭ 1,039 (+194.33%)
Mutual labels: 3d, webgl, webgl2
Babylon.js
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.
Stars: ✭ 15,479 (+4284.99%)
Mutual labels: 3d, webgl, webgl2
Nyc Buildings
An interactive 3D visualization of the all the buildings in Manhattan.
Stars: ✭ 338 (-4.25%)
Mutual labels: 3d, webgl
Enable3d
🕹️ Standalone 3D Framework / Physics for three.js (using ammo.js) / 3D extension for Phaser 3
Stars: ✭ 271 (-23.23%)
Mutual labels: 3d, webgl
Dc Sdk
DC-SDK 是基于 Cesium 进行二次开发的2、3D一体 WebGis 应用框架,该框架优化了 Cesium 的使用方式和增添了一些额外功能，旨在为开发者快速构建 WebGis 应用。🌎
Stars: ✭ 206 (-41.64%)
Mutual labels: 3d, webgl
Mapillary Js
Interactive, customizable street imagery viewer in the browser, powered by WebGL
Stars: ✭ 261 (-26.06%)
Mutual labels: 3d, webgl
Webgl Fundamentals
WebGL lessons that start with the basics
Stars: ✭ 3,315 (+839.09%)
Mutual labels: 3d, webgl
Player
Experience the fast and beautiful anti-aliased rendering of WebGL. You can create rich, interactive graphics, cross-platform applications and games without worrying about browser or device compatibility.
Stars: ✭ 13 (-96.32%)
Mutual labels: webgl, webgl2
Wonder.js
🚀Functional, High performance 3D Webgl Engine
Stars: ✭ 225 (-36.26%)
Mutual labels: 3d, webgl
React Three Editable
👀 ✏️ Edit your react-three-fiber scene with a visual editor without giving up control over your code.
Stars: ✭ 261 (-26.06%)
Mutual labels: 3d, webgl
Glmaps
Data visualization examples and tutorials from scratch. 数据可视化示例代码集与新手学习教程。
Stars: ✭ 288 (-18.41%)
Mutual labels: 3d, webgl
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)
- Weighted, Blended Order-independent Transparency (vertex arrays, uniform buffers, immutable textures, multiple render targets, float textures, texelFetch, hardware instancing, EXT_color_buffer_float)
- Order-independent Transparency using Dual Depth Peeling (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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].