www.xbdev.net
xbdev - software development
Wednesday November 12, 2025
Home | Contact | Support | WebGL Espresso - A Shot of WebGL Knowledge .... | Little Black Book of Ray-Tracing and Path Tracing The future of computer graphics.....
     
 

Little Black Book of Ray-Tracing and Path Tracing

The future of computer graphics.....

 



Little Black Book of Ray-Tracing and Path-Tracing




Available Amazon



The little black book is both a learning resource and a reference text that provides lots of insigheds and hands-on examples to teach and inspire you! If you're looking to get started - or want to try out something new - this text is definetly for you!

• Key ray/path tracing information
• Develop parallel ray/path-tracing solutions with GLSL (WebGL)
• Lots of hands-on examples (with code) from very basic through to more complex/advanced concepts
• Great resource for building up your portfolio
• Quick reference text (how-to) for times when you've forgotten or need to know how to do something
• ..


Book Example Projects - Starts with Hello WebGL and GLSL Shaders


The examples are grouped into different areas - with links proving a link to the WebGL Lab - so you can tinker with an onlin interactive.



Full Screen Quad


A basic full screen quad - an empty WebGL/GLSL code - full screen quad vertices are created on the vertex shader and the fragment shader interpolates the texture coordinates across the screen (visualized as color).



GLSL 2D Circle


Take things a bit further - and use the texture coordinates to draw a circle in the fragment shader (simple bounding distance check).




Essential Intersection Algorithms


Simple ray-sphere intersection on the GLSL fragment shader - no lighting or frills - just a basic ray-tracer starting point (also the setup code for WebGL).



Ray-Plane Intersection


Ray-tracer intersection test with a ray and plane.



Ray-Rectangle-Plane Intersection


Ray rectangle plane intersection - extends the ray-plane but adds a boundary.



Ray-Intersection (Sphere and Plane) - Multiple Geometry (Depth)


Ray-tracing intersection test for both ray sphere and plane.



Ray-Triangle Intersection


Ray-Triangle Intersection Test.



Classical Ray-Tracing: Minimal Working Example


Classic Ray-Tracer (Ray-Sphere)


Ray-trace a basic sphere.



Ray-Tracer Camera


Ray-Tracer Camera - with Ray-Sphere Test Case.



Classic Ray-Tracer (Reflections)


Classical Ray-Tracer - with Reflection Test (Mirror)



Classic Ray-Tracer (Refractions)


Classical Ray-Tracer with Refraction Test (Glasss)



Phong Lighting


Classic Ray-Tracer with Phong Lighting - Diffuse Test Lighting Test.



Direct Lighting - Hard Shadows


Ray-Tracing Direction Light - Hard Shadows Example (Single Direct Ray)



Direct Lighting - Soft Shadows


Ray-Tracing with Direct-Light - Soft Shadows (using multiple rays).



Refraction & Reflections (metal and glass)


Reflections and Refractions


Ray-Tracing Reflection and Refraction Example.



Fresnel Effect


Ray-Tracing Fresnel Test.



Distributed (Multiple Primary Rays)


Distributed Ray-Tracer


Distributed Ray-Tracing - Primary Rays Only



Distributed Ra-Tracer (Multiple Primary Rays) - Soft Shadows


Distributed Ray-Tracing - Soft Shadows (Primary Rays Only)



Path-Tracing


Ray-Tracer - Feedback Loop


Ray-Tracer - with Feedback Loop (Last Frame Passed onto Next Frame As Image/Texture)



Path-Tracer - Simple Sphere


Path-Tracer - Simple Sphere Example.



Path-Tracer - Materials


Path-Tracer Material (Matt and Gloss)



Path-Tracer - Roughness


Path-Tracer Roughness Test Example.



Scene/Data Management


Triangle Rabbit Mesh (Matt)


Ray-Tracing Rabbit using Triangles (loaded from file)



Triangle Rabbit Mesh (Mirror)


Ray-Trace Triangle Rabbit (using Mirror Material)



Triangle Rabbit Mesh (Texture Buffer for Mesh Data)


Ray-Tracer (Path-Tracer) for the Triangle-Bunny - Triangle mesh is stored in a texture buffer instead of a uniform buffer.



Octree Structure for Triangles


Ray-Tracer (Path-Tracer) - for the triangle mesh (bunny)- but the data is organised as an octree structure.



Octree Structure (Debug Wireframe) for Triangles


Ray-Tracer (Path-Tracer) using Octree for the Ray-Triangle Collisions Detection - Added 'Wireframe' Box (Draw Octree Data)
















101 WebGPU Programming Projects. WebGPU Development Pixels - coding fragment shaders from post processing to ray tracing! WebGPU by Example: Fractals, Image Effects, Ray-Tracing, Procedural Geometry, 2D/3D, Particles, Simulations WebGPU Games WGSL 2d 3d interactive web-based fun learning WebGPU Compute WebGPU API - Owners WebGPU Development Cookbook - coding recipes for all your webgpu needs! WebGPU & WGSL Essentials: A Hands-On Approach to Interactive Graphics, Games, 2D Interfaces, 3D Meshes, Animation, Security and Production Kenwright graphics and animations using the webgpu api 12 week course kenwright learn webgpu api kenwright programming compute and graphics applications with html5 and webgpu api kenwright real-time 3d graphics with webgpu kenwright webgpu for dummies kenwright webgpu wgsl compute graphics all in one kenwright webgpu api develompent a quick start guide kenwright webgpu by example 2022 kenwright webgpu gems kenwright webgpu interactive compute and graphics visualization cookbook kenwright wgsl webgpu shading language cookbook kenwright WebGPU Shader Language Development: Vertex, Fragment, Compute Shaders for Programmers Kenwright WGSL Fundamentals book kenwright WebGPU Data Visualization Cookbook kenwright Special Effects Programming with WebGPU kenwright WebGPU Programming Guide: Interactive Graphics and Compute Programming with WebGPU & WGSL kenwright Ray-Tracing with WebGPU kenwright



 
Advert (Support Website)

 
 Visitor:
Copyright (c) 2002-2025 xbdev.net - All rights reserved.
Designated articles, tutorials and software are the property of their respective owners.