This article builds on my previous “How to render outlines in WebGL” tutorial. I’ll explain an improved technique that eliminates most artifacts of the previous article, and gives you more control over where exactly the lines are drawn in your geometry. Below is an example of the artifacts with the…

This tutorial covers how to use WebGPU’s timestamp query to measure how much time your GPU commands take to execute. Timestamp queries are an optional WebGPU feature and may not be supported in all implementations. …

The Khronos WebGL/WebGPU meetup is a recurring event where the folks working on these web graphics API’s share updates followed by talks from the community. I’ve summarized highlights from April’s event in this article. For my past event recaps, see January 2022, July 2021. WebGL and WebGPU Updates Ken Russell — Google Kelsey Gilbert —…

The WebGL/WebGPU January talk is up (https://www.youtube.com/watch?v=wYAvVUFQP2M)! I encourage you to watch full video. I’ve compiled my takeaways here (with a focus on WebGPU) so you can skim the highlights & see links to resources mentioned by the speakers all in one place. Event link where you can register for…

The last WebGL / WebGPU meetup was packed with a lot of really exciting content. You can find the full 90 minute recording here. I decided to put together my takeaways here for others who want a quick glimpse of the latest updates, focusing particularly on WebGPU. You’ll find Youtube…

This tutorial will walk you through how to create a web app that visualizes the location of any satellite in real-time, like the International Space Station. We’re going to do this from scratch, using the same techniques a real rocket scientist would! We’ll look at where to get the data…

Sketchfab’s API gives you programmatic access to the largest collection of glTF 3D models on the web. This article walks you through a minimal code example to show you how to: Let your users authenticate with the Sketchfab API Download a 3D model as a zip file containing the glTF …

This article describes how to visualize outlines for a WebGL scene as a post process, with example implementations for ThreeJS & PlayCanvas. Note: I’ve written a follow up that builds on this article with an improved technique that solves many of the artifacts present here. …

Gimbal lock is a common issue that arises in 3D rotation systems. Conventional wisdom says that you should represent your rotations as quaternions to avoid this problem (as stated in many popular game engine docs and countless YouTube videos). …