Skip to main content
GameDev.net gamedev.net

PRO Tired of ads? Read GameDev.net ad-free and help keep the community independent with GameDev Pro — $3/month.

g
gavinyork Member News
· 2 years, 5 months ago

zephyr3d v0.4.0 Released - 3D rendering framework for WebGL & WebGPU

Briefing

<p><a href=https://github.com/gavinyork/zephyr3d rel="noopener noreferrer" target=_blank>Zephyr3d</a> is an open sourced 3d rendering framework for browsers that supports both WebGL and WebGPU, developed in TypeScript. </p><p><strong>Introduction</strong></p><p>Zephyr3d is primarily composed of two sets of APIs: the Device API and the Scene API.</p><ul><li>Device API<br>The Device API provides a set of low-level abstraction wrapper interfaces, allowing users to call the WebGL, WebGL2, and WebGPU graphics interfaces in the same way. These interfaces include most of the functionality of the underlying APIs, making it easy to support cross-API graphics rendering.</li><li>Scene API<br>The Scene API is a high-level rendering framework built on top of the DeviceAPI, serving as both a test environment for the Device API and a direct tool for graphics development. Currently, the Scene API has implemented features such as PBR rendering, cluster lighting, shadow mapping, terrain rendering, and post-processing.</li></ul><p><strong>changes in v0.4.0</strong></p><ul><li>Performance Optimization Rendering Pipeline Optimization<br>Optimize uniform data submission, reduce the number of RenderPass switches.<br>Optimize the performance of geometric instance rendering.<br>Customize the rendering queue cache within batches to reduce the CPU usage of rendering queue construction.</li><li>Command Buffer Reuse<br>Command Buffer Reuse can reduce CPU load, improve GPU utilization, and significantly improve rendering efficiency. This version now supports command buffer reuse for each rendering batch when using the WebGPU device (using GPURenderBundle), significantly improving the performance of the application.</li></ul><p>Demos:</p><p><a href="https://gavinyork.github.io/zephyr3d/tut/demo-0.html?dev=webgl2&ui=1" rel="noopener noreferrer" target=_blank>GLTF viewer</a></p><figure class="image image-style-align-left"><img data-mime-type data-original=https://uploads.gamedev.net/news/monthly_2024_04/e9f44ad7e5a74c04b7b8730d0693aca9.gltf.jpg decoding=async height=253 loading=lazy referrerpolicy=no-referrer sizes="(min-width: 1200px) 1200px, (min-width: 768px) 768px, (min-width: 300px) 300px, 100vw" src=https://uploads.gamedev.net/news/monthly_2024_04/medium.e9f44ad7e5a74c04b7b8730d0693aca9.gltf.webp srcset="https://uploads.gamedev.net/news/monthly_2024_04/thumbnail.e9f44ad7e5a74c04b7b8730d0693aca9.gltf.webp 150w, https://uploads.gamedev.net/news/monthly_2024_04/small.e9f44ad7e5a74c04b7b8730d0693aca9.gltf.webp 300w, https://uploads.gamedev.net/news/monthly_2024_04/medium.e9f44ad7e5a74c04b7b8730d0693aca9.gltf.webp 768w, https://uploads.gamedev.net/news/monthly_2024_04/large.e9f44ad7e5a74c04b7b8730d0693aca9.gltf.webp 1200w" style="aspect-ratio: 400/253;" width=400></figure><p><a href="https://gavinyork.github.io/zephyr3d/tut/demo-2.html?dev=webgl2&ui=1" rel="noopener noreferrer" target=_blank>Clustered lighting</a></p><figure class="image image-style-align-left"><img data-mime-type data-original=https://uploads.gamedev.net/news/monthly_2024_04/d573670993d445dc8e34566024e8f0cd.lights.jpg decoding=async height=254 loading=lazy referrerpolicy=no-referrer sizes="(min-width: 1200px) 1200px, (min-width: 768px) 768px, (min-width: 300px) 300px, 100vw" src=https://uploads.gamedev.net/news/monthly_2024_04/medium.d573670993d445dc8e34566024e8f0cd.lights.webp srcset="https://uploads.gamedev.net/news/monthly_2024_04/thumbnail.d573670993d445dc8e34566024e8f0cd.lights.webp 150w, https://uploads.gamedev.net/news/monthly_2024_04/small.d573670993d445dc8e34566024e8f0cd.lights.webp 300w, https://uploads.gamedev.net/news/monthly_2024_04/medium.d573670993d445dc8e34566024e8f0cd.lights.webp 768w, https://uploads.gamedev.net/news/monthly_2024_04/large.d573670993d445dc8e34566024e8f0cd.lights.webp 1200w" style="aspect-ratio: 400/254;" width=400></figure><p><a href="https://gavinyork.github.io/zephyr3d/tut/demo-1.html?dev=webgl2&ui=1" rel="noopener noreferrer" target=_blank>material system</a></p><figure class="image image-style-align-left"><img data-mime-type data-original=https://uploads.gamedev.net/news/monthly_2024_04/9d89c4d885594519a388efa2f2b61a04.material.jpg decoding=async height=247 loading=lazy referrerpolicy=no-referrer sizes="(min-width: 1200px) 1200px, (min-width: 768px) 768px, (min-width: 300px) 300px, 100vw" src=https://uploads.gamedev.net/news/monthly_2024_04/medium.9d89c4d885594519a388efa2f2b61a04.material.webp srcset="https://uploads.gamedev.net/news/monthly_2024_04/thumbnail.9d89c4d885594519a388efa2f2b61a04.material.webp 150w, https://uploads.gamedev.net/news/monthly_2024_04/small.9d89c4d885594519a388efa2f2b61a04.material.webp 300w, https://uploads.gamedev.net/news/monthly_2024_04/medium.9d89c4d885594519a388efa2f2b61a04.material.webp 768w, https://uploads.gamedev.net/news/monthly_2024_04/large.9d89c4d885594519a388efa2f2b61a04.material.webp 1200w" style="aspect-ratio: 400/247;" width=400></figure><p><a href="https://gavinyork.github.io/zephyr3d/tut/demo-3.html?dev=webgl2&ui=1" rel="noopener noreferrer" target=_blank>Outdoor rendering</a></p><figure class="image image-style-align-left"><img data-mime-type data-original=https://uploads.gamedev.net/news/monthly_2024_04/57103b7ae9ea4eba99569c3239d38bf3.terrain.jpg decoding=async height=250 loading=lazy referrerpolicy=no-referrer sizes="(min-width: 1200px) 1200px, (min-width: 768px) 768px, (min-width: 300px) 300px, 100vw" src=https://uploads.gamedev.net/news/monthly_2024_04/medium.57103b7ae9ea4eba99569c3239d38bf3.terrain.webp srcset="https://uploads.gamedev.net/news/monthly_2024_04/thumbnail.57103b7ae9ea4eba99569c3239d38bf3.terrain.webp 150w, https://uploads.gamedev.net/news/monthly_2024_04/small.57103b7ae9ea4eba99569c3239d38bf3.terrain.webp 300w, https://uploads.gamedev.net/news/monthly_2024_04/medium.57103b7ae9ea4eba99569c3239d38bf3.terrain.webp 768w, https://uploads.gamedev.net/news/monthly_2024_04/large.57103b7ae9ea4eba99569c3239d38bf3.terrain.webp 1200w" style="aspect-ratio: 400/250;" width=400></figure><p><a href="https://gavinyork.github.io/zephyr3d/tut/demo-5.html?dev=webgl2&ui=1" rel="noopener noreferrer" target=_blank>geometry instancing</a></p><figure class="image image-style-align-left"><img data-mime-type data-original=https://uploads.gamedev.net/news/monthly_2024_04/270e486fc022418e84b8da7862f11529.instancing.jpg decoding=async height=253 loading=lazy referrerpolicy=no-referrer sizes="(min-width: 1200px) 1200px, (min-width: 768px) 768px, (min-width: 300px) 300px, 100vw" src=https://uploads.gamedev.net/news/monthly_2024_04/medium.270e486fc022418e84b8da7862f11529.instancing.webp srcset="https://uploads.gamedev.net/news/monthly_2024_04/thumbnail.270e486fc022418e84b8da7862f11529.instancing.webp 150w, https://uploads.gamedev.net/news/monthly_2024_04/small.270e486fc022418e84b8da7862f11529.instancing.webp 300w, https://uploads.gamedev.net/news/monthly_2024_04/medium.270e486fc022418e84b8da7862f11529.instancing.webp 768w, https://uploads.gamedev.net/news/monthly_2024_04/large.270e486fc022418e84b8da7862f11529.instancing.webp 1200w" style="aspect-ratio: 400/253;" width=400></figure><p><a href="https://gavinyork.github.io/zephyr3d/tut/demo-4.html?dev=webgl2&ui=1" rel="noopener noreferrer" target=_blank>Physics</a></p><figure class="image image-style-align-left"><img data-mime-type data-original=https://uploads.gamedev.net/news/monthly_2024_04/717c7544c87546d2a41aa6ba10b297bc.physics.jpg decoding=async height=252 loading=lazy referrerpolicy=no-referrer sizes="(min-width: 1200px) 1200px, (min-width: 768px) 768px, (min-width: 300px) 300px, 100vw" src=https://uploads.gamedev.net/news/monthly_2024_04/medium.717c7544c87546d2a41aa6ba10b297bc.physics.webp srcset="https://uploads.gamedev.net/news/monthly_2024_04/thumbnail.717c7544c87546d2a41aa6ba10b297bc.physics.webp 150w, https://uploads.gamedev.net/news/monthly_2024_04/small.717c7544c87546d2a41aa6ba10b297bc.physics.webp 300w, https://uploads.gamedev.net/news/monthly_2024_04/medium.717c7544c87546d2a41aa6ba10b297bc.physics.webp 768w, https://uploads.gamedev.net/news/monthly_2024_04/large.717c7544c87546d2a41aa6ba10b297bc.physics.webp 1200w" style="aspect-ratio: 400/252;" width=400></figure><p><a href="https://gavinyork.github.io/zephyr3d/tut/demo-6.html?dev=webgpu&ui=1" rel="noopener noreferrer" target=_blank>Drawcall benchmark(requires WebGPU)</a></p><figure class="image image-style-align-left"><img data-mime-type data-original=https://uploads.gamedev.net/news/monthly_2024_04/8aa52e9f5aab4dea9a7383829a8ff99d.commandbufferreuse.jpg decoding=async height=230 loading=lazy referrerpolicy=no-referrer sizes="(min-width: 1200px) 1200px, (min-width: 768px) 768px, (min-width: 300px) 300px, 100vw" src=https://uploads.gamedev.net/news/monthly_2024_04/medium.8aa52e9f5aab4dea9a7383829a8ff99d.commandbufferreuse.webp srcset="https://uploads.gamedev.net/news/monthly_2024_04/thumbnail.8aa52e9f5aab4dea9a7383829a8ff99d.commandbufferreuse.webp 150w, https://uploads.gamedev.net/news/monthly_2024_04/small.8aa52e9f5aab4dea9a7383829a8ff99d.commandbufferreuse.webp 300w, https://uploads.gamedev.net/news/monthly_2024_04/medium.8aa52e9f5aab4dea9a7383829a8ff99d.commandbufferreuse.webp 768w, https://uploads.gamedev.net/news/monthly_2024_04/large.8aa52e9f5aab4dea9a7383829a8ff99d.commandbufferreuse.webp 1200w" style="aspect-ratio: 400/230;" width=400></figure><p><a href="https://gavinyork.github.io/zephyr3d/tut/demo-7.html?dev=webgpu&ui=1" rel="noopener noreferrer" target=_blank>Order-Independent-Transparency</a></p><figure class="image image-style-align-left"><img data-mime-type data-original=https://uploads.gamedev.net/news/monthly_2024_04/9ffdbe6904e64ad3aff6e6331402f397.oit.jpg decoding=async height=231 loading=lazy referrerpolicy=no-referrer sizes="(min-width: 1200px) 1200px, (min-width: 768px) 768px, (min-width: 300px) 300px, 100vw" src=https://uploads.gamedev.net/news/monthly_2024_04/medium.9ffdbe6904e64ad3aff6e6331402f397.oit.webp srcset="https://uploads.gamedev.net/news/monthly_2024_04/thumbnail.9ffdbe6904e64ad3aff6e6331402f397.oit.webp 150w, https://uploads.gamedev.net/news/monthly_2024_04/small.9ffdbe6904e64ad3aff6e6331402f397.oit.webp 300w, https://uploads.gamedev.net/news/monthly_2024_04/medium.9ffdbe6904e64ad3aff6e6331402f397.oit.webp 768w, https://uploads.gamedev.net/news/monthly_2024_04/large.9ffdbe6904e64ad3aff6e6331402f397.oit.webp 1200w" style="aspect-ratio: 400/231;" width=400></figure>

