Lightnews — Scholar-powered news

Brian Breiholz

@brianbreiholz.bsky.social

250 followers 110 following 37 posts

Web & Game Dev | building Animagica - the Animation Blueprint Editor for three.js & the Web Find older Posts on: https://x.com/BrianBreiholz

x.com

Posts Media Videos Starter Packs

Pinned

Brian Breiholz @brianbreiholz.bsky.social · Nov 18

Hey, I'm building Animagica – a professional character animation system for #threejs and the web.

As I didn't get to post any of it here before, I made a compilation of all my previous introductory material.
Check it out :)

www.youtube.com/watch?v=RCph...

#gamedev #animation

Animagica: Character Animation System for Three.js

YouTube video by Brian Breiholz

www.youtube.com

1 1 9

Brian Breiholz @brianbreiholz.bsky.social · 20d

Hey, I'm curious, did you end up trying it out? :)

1 1

Brian Breiholz @brianbreiholz.bsky.social · Jun 18

Thanks a lot for that. That's some really good input. I'll experiment with that, might follow up with a DM some point in the future if it's ok :)

1 1

Brian Breiholz @brianbreiholz.bsky.social · Jun 18

I tried blending only the x-axis in the camera's local space, which eliminates the flipping problem, but as soon as I include the `dot(playerVel, camForward)` somewhere in the blend process it gets super disorienting.

Brian Breiholz @brianbreiholz.bsky.social · Jun 18

Thanks! How do you blend the positions?
When I blend in world space I get issues with the player running straight into the camera and that in turn affecting the movement direction (i.e. causing flipping like in the video if unhandled).

Brian Breiholz @brianbreiholz.bsky.social · Jun 18

Any tips for avoiding/reducing motion sickness with the lookahead functionality? I'm trying to figure out what's wrong with mine 😬

1 1

Brian Breiholz @brianbreiholz.bsky.social · May 17

Sufficiently advanced magic.

#threejs #blender #IndieGameDev

1 6

Brian Breiholz @brianbreiholz.bsky.social · May 10

I took the Jolt physics car controller by @jrouwe.bsky.social for a ride on my terrain. This was a while ago, but quite the fun experiment :)

#threejs #gamedev #IndieGameDev

2 9

Brian Breiholz @brianbreiholz.bsky.social · May 4

Oh how cool!! Thanks a lot and for writing the article in the first place :)
Big fan of your gameart breakdowns!

Brian Breiholz @brianbreiholz.bsky.social · May 2

feel free to replicate, this is what I used to compress the hdr map: husong.me/ktx2-encoder...
this is what I used to measure VRAM (in WebGL) github.com/greggman/web...

KTX2 Encoder Tool | KTX2-Encoder

A lightweight JavaScript library for converting images to KTX2 format

husong.me

Brian Breiholz @brianbreiholz.bsky.social · May 2

~ 200k triangles

Brian Breiholz @brianbreiholz.bsky.social · May 1

I'm not sure tbh, I'm new to these formats as well and just looking at the reported numbers, though it would be good to dig into it. My measurements might have been off by sth as well, not sure if I subtracted the framebuffer VRAM correctly. But they were > 100mb for sure. Maybe bc it's UASTC HDR?

Brian Breiholz @brianbreiholz.bsky.social · May 1

I measured this with github.com/greggman/web..., so only an estimate, but the order of magnitude should be right.

But roughly checks out, doesn't it?
(2048 * 4096 * 25) / (1024 * 1024) = 200

GitHub - greggman/webgl-memory: A library to track webgl-memory

A library to track webgl-memory. Contribute to greggman/webgl-memory development by creating an account on GitHub.

github.com

Brian Breiholz @brianbreiholz.bsky.social · Apr 30

inspiration came from this excellent breakdown of the technique by @simonschreibt.bsky.social
simonschreibt.de/gat/homeworl...

Homeworld 2: Backgrounds | Simonschreibt.

simonschreibt.de

Brian Breiholz @brianbreiholz.bsky.social · Apr 30

I implemented Homeworld 2 style sky meshes using baked vertex colors in @threejs.org. Reduces VRAM usage from 200mb (2k x 4k UASTC GPU compressed) to a lowly 4mb! For reference, iOS Safari used to crash web pages at 256mb, so this a big win :)

#threejs #gamedev #IndieGameDev

5 15 120

Brian Breiholz @brianbreiholz.bsky.social · Mar 28

Code: github.com/Ctrlmonster/...

GitHub - Ctrlmonster/three-octahedral-impostor

Contribute to Ctrlmonster/three-octahedral-impostor development by creating an account on GitHub.

github.com

Brian Breiholz @brianbreiholz.bsky.social · Mar 28

Anyone interested in hacking on Octahedral Impostors for @threejs.org ?

I took @sketchpunk.bsky.social's octahedron unwrapping code and contributed atlas generation (and some suuper hacky impostor rendering) – maybe someone can push this further for the community :)

GitHub Link below:

1 1 4

Brian Breiholz @brianbreiholz.bsky.social · Mar 19

Continuing with regular Assets. Added a dithered fade between LOD levels, makes transitions a lot less noticeable – extra colors for demo purposes :-)

#threejs #gamedev #IndieGameDev

4 15

Brian Breiholz @brianbreiholz.bsky.social · Mar 17

Didn't get to crosspost this one yet (50mb file limit on here 😬)

Dynamic terrain chunks generated at runtime using meshoptimizer with lockborders modifier (no cracks between chunks)

The wireframe won't look as satisfying, but generating and rendering is super fast!

#threejs #gamedev #IndieGameDev

3 29

Brian Breiholz @brianbreiholz.bsky.social · Mar 8

Yup, +1 for the audio book.
The craft sequence series by Max Gladstone is so good as well.

Brian Breiholz @brianbreiholz.bsky.social · Feb 18

Spent today walking through the baking process for all of my assets. Here are some screenshots of the demo level with sh lighting active on everything. Lots of tuning to be done, but promising :)

#threejs #gamedev #creativecoding

4 22

Brian Breiholz @brianbreiholz.bsky.social · Feb 14

Modified the fog to pick up some depth from the shadow map and the sh baked ao. With the right settings this really gives a nice anime vibe. The effect is super cheap too!

#threejs #gamedev #IndieGameDev

Brian Breiholz @brianbreiholz.bsky.social · Feb 13

Added some "atmospheric scattering" to my PBR material using spherical harmonics colored fog.
#threejs #webgl #gamedev

Brian Breiholz @brianbreiholz.bsky.social · Feb 4

Taking the new SH lighting into production. Lots of unexplored avenues, but good enough for the current project. Conclusion: Super cheap *per-vertex* indirect light + ao and as a bonus lets me convert big HDR files into webp + 27 floats for the lighting data.

#threejs #gamedev

3 10

Brian Breiholz @brianbreiholz.bsky.social · Jan 23

Got a pretty debug view today ☀️
Capturing local lighting conditions into spherical harmonics probes. Previous screenshots (below) just showed the material reacting to infinitely far away light; plan is to enhance this with local captures :)

#threejs #webgl #gamedev

Brian Breiholz @brianbreiholz.bsky.social · Jan 4

Forgot to post this one yesterday :)

sneak peak at indirect light + albedo . Turned up the bounce intensity a bit too much, but it nicely showcases the dynamic soft shadows (see the ground below the barrels)

#threejs #webgl #creativecoding