Garrett Johnson (@garrettkjohnson) / X

Garrett Johnson

2,905 posts

Garrett Johnson

@garrettkjohnson

three.js, graphics, open source, and a bunch of fun projects! Formerly @Woven_Toyota | @NASAJPL

Tokyo, Japan

Joined April 2009

Garrett Johnson
@garrettkjohnson
May 11, 2025
I finally got around to writing GeoJSON parser for threejs. It supports triangulating & extruding polygons, and projecting all GeoJSON types onto an ellipsoid for integration with projects like 3d tiles! 🌎 Repo with demo links below 👇 #threejs #gis #3dtiles #webgl #javascript
00:00
44K
Garrett Johnson
@garrettkjohnson
Apr 20, 2025
This is the 5th or 6th time I've written a topography shader & every time it gets a little bit better & I learn a little bit more. It's a nice challenge for anyone learning about shaders! Some details on the plans for this implementation below 👇 #gis #3dtiles #threejs #webgl
00:00
94K
Garrett Johnson
@garrettkjohnson
May 27, 2025
I've gotten contour and latitude / longitude lines working with ellipsoidal tile sets in 3D Tiles Renderer - demo link below! 🌎✨ #threejs #webgl #3dtiles #gis #cesiumgrant
00:00
00:14
Garrett Johnson
@garrettkjohnson
Apr 20, 2025
This is the 5th or 6th time I've written a topography shader & every time it gets a little bit better & I learn a little bit more. It's a nice challenge for anyone learning about shaders! Some details on the plans for this implementation below 👇 #gis #3dtiles #threejs #webgl
40K
Garrett Johnson
@garrettkjohnson
May 19, 2025
My three-geojson repo now supports internal polygon vertices via constrained delaunay triangulation so extruded shapes can be projected onto an ellipsoid surface with generated smooth normals! 🌎 More below👇 1/3 #threejs #gis #javascript #webgl
00:00
30K
Garrett Johnson
@garrettkjohnson
Jun 20, 2023
The latest release 0.3.19 of 3DTilesRenderer from NASA adds fixes and improvements for rendering Google's photorealistic 3d tiles! That includes a new GoogleTilesRenderer convenience class for easily loading a globe. 1/2 github.com/NASA-AMMOS/3DT… #threejs #webgl #3dtiles #nasajpl
00:00
92K
Garrett Johnson
@garrettkjohnson
Nov 29, 2022
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! 🥟 gkjohnson.github.io/three-gpu-path… #threejs #javascript #webgl #raytracing
00:00
Garrett Johnson
@garrettkjohnson
Mar 30, 2022
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! github.com/gkjohnson/thre… #threejs #graphics #pathtracing #javascript
Garrett Johnson
@garrettkjohnson
Apr 4, 2022
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! gkjohnson.github.io/three-gpu-path… #threejs #webgl #graphics #raytracing
Garrett Johnson
@garrettkjohnson
Nov 23, 2023
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
00:00
38K
Garrett Johnson
@garrettkjohnson
Dec 11, 2023
Here's a demo showing how material properties can be packed into a data texture so thousands of objects with unique material properties can be rendered in a single draw call with #threejs's BatchedMesh. With more effort this can support unique textures, too! 1/2 #gamedev #webgl
00:00
52K
Garrett Johnson
@garrettkjohnson
Apr 18, 2022
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 github.com/gkjohnson/thre… #threejs #webgl #graphics #opensource
GIF
Garrett Johnson
@garrettkjohnson
May 20, 2024
It doesn't look like much here but Ive updated #threejs' BatchedMesh to support instancing in addition to batching including sorting and frustum culling! Here 20,000 items are drawn in a single draw call using only 3 unique geometries- a significant memory savings! 1/3 #webgl
00:00
23K
Garrett Johnson
@garrettkjohnson
Apr 11, 2022
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! github.com/gkjohnson/thre… #threejs #graphics #webgl #raytracing
Garrett Johnson
@garrettkjohnson
Jul 26, 2021
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. gkjohnson.github.io/three-mesh-bvh… #webgl #opensource #javascript #cad #threemeshbvh 1/2
GIF