Got the path tracer running on mobile with 16-bit output using Kahan-summation & residuals packed into 8 bits. I'm a bit worried about precision loss so I'll probably replace this with something else. But it still looks quite good on these simple scenes! 🦀
#threejs #raytracing #webgpu #javascript
Happy to report that Lego LDraw models are working
#threejs #raytracing #webgpu #lego
Per-instance color support 🫧
Here's a look at the TLAS BVH used for rendering. The geometry & TLAS BVHs are packed into a single storage buffer and traversed in the compute buffer for raytracing -
Using the recently-added "ObjectBVH", geometry instancing is also now supported. So complex scenes like these can finally be rendered without merging it all into a single geometry ✨
#threejs #raytracing #javascript #webgpu
Environment map sampling & backgrounds are now supported in the WebGPU path tracer! Slowly but surely we're getting features ported over. Thanks to "TheBlek" for getting this added!
#threejs #webgpu #javascript #raytracing
We have a first pass at a wavefront path tracer! You can see the artifacts of thread groups pulling rays off the ring queue to trace in this slowed down video.
It's not much, yet, but Im excited for what this will bring in terms of performance scalability✨
#threejs #raytracing
Spent some time today looking into WebGPU support for three-gpu-pathtracer - compute is going to make this a lot easier than WebGL. Looking into Wavefront Pathtracing next ✨
Thanks to "TheBlek" on Github for helping to get this started!
#threejs #raytracing
I revisited my parallel IK system for the first time in awhile to make some ergonomic improvements & got perf improved by over 50% in some cases 🦾🤖
I still have some more improvements in mind, though, when I have some more time. Repo link below 👇
#threejs #webgl #robotics
Some amazing work by Jure Triglav putting WebGPU compute and three-mesh-bvh through their paces to render surfel-based global illumination! I'm looking forward to seeing what's coming in the web in the coming years.
juretriglav.si/surfel-based...
#threejs #raytracing #webgpu
User "web3d" over on the threejs forums using 3d-tiles-renderer to display some awesome drone scan data processed into tiles 🗺️
#threejs #gis #3dtiles
Using the same scene-wide BVH you can run accelerate frustum culling, as well. With this 500,000-instance BatchedMesh culling runs in less than 1/8th the time 🚀
#threejs #gamedev
With the recent three-mesh-bvh changes you can finally make a full scene-wide BVH to accelerate physics, raycasting, etc. And at some point Pathtracing 😁
Its just a prototype so far but it "just works" with objects and batched instances in a single structure.
#threejs #gamedev
The SkinnedMeshBVH will work with morph target meshes, as well. It's available in the three-mesh-bvh examples directory for now but I may move it to the core package if there's interest.
Demo here:
gkjohnson.github.io/three-mesh-b...
2/2
With the new abstractions in three-mesh-bvh, making a custom BVH is easier than ever! SkinnedMeshes can now have one created directly, leading to an over 2x perf improvement on update vs creating a new static mesh. 🚀
What else needs a BVH?
1/2 👇
#threejs #webgl #gamedev
See the new LineBVH demo here:
gkjohnson.github.io/three-mesh-b...
3/3
It took a lot of refactoring but the new BVHs support accelerated raycasting and custom shapecast queries all with the same underlying construction logic and settings.
Hopefully some more BVH types coming soon ✨
2/3
It's been a long time coming but the latest version of three-mesh-bvh brings support for out-of-the-box Line & Point cloud BVH support! Now all your geometries can be fast 🚀
1/3
#threejs #webgl #javascript
Last year I was also experimenting with @gkjohnson.bsky.social's blue noise sketches, but with my usual subsurface scattering and motion blur.
alien.js.org/examples/thr...
#threejs #webgl #shader #bluenoise #motionblur
I've tried pushing versions that don't bundle the code (using import maps), adjusting epsilon values, made sure I'm running the exact same code, etc. This happens in Firefox & Chrome. Is there anything that GHPages or a static server could be doing to the file to cause this?
2/3
Im seeing a difference in behavior with deployed code on @github.com pages vs the same files locally. Has anyone seen this before?
Left is edge generation run locally & right is on Github pages from one of my #threejs projects. Notice the extra lines.
1/3 👇
#webgl #javascript
Thanks to amazing work from "SoftwareMechanic" on Github, the 3DTilesRendererJS project now supports GeoJSON overlays!
Perfect for draping GIS datasets - region outlines, property boundaries, or GPS paths - onto any 3D Tiles data set 🗺️✨
#threejs #gis #3dtiles #maps #javascript
More graphic screenspace SDF effects 🐔🤖
#threejs #webgl #gamedev #realtimeVFX #javascript
Taking a dive into Bezier curves for fast SVG & font rendering. The curves are evaluated in a fragment shader so they're resolution independent with single-pass antialiasing📈
Cubic curves next! Though it looks a bit more complicated...
#threejs #webgl #gamedev #javascript #svg
Here's the blooper version I mentioned. (I have no idea who the uploader is or how they got a copy of this. But I am glad that it survives.)
Thanks to @mrdoob.com, three-gpu-pathtracer now includes a drag-and-drop viewer for binary glTF files 🚀 I've added a link to the viewer in the repo!
#threejs #webgl #raytracing
