graphics programming

Bilingual

WebGPU Unleashed: A Practical Tutorial
2 months ago
- This free book teaches graphics programming in JavaScript using WebGPU, drawing from the author's personal learning journey.
- WebGPU is a new graphics API that wraps Vulkan, Metal, and DirectX 12, making it simpler, cross-platform, and ideal for beginners.
- The tutorial starts with GPU driver and pipeline overviews, then covers drawing triangles, 2D/3D rendering, and advanced GPU computing.
- It includes interactive online features like videos, linked references, a code playground, and reader feedback via GitHub.
- The final tutorial implements Gaussian splatting rendering, a complex technique combining GPU compute and realistic 3D scene rendering.
Learn WebGPU for C++
2 months ago
- This guide teaches WebGPU for native graphics in C++ from scratch on Windows, Linux, and macOS.
- Users can choose to write WebGPU code from scratch or skip initial boilerplate, and can opt for a C++ styled wrapper (webgpu.hpp) or raw C API (webgpu.h).
- Backend options include wgpu-native (default) or Dawn, selectable via CMake.
- Base code examples range from a simple triangle to a 3D mesh viewer with basic interaction, with additional support for running on the Web.
- Chapter status symbols indicate update level: up-to-date, older version, work in progress, or TODO.
- Contents include Introduction, Getting Started, Basic 3D Rendering, Basic Compute, Advanced Techniques, and Appendices.
Computing Camera Rays
2 months ago
- Transition period: Ray tracing and rasterization coexist in real-time rendering.
- Rasterization often handles primary visibility, while ray tracing adds shadows, reflections, or global illumination.
- Goal: Compute camera rays consistent with rasterization, using world to clip space (view-projection) matrix.
- Clip space uses homogeneous coordinates to simplify perspective projection and division.
- Camera rays defined by origin and direction; origin computed from near clipping plane in world space.
- Bad approach: Compute ray direction via far and near plane points; prone to numerical cancellation.
- Good approach: Use intersection of planes in clip space to compute ray direction robustly.
- Faster solution: Precompute cross products for optimized ray direction calculation.
- Ray parameter at far plane derived via intersection with far clipping plane in homogeneous coordinates.
- Code provided for GLSL and HLSL; integration into renderers discussed with standardization benefits.
Rendering Fonts Quickly on the GPU
2 months ago
- The author is developing a WebGPU animation renderer for web-based animations and implemented a technique for rendering TTF fonts, which recently expired from a Microsoft patent.
- TTF fonts use glyphs composed of paths and quadratic splines defined by start, end, and control points, with paths having clockwise or counterclockwise directions for filling or cutouts.
- The rendering technique by Loop and Blinn uses triangles to represent splines on the GPU, allowing shaders to efficiently determine pixel inclusion based on UV coordinates, enabling high-resolution font rendering without complex calculations.
Writing a bindless GPU abstraction layer
3 months ago
- Sebastian Aaltonen's blog 'No Graphics API' inspired the Loon GPU project, which simplifies modern graphics APIs by using GPU pointers everywhere, eliminating buffer objects, vertex buffers, and explicit bind groups.
- Loon GPU provides a pointer-first API where GPU memory is allocated via malloc and freed with free, supporting different memory types (CPU-mapped, GPU-local) and uses device pointers for shader arguments, with internal buffer creation in Vulkan and Metal backends.
- Shaders are designed to be bindless, with inputs from a single pointer, but face challenges in cross-platform compatibility, especially with Slang for Vulkan and Metal, requiring workarounds for push constants and threadgroup sizes.
- Bindless textures and samplers are natively supported in Metal, while Vulkan uses a large binding set with descriptor indexing, removing the need for explicit image layout transitions by using general layout and handling initialization globally.
- Limitations include unsupported features like decoupled blend state and split barriers due to backend constraints, with future plans for debug support, example expansion, and potential backend improvements via Vulkan extensions.
What to learn to be a graphics programmer
3 months ago
- Graphics programming involves two main areas: CPU-side learning (modern explicit APIs like DirectX12/Vulkan/Metal and engine programming) and GPU-side learning (math of lighting/shading, rendering techniques, and performance optimization).
- Start with simpler APIs (e.g., OpenGL, WebGL) for GPU focus or basic triangle rendering for CPU focus. Path tracing (via 'Ray Tracing in One Weekend') and Physically Based Rendering (PBR) are key for realistic rendering and asset consistency across lighting conditions.
- Build a portfolio with: an engine-like renderer in C++ using modern APIs with PBR lighting and effects, a path tracer for photorealistic images, and bonus integration for verification.
- Essential math includes linear algebra, trigonometry, and some calculus. Algorithm basics (data structures, sorting) are needed, with C++ as the primary language for CPU-side and HLSL/GLSL for shaders.
- ML has limited practical use in programming now but may be useful for learning math/algorithms. The future may bring advanced AI, but current LLMs are like a rehearsal.

graphics programming

WebGPU Unleashed: A Practical Tutorial

Learn WebGPU for C++

Computing Camera Rays

Rendering Fonts Quickly on the GPU

Writing a bindless GPU abstraction layer

What to learn to be a graphics programmer