Web Graphics: SVG, Canvas 2D, WebGL, WebGPU, Three.js, D3.js, Babylon.js and Image Generation APIs

Web Graphics is the sixth volume of the Web Coding Series. You draw a logo and icon set in SVG, build a cover designer on a canvas, write your own shaders and matrices in WebGL 2, sort and cull on the GPU with WebGPU compute shaders, build a 3D scene with Three.js, chart data with D3.js, assemble a complete 3D world with Babylon.js, and generate pictures from a sentence with OpenAI's image API. One project, BookNest, a small online bookshop, runs through all eight chapters, each one drawing it in a new way.

Every figure is a real render. The examples were captured in headless Chrome 154, with WebGPU, Three.js r186 and Babylon.js 9.28 running on an NVIDIA GeForce GTX 1650, and WebGL on that GPU and on SwiftShader, Chrome's CPU renderer. D3 7.9 charts, canvases and SVG are the browser's actual output. The images in the last chapter are what the API returned for real, paid calls, each shown with its prompt, model and cost; the whole chapter spent less than one US dollar. Stable Diffusion was run locally on the CPU, and services that could not be run are described from their documentation and marked as not run here.

What you will learn

SVG: the viewBox, paths, reuse, accessibility, gradients, clipping, masks, filters, text on a path, animation, sanitizing with DOMPurify and optimizing with SVGO.

Canvas 2D: high-DPI drawing, paths, compositing, wrapped text, pixel data, animation, hit testing, and Fabric.js, Konva and p5.js.

WebGL: the pipeline and ANGLE, GLSL ES 3.00, buffers, matrices, lighting, shadow mapping, normal mapping, physically based rendering, deferred rendering, post-processing and debugging.

WebGPU: devices and error handling, WGSL, bind groups and pipelines, textures, instancing, render bundles, compute shaders for sorting, particles and culling, profiling, and porting from WebGL.

Three.js: scenes, cameras, PBR materials, lights and shadows, loaders, animation, raycasting, post-processing, TSL shaders and WebGPURenderer.

D3.js: the data join, scales and axes, shapes, transitions, zoom and brush, dashboards, trees, force layouts, maps, canvas for large data, and Observable Plot.

Babylon.js: the engine and render loop, meshes, PBR and Node materials, glTF, animation, the GUI, Havok physics, particles, the Inspector, audio and WebXR.

Image generation APIs: how diffusion models work, OpenAI's gpt-image models, editing with masks, pricing every call, keeping the key on a server, prompting, C2PA provenance and copyright, alternatives, local models, and 3D generation with Meshy.

Why this book is different

Every figure and image was produced by running the code.

One BookNest project is carried from an SVG logo to a virtual bookstore, so every technology does real work.

It explains what happens under the hood, from how browsers rasterize SVG to how ANGLE, Dawn and the engines turn your calls into GPU work.

Honest comparisons of open-source and commercial alternatives, from PixiJS and PlayCanvas to Chart.js, Highcharts and Midjourney.

Hundreds of listings, renders and tables, six reference appendices and an index of open-source tools.

Ten "Test Yourself!" questions end every chapter, and every answer was produced by running the code.