WebGL rendering WebGPU Web3D
Discuss

Game development news without the noise

One useful weekly briefing. No daily flood.

Sending your confirmation email…

By subscribing, you agree to receive GDN Weekly by email. Confirm through the link we send. Unsubscribe anytime. See our Privacy Policy.

Discussion

Loading comments...

Recommended resources

Graphics Programming Resources

See full guide
Real-Time Rendering, Fourth Edition cover
Editor pick Community pick

Real-Time Rendering, Fourth Edition

Amazon · Book

Real-Time Rendering combines fundamental principles with guidance on the latest techniques to provide a complete reference on three-dimensional interactive computer graphics. It will help you increase speed and improve image quality and learn the features and limitations of acceleration algorithms and graphics APIs. This latest fourth edition has been updated to include a chapter on virtual reality and augmented reality and covers new topics such as visual appearance, global illumination, and curves and curved surfaces. It is for anyone serious about computer graphics who wants to learn about algorithms that create synthetic images fast enough that the viewer can interact with a virtual environment.

View

GameDev.net may earn a commission if you purchase through these links. This helps fund the site at no extra cost to you.

Programming with wgpu in Rust cover
Editor pick

Programming with wgpu in Rust

Amazon · Book

Unlock the full power of modern graphics programming with wgpu and Rust. This comprehensive guide takes you from foundational GPU concepts to advanced real-time rendering and compute techniques—equipping you to build fast, safe, and cross-platform graphics applications. Written for intermediate to advanced Rust developers, this book provides clear explanations, hands-on examples, and detailed insights into how GPUs process and render data. You’ll explore everything from the fundamentals of buffers, shaders, and pipelines to advanced topics like deferred rendering, shadow mapping, and GPU compute workloads.

View

GameDev.net may earn a commission if you purchase through these links. This helps fund the site at no extra cost to you.

GameDev.net may earn a commission if you purchase through these links. This helps fund the site at no extra cost to you.
Back to Feed