Garrett Johnson
@garrettkjohnson
Followers
4,059
Following
2,491
Media
384
Statuses
2,124
@Woven_Toyota | @NASAJPL | #threejs , graphics, open source, and a bunch of fun projects!
Tokyo, Japan
Joined April 2009
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Olympics
• 1539077 Tweets
Venezuela
• 864615 Tweets
#OpeningCeremony
• 739667 Tweets
オリンピック
• 405946 Tweets
Celine Dion
• 363314 Tweets
Francia
• 294804 Tweets
フランス
• 180201 Tweets
Gojira
• 166383 Tweets
Christians
• 150890 Tweets
Satanic
• 144845 Tweets
Last Supper
• 138621 Tweets
Christianity
• 97806 Tweets
Beyoncé
• 76393 Tweets
Marie Antoinette
• 65772 Tweets
マリーアントワネット
• 37741 Tweets
#Smackdown
• 32354 Tweets
Jordan Love
• 30645 Tweets
隅田川花火大会
• 25077 Tweets
Britney
• 24205 Tweets
Sodoma y Gomorra
• 23470 Tweets
Mahoma
• 22689 Tweets
Packers
• 20957 Tweets
エッフェル塔
• 20831 Tweets
聖火の人
• 19532 Tweets
#BlessCampaign
• 16994 Tweets
セリーヌ・ディオン
• 15160 Tweets
愛の讃歌
• 14825 Tweets
Maomé
• 12588 Tweets
Pumas
• 10691 Tweets
Pinned Tweet
I've started a
@Github
Sponsors page to help support my open source contributions to three.js related projects like three-gpu-pathtracer, three-mesh-bvh, threejs-sandbox, and others!
Sponsor here!
#threejs
#graphics
#opensource
#github
#javascript
1 / 3
2
25
152
Path traced videos rendered with three.js? Yes! I've just added a new example that shows how to render three-gpu-pathtracer frames into a video so you can save out high quality animations!
Heres the demo! 🥟
#threejs
#javascript
#webgl
#raytracing
5
49
377
A quick preview of the three.js pathtracer material progress! Metalness, opacity, and glossiness are just about done. Still some work to go on transmission, emission, and alpha cutout, though. Demo soon!
#threejs
#graphics
#pathtracing
#javascript
11
45
373
Got transmission working in three-gpu-pathtracer over the weekend! Its just using hemisphere sampling for the refracted direction but it looks nice. Might need some help getting GGX transmission going in the future!
#threejs
#webgl
#graphics
#raytracing
7
42
365
BatchedMesh will be in
#threejs
core in r159! This includes support for frustum culling, raycasting, object sorting, multidraw, & more!
Here's an updated version of the tiles demo rendering only visible triangles using multidraw with 1 draw call.
#gamedev
#webgl
#javascript
7
39
342
A new version of three-mesh-bvh has been released with support for converting skinned and morph target meshes into a static geometry so a BVH can be generated for animated geometry! More on perf and how below 👇
1/4
#threejs
#webgl
#graphics
#opensource
2
40
325
The initial version of three-gpu-pathtracer has been released on npm! Looking forward to seeing what people make with it. Please share! And as always contributions welcome and encouraged!
#threejs
#graphics
#webgl
#raytracing
6
55
324
Someone on the
#threejs
forum had the idea to use three-mesh-bvh to accelerate finding clip edges which brings the time to find the edges on this 2m polygon model down to real time speeds.
#webgl
#opensource
#javascript
#cad
#threemeshbvh
1/2
2
44
312
I wouldn't normally share personal achievements but I'm incredibly proud of this - I was recently awarded a NASA medal for my contributions to robotics 3d visualization at
#NASAJPL
including Mars 2020! Of course most of that work over the years has been in threejs & unity3d 😁
23
10
281
Did some experimenting with translucency awhile ago and came up with this. Thickness is from rendering the front and back of the model iteratively using depth peeling so you can see through the model to other parts of the mesh.
#threejs
#webgl
#javascript
9
33
239
Three-gpu-pathtracer will get an official three.js example in the next release!
#threejs
#webgl
#graphics
#raytracing
6
23
233
I just added a demo showing how a mesh can be quickly voxelized using three-mesh-bvh! Box queries are used to detect the geometry shell (white) and raycasts are performed to determine inner, solid voxels (yellow) 1/2
#threejs
#graphics
#webgl
#javascript
7
48
209
Its not perfect but a BVH can be used to quickly perform a rough ordering on particles. Compared to the radix sort in
#threejs
its ~60% faster at 1mil points & ~130% at 5mil. Time complexity grows closer to linear
Could be useful for
#GaussianSplatting
?
1/3
#javascript
#webgl
5
11
206
Support for transparent materials with attenuation has been added into three-gpu-pathtracer! So now you can more accurately render colored glass, acrylic, and other transmissive materials using the three.js MeshPhysicalMaterial🐉
#threejs
#raytracing
#webgl
#graphics
7
23
202
A fast mesh SDF generation demo has been added to three-mesh-bvh! SDFs are great for volume rendering, particle animation, lighting effects, bunny inflation, & more! GPU gen can be 10-50+ times faster than CPU gen, too!
#threejs
#webgl
#raymarching
6
27
199
Another sketch - this time combining both the curl noise sampling and here geometric surface walking. It gives a very nebular or constellation feel to it ✨🦀
#threejs
#webgl
#generative
#art
#spacecrab
7
21
182
Here's a proof of concept
@threejs_org
shader debug tool I made awhile ago that lets you see the visual output of intermediate variables by clicking them and inspect the unclamped integer, float, or boolean value at any pixel.
#webgl
#threejs
#javascript
6
18
177
I've just published three-bvh-csg on npm in an effort to make it easier to use and improve visibility! There are still quirks with it but I would still love some help with the project if there are people interested!
#threejs
#csg
#webgl
#javascript
5
17
177
I've released a repo that uses three-mesh-bvh to flatten visible edges to a set of line segments for scalable, svg-like drawings! It contains a number of improvements over the bvh example page for generating lines 👇
1/3
#threejs
#webgl
#javascript
#cad
5
19
174
Check out the 3DTilesRenderer for
#threejs
we open sourced from
@NASAJPL
to load and render the 3D Tiles format by
@CesiumJS
along w/ sample data from Mars. Great for rendering large detailed environments!
Check it out here
#webgl
#opensource
#javascript
5
39
175
three-gpu-pathtracer v0.0.7 has been released! This version includes some big material improvements including transmission attenuation, diffuse brightness fix, vertex colors, and more!
Release notes here🦀
#threejs
#raytracing
#webgl
#graphics
#crab
2
27
174
I've gotten some of the final quirks worked out of the fog material for three-gpu-pathtracer including the fireflies which were from subsequent specular hits.
Demo here!
1/2
#threejs
#webgl
#raytracing
#javascript
#graphics
5
13
175
This is from awhile ago but I put together a
#threejs
loader that can parse models from
@valvesoftware
's 2013 source engine!
TF2 & Portal were some of my most played games in college so this was fun to put together.
#webgl
#gamedev
#sourcefilmmaker
1/4
5
17
173
three-gpu-pathtracer v0.0.13 is now out! This version includes iridescence & sheen quality fixes as well as improved perf w/ early path termination & quilt rendering for multi-view displays!
Notes:
#threejs
#webgl
#raytracing
#graphics
#holograms
1/2
2
22
168
Check out the "three-mesh-bvh" package I maintain for
@threejs
to greatly improve raycast performance against complex triangle meshes or perform other fast spatial queries.
#webgl
#threejs
#javascript
1
26
158
Fog volumetrics coming in three-gpu-pathtracer, next! This is an image with a fairly bright spotlight & volume filling the whole space.
It adds a lot of bounces & variance to the scene so its more intensive + requires more samples but its a nice effect
#threejs
#raytracing
4
6
154
With thin film transmission support now in three-gpu-pathtracer you can finally render realistic cellophane crabs! 🦀
#threejs
#webgl
#graphics
#raytracing
#crab
1
21
152
The new version of three-mesh-bvh (finally) gets Surface Area Heuristic working so you can get a bit more performance if needed. I've also added a demo so you can look at how the settings affect the BVH.
#webgl
#threejs
#javascript
#opensource
#graphics
4
31
148
And here's the
@PI_Physik_Inst
hexapod animating using the closed-chain-ik project as a parallel kinematics solver! The IK keeps all joints connected and solves for the hexapod platform position goal.
Demo here:
#threejs
#robotics
#webgl
#javascript
#ros
2
20
147
Three-gpu-pathtracer v0.0.5 has been released! This version includes area lights, clearcoat material, equirect camera rendering, and more!
#threejs
#raytracing
#webgl
#javascript
#graphics
5
22
147
Recently released v0.4.0 of "three-mesh-bvh" for
@threejs
and added a basic sculpting example inspired by tools like SculptGL and ZBrush.
Anyone want to try for WebXR sculpting?
Demo here:
#webgl
#threejs
#javascript
#opensource
#threemeshbvh
1 / 3
4
28
144
Got emission, glossy filtering, & alpha test added to the three-gpu-pathtracer materials! Here's a live demo so you can play around. Transmission is next & then I'll start playing with some more fun models😁
#threejs
#graphics
#pathtracing
#javascript
4
18
143
v0.0.9 of three-gpu-pathtracer is now released! This release includes bug fixes as well as support for flat shading & owen-scrambled sobol for improved sample stratification leading to faster image convergence!
#threejs
#webgl
#raytracing
#graphics
3
19
145
Three-mesh-bvh v0.5.3 has been released! New additions include improved SAH build time, ability to track and display progress percentage when building the BVH in a worker, and a bug fix to the "bvhcast" function.
#threejs
#webgl
#raycasting
#opensource
3
20
140
I put together an interactive CSG project on top of three-mesh-bvh. Theres still a good amount of room for performance improvement, I think - some help would be appreciated if people are interested!
#threejs
#webgl
#gamedev
#javascript
#csg
1/4 👇
3
30
136
Thanks to
@robertoranon
, three-gpu-pathtracer now has significantly improved support on for iOS devices!
It turns out the platform was incorrectly reporting that f32 textures supported blending & interpolation so we now use f16 textures where necessary.
#safari
#threejs
#webgl
4
8
134
The second version of three-gpu-pathtracer has been released! It includes some API adjustments, depth of field support, deformable geometry support, in addition to a number of new demos!
#threejs
#graphics
#webgl
#raytracing
#javascript
#opensource
#3d
4
29
130
Support for configurable geometric bokeh and depth of field has been added to three-gpu-pathtracer! Here are some renders with really juiced up DoF to get that small toy effect and action figure nostalgia. 1/2
#threejs
#webgl
#graphics
#raytracing
7
23
129
Another test model for three-gpu-pathtracer - this time with gem and jewelry rendering!
#threejs
#webgl
#javascript
#3d
#raytracing
#opensource
6
12
129
I just released v0.0.3 of three-gpu-pathtracer! It includes a variety of improvements like env map importance sampling, transparent backgrounds, improved mobile support, and more!
#threejs
#graphics
#webgl
#raytracing
#javascript
#opensource
#3d
1/2
3
30
129
More curl crab sketches - this time with some interactivity. Brush and click your mouse over the model to spawn trails ☄️🦀
#threejs
#webgl
#generative
#art
#crab
0
16
129
I added a new three-mesh-bvh demo for an
@ifc_js
use case that projects visible edges onto the ground plane. The edges are clipped by tris above - using a BVH to find tris improves perf by multiple orders of magnitude!
#threejs
#graphics
#javascript
1/3
3
19
125
I got the new PBR materials working with the Lego LDraw models in three-gpu-pathtracer. The added shine from the specularity adds a lot to the "Lego" look, I think 😁
#webgl
#threejs
#javascript
#opensource
#raytracing
#lego
9
22
117
Using 3DTilesRendererJS for
#threejs
and Google's tiles API to make desktop-sized dioramas of geographic locations on Apple's Vision Pro emulator - I'm excited to see more of this kind of work!
Experimenting with a Google 3D tile-based diorama mode to bring and built location-based AR experiences within Apple Vision Pro – even when you are not physically on site. Interested in beta testing (available for other Apple platforms as well)?
10
66
360
2
12
117
I'm starting a basic cpu path tracing demo on top of
#threejs
and three-mesh-bvh referencing
@Peter_shirley
's raytracing books and PBR book. I'll keep a thread here of progress along the way and hopefully a fun live demo at the end!
#webgl
#raytracing
#javascript
#graphics
1
16
110
Took a look at surface sampling points with blue distribution for meshes. This technique starts with a larger set of random points and then removes points from clusters to give a better distribution.
#threejs
#generative
#art
#webgl
2
11
115
I grabbed some LDraw Lego models from my childhood era to render with three-gpu-pathtracer and using volume transmission for the translucent parts really looks amazing. The models look so good!
#lego
#threejs
#ldraw
#raytracing
#javascript
12
14
114
@charlesforman
was kind enough to put together this awesome interior model with emissive lights to test three-gpu-pathtracer. I think it nails the "ray tracing test scene" look.
Live demo here:
#threejs
#webgl
#raytracing
#javascript
4
12
113
I've gotten env map importance sampling working in three-gpu-pathtracer! It prioritizes light contributions from hotspots so images resolve much faster and we can get sharp shadows & reflections now, too.
#threejs
#javascript
#webgl
#raytracing
#graphics
2
17
110
I added a demo showing how three-edge-projection can be used to produce a topdown floor plan from a model as well as a silhouette backdrop of the shape. Not as robust as working from original CAD but still a nice result!
#threejs
#webgl
#javascript
#bim
4
9
110
Made some progress on progressive ambient occlusion map generation for three-gpu-pathtracer! Now we just need to unwrap UVs and bake results to a texture. Right now it's just a rasterized mesh using PT for occlusion.
#threejs
#webgl
#raytracing
#graphics
5
11
109
With the recent addition of skinned mesh baking to three-mesh-bvh we can now render animated geometry in the path tracer!
Morph target geometry, as well!
1/2
#threejs
#webgl
#raytracing
#graphics
4
16
107
Coming in at just over 150 lines of code - I've added a simple example for three-gpu-pathtracer. This should serve as a good place to get started if anyone wants to start building their own viewer!
#threejs
#webgl
#raytracing
#graphcis
4
16
106
Some new upcoming material properties for the next release of three-gpu-pathtracer from
@richardassar
(iridescence, sheen) and myself (specular color). The new features keep coming!
#threejs
#raytracing
#graphics
#webgl
2
16
105
I've just released three-mesh-bvh v0.7.1, adding support for ParallelMeshBVHWorker which parallelizes BVH generation over multiple web workers. I'm generally seeing over 2x perf improvement and over 4x when using the SAH split strategy! 🚀
1/2
#threejs
#webgl
#javascript
4
14
105
I've made my three-mesh-bvh path tracing sandbox public and added a live demo of the Lambertian path tracing with environment map lighting, tiled rendering, texture support and more!
You can see it here:
#threejs
#pathtracing
#raytracing
#webgl
#graphics
2
15
101
I've added another demo page to three-gpu-pathtracer that lets you view all of the materials from
@AntonPalmqvist
's awesome "" PBR material database including blood, chocolate, brass, and more!
Demo here
#threejs
#webgl
#raytracing
1
14
100
Here's a fun demo I worked on awhile ago with edge outlines achieved by toggling lines in a shader based on the angle between adjacent faces and camera pos. It gives a nice crisp, stylized render.
#threejs
#javascript
#webgl
#opensource
#cad
#npr
1/2
1
17
100
Three-gpu-pathtracer revision 14 is out! This release brings the addition of support for volumetric fog and some small performance improvements!
Changelog here:
#threejs
#webgl
#raytracing
#javascript
1
19
102
Another great test scene for three-gpu-pathtracer -- I really like this one. A lot of great transmissive materials and a fun concept! v0.0.1 release coming soon!
Demo is here:
#threejs
#graphics
#raytracing
#javascript
5
12
98
Over on the forum Prisoner849 once again puts together an amazing procedural animation using three.js and three-mesh-bvh!
Live animation is here:
And forum post is here:
#webgl
#threejs
#graphics
#animation
#proceduralart
2
11
98
Phenomenal work again from
@JustASquid
adding equirectangular rendering to three-gpu-pathtracer! You'll now be able to render out environment maps using the package.
See it in action here (change the camera mode):
#threejs
#graphics
#raytracing
#webgl
2
12
96
Here's a live demo of the diamond rendering from
@N8Programs
! It supports adjusting the material index of refraction and number of internal bounces. Amazing stuff!
#threejs
#webgl
#raytracing
#graphics
I love seeing work like this from people - N8Python from the three.js Discord put this awesome rendering of internal gem reflection together using three-mesh-bvh shader raycasting functions to get this really great effect!
#threejs
#webgl
#raytracing
#graphics
4
4
86
1
15
91
Thanks to
@JustASquid
we now support orthographic rendering in three-gpu-pathtracer! Great for these isometric diorama-style scenes!
Demo here! Turn on ortho rendering in the settings:
#threejs
#graphics
#rendering
#raytracing
#webgl
#javascript
2
26
87
v0.5.18 of three-mesh-bvh has been released! It includes a GPU closestPointToPoint function which can be used to generate SDFs & more!
The attached image shows layers of a 3d volume texture with signed distances to a mesh.
#threejs
#webgl
#raymarching
5
10
93
There's some really amazing work on Area Lights & Spot Lights from
@noerihuisman
&
@richardassar
coming to three-gpu-pathtracer. Their PRs add some nice new lighting capabilities to including support for more realistic IES light profiles!
#threejs
#graphics
#webgl
#raytracing
0
9
86
Three-gpu-pathtracer has been added to the
@modelviewer
fidelity tests page! Now we can see track improvements and capabilities relative to other projects as new test models get added. Thanks to
@EmmettLalish
for the support in getting this merged!
2
7
91
Background transparency is now working in three-gpu-pathtracer! I used a custom alpha-weighted color blend to prevent a "halo" of bg color from appearing around the model - more below 👇 1/2
Set the bg alpha here:
#threejs
#raytracing
#webgl
#javascript
7
13
88
three-gpu-pathtracer v0.0.8 has been released! There are memory fixes, ability to provide a separate background image, QoL improvements, and significant quality improvements to specular lighting!
Release notes here
#threejs
#raytracing
#webgl
#graphics
2
17
91
A no-frills (fewer frills?) internal gem refraction demo has been added to three-mesh-bvh so users can more easily dig in and see how it all works 💎✨ Thank you to
@N8Programs
!
Check out the demo here:
#threejs
#webgl
#raytracing
#graphics
2
11
87
Circular area lights are now supported in three-gpu-pathtracer thanks to another amazing PR from
@richardassar
! More great updates coming, as well!
Check them out in the settings here:
#threejs
#webgl
#raytracing
#graphics
3
11
85
I love seeing work like this from people - N8Python from the three.js Discord put this awesome rendering of internal gem reflection together using three-mesh-bvh shader raycasting functions to get this really great effect!
#threejs
#webgl
#raytracing
#graphics
4
4
86
Support for AgX tone mapping is almost in
#threejs
! This is based on the Filament implementation which is based on Blender's new AgX tone mapper. This aligns the look of three.js' tonemapping more closely to Blenders results.
left: Linear sRGB
right: AgX
1/2
#webgl
#javascript
5
14
88
After years of wanting to I've finally taken a dive into curl noise and made some curl marbles to start. Nothing to crazy but it's fun to see it working.
New seed on refresh ☝️
#threejs
#generative
#art
#webgl
#marbles
4
8
86
Three-gpu-pathtracing v0.0.6 has been released! This version comes with some significant lighting improvements including spotlights and circular area lights, sheen & iridescence material property support, and more!
#threejs
#raytracing
#graphics
#webgl
4
17
87
Three-mesh-bvh v0.5.1 has been released! It includes the addition of type def files and the recent shader-based raycasting functions that enable gpu path tracing. Looking forward to seeing what people make!
#threejs
#shaders
#pathtracing
#graphics
1
11
84
It's a bittersweet moment but after 10 of the most gratifying years of my life - last week was my last day at
#NASAJPL
. Over the next month I'll be moving to Tokyo and starting at
@WovenPlanet_GL
working on the city of the future!
I'm very excited to see what this brings🗼✨
9
0
82
Another curl noise piece -- this time with trails walking along a spherical surface. The points are initialized with a blue noise distribution but I don't know if it makes a huge visual difference over just randomness.
#threejs
#generative
#art
#webgl
4
8
81
Revisiting the three-mesh-bvh gpu path tracer with an interior scene. These images took ~1 min to render at 30 samples per second with ~2k samples and env map lighting. It's amazing how good just a lambert render can look.
1/2
#threejs
#pathtracing
#webgl
#graphics
#shaders
5
8
82
Of course I had to render Perseverance and Ingenuity from
@NASAJPL
with three-gpu-pathtracer. My worlds collide! I love the way the materials look on these models.
Rover:
Helicopter:
#threejs
#graphics
#javascript
#raytracing
3
13
78
Trying to decide which is better - resetting the rand seed on change resulting in stable noise as the camera moves or continuing to change the seed resulting in moving noise. You can try both w/ the resetSeed setting:
#threejs
#raytracing
#graphics
1/2
10
7
78
three-gpu-pathtracer v0.0.17 has been released! The big changes are that the pathtracer now runs on MacOS & Android, again, after platform issues.
Hopefully the more volatile shader features can be carved out so it's more consistent over time!
1/2
#threejs
#raytracing
#webgl
5
10
78
What an amazingly crafted experience! Definitely a showcase of what's possible on the web. And using three-mesh-bvh for physics and collisions for movement to boot! 🦥
2
6
77
three-gpu-pathtracer v0.0.4 has been released! Thanks to a number of really quality contributions from community members
@JustASquid
,
@CantBeFaraz
,
@alvinghouas
&
@richardassar
with more to come!
#threejs
#raytracing
#webgl
#graphics
#javascript
2
15
74
