Jonathan Lahue

Illustration of my website, with a cat shaped mountain, a yellow field, and distant lands. A small rectangle is overlaid to represent the screen.

A depiction of rendering chunks. Hexagonal chunks that intersect with the screen are rendered, while chunks that aren’t visible on screen aren’t rendered.

It might even get *faster* once I set up chunking.

Right now, most everything is rendered, even if it isn’t on screen. (If even one instance is visible, the whole instanced mesh is rendered)

By splitting the world into chunks, most areas that aren’t visible won’t be rendered at all.

🌳🌻🐈 Got entities hooked back up! Shields are holding at 100-120 FPS (up from about 10-12).

Billboarding might be tricky since I can't just run lookAt() on every mesh anymore, but I'm not too worried.

Can't wait to hook back up interactions + fall detection so I can merge this!

it's also such a perfect gesture to symbolize resignation, "i'm out," etc, I bet it gets adopted by humans. kids miming taking their headset off when particularly exasperated, occasionally falling over for extra emphasis

New Bruno portfolio just dropped! 🎉 The level of detail and interactivity is *chefs kiss*!

A 3d world comprised of hexagonal tiles. There's grass, darker grass, and rocky outcrops that can be seen, as well as structures in the distance.

Terrain rendering is back up and running, and it's still fast! 😌

It's limited by the CPU clock speed right now; even my laptop is struggling 🙃

I should have a fix out in the next few weeks; it's a pretty big change though!

Thank you! 😊 I'm curious, did any part of the phone experience in particular feel more difficult?

JCLaHoot (maybe one day I'll have an alt!)

A barren version of my website showing only blank white tiles, stacked and making up terrain.

my website, a 3D landscape of terrain with trees, grassy areas and rocky outcrops. A lush canopy surrounds a grassy area in the centre.

a FPS counter showing 60 frames per second.

a git client screenshot showing a new performance branch. The last commit has a hedgehog emoji, an air "whoosh" emoji, and 5 fire emojis, followed by "FUCK YEAH!..."

Take that, inertia!!!

I'm rendering MORE tiles (I broke occlusion culling lol), and at 60FPS too!

Gotta go fast! 🦔💨🔥🔥🔥🔥🔥

Hello Sabrina's publicist! I am also on David!

A peek at the Renderer object in the console, showing 12000 draw calls and 200000 triangles being drawn.

I finished enough courses on shaders and instanced meshes to start applying what I learned.

It's a big refactor, and I'm feeling a lot of resistance. I have to remind myself that I've done this kind of thing before! 😤

These 12K draw calls per frame won't fix themselves!

The lobby of the zine coop party, where you walk around as a virtual avatar and explore zines from all around the world. The building is a pixel art, industrial setting, with books, billboards, and instructions on various surfaces. you can also use the live chat.

Khoa is displaying his zine at the Zine Coop Virtual Party right now 🎈📚🥳 party.zinecoop.org

It's really fun! you have your own avatar, and you can walk around and, read zines, and chat with different people at the expo!

A good Christmas playlist has all the classics, as well as a bunch of unhinged really weird ones thrown into the mix. 🎄

Shader math is fun 😛

I don't currently know how to do this, so I'm following @bruno-simon.bsky.social's Threejs Journey course!

Instanced meshes come with some architecture changes, so I'll also have to learn about 🏖 shaders 😎 to recreate what I've built so far.

This is one of the first shaders I wrote! 💙🩵🩷

The workaround is to use something called InstancedMeshes instead of regular meshes.

Instanced meshes are bulk orders of similar meshes. So I could theoretically turn my 10-15K draw calls per frame into just 2!

An angry (but cute) CPU on the left, and a cute GPU on the right. The CPU has tons of speech bubbles, saying: Plz draw triangles. More triangles! Tryangles!! Where are my triangles?!? (repeated 100000 times per second) The GPU is saying: Lalala. I love drawing triangles! It's so easy! Lalala. Does CPU know that I do bulk orders lol???

In ThreeJS (what I use to make my site 3D), you use meshes made of triangles to represent objects in a scene. 
📐

*Every single mesh* is a draw call to the GPU.



On my site, the CPU is yelling “DRAW MORE TRIANGLESSS!” to the GPU hundreds of thousands of times per second! 😅

A large field with hundreds of sunflowers and a white windmill with a blue roof in the middle. The field can be seen through a break in the treeline.

To the left is a field of sunflowers with a windmill in the middle. To the right is an elevated forest, with a path leading up to it and a waterfall. At the highest point is a rocky outcrop, with a flag on it. The flag is white with a pink heart in the middle.

🔥🌻 So, I may have sunflowered too close to the sun!🌻🔥

After building an editing tool to add content to my website, the number of objects and tiles increased quite rapidly. The CPU does *not* like that, and now things are slow. 🐢

Let's try to fix it! 🧵...

An embroidery hoop containing an embroidered aerial view landscape inspired by vibrant Autumn woods. It depicts trees rich in oranges, reds and golds, winding blue streams, a country lane and wild moorland animals.

I've now opened a raffle for this embroidery landscape - direct link below! The listing has full details for the reason and how to enter, the process, etc. This is a vital moment for me so any post engagement/shares will be extremely helpful! victoriaroserichards.co.uk/collection/a... #art

There are so many courses with substantial Black Friday sales, so now is your chance to get your hands on them, support the creators, and upskill.

Stock up now while they're all so heavily discounted, and you'll have great content to sink your teeth into year-long.

🧵 Some of the best:

Not me posting this and immediately noticing that I forgot to fix the peaking audio 😅 REUPLOADING

A view of a yellow couch, a carpet, and a projector screen, showing the words "cutting your losses" on a moody background. There's trees and greenery in the distance.

highlight on a media area with a yellow couch and a screen. In the surrounding area there are trees, a fountain and a post office.

📺 Added a video section to my site! (jclahoot.com)

I just published something new for the first time in a while (a vlog about a failed DIY project), and figured I'd give it a little screening area.🍿

"there are no third spaces anymore" wrong. blast furnace

Khoa set up a shop with Square. Bonus points for also being able to use it to accept credit/debit cards at markets.

I think `animation-composition: accumulate` is gonna see more action with `random()`, as it's like "take what you already got as a value and augment it rather than replace it".

Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)

The nested and interconnected nature of Wikipedia would feel so cool with these transitions!

Ooh! I prefer the simplicity of the first one, but the negative space nose might cause problems in some other layouts. Composition wise I do prefer the stoat on the left, facing the right side though.

They’re both really good!

A scene on jclahoot.com, in a painted style. A break in the trees is shown, revealing a field of sunflowers and a white windmill with a blue tiled roof in the middle.

This is hands down my favourite landscape on my website 💛

Spicy pho too!

So many of them are suburbs!