Garrett Johnson

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

GitHub - gkjohnson/closed-chain-ik-js: A generalized inverse kinematics solver that supports closed chains for parallel kinematics systems, dynamic reconfiguration, and arbitrary joint configuration b... A generalized inverse kinematics solver that supports closed chains for parallel kinematics systems, dynamic reconfiguration, and arbitrary joint configuration based on damped least squares error m...

You can check out the project here:

github.com/gkjohnson/cl...

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

3d map 2500km² running on three.js and 3dtilesrenderer Hello, A side project I’ve been working on for past few years. 3d maps covering 2500km² running on amazing library developed by @gkjohnson. There still are pretty much no real features, b...

Check out the post here!

discourse.threejs.org/t/3d-map-250...

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

GitHub - gkjohnson/three-edge-projection: Visible geometry edge projection and flattening based on three-mesh-bvh. Visible geometry edge projection and flattening based on three-mesh-bvh. - gkjohnson/three-edge-projection

From this repo: github.com/gkjohnson/th...

3/3

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

YouTube video by theropod Mars Rover Blooper Reel

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

GitHub - gkjohnson/three-jumpflood-demo: Demonstration showing real time effects and application of the "Jump Flood Algorithm" Demonstration showing real time effects and application of the "Jump Flood Algorithm" - gkjohnson/three-jumpflood-demo

github.com/gkjohnson/th...

These are some of the more basic effects you can make, I think, but these are outline & glow effects made with the Jump Flood SDF buffer - link to the repo below! 👇

#threejs #webgl #gamedev

The Quest for Very Wide Outlines An Exploration of GPU Silhouette Rendering

Big thanks to @bgolus.bsky.social for a great write up on the topic, as well!

bgolus.medium.com/the-quest-fo...