Jake Gifford

Creative Full Stack Developer learning Three.js

[Jake Gifford @jgifforddev]

I am officially open to work.✍️

Feel free to DM me if you’re interested in working with me on a website or application!

[Jake Gifford @jgifforddev]

Moving permanently to BlueSky

https://t.co/uhcxdeTlEd

Cheers

[Jake Gifford @jgifforddev]

Marble Run getting a complete rehaul because I couldn't drop some ideas I had for it :).

Assets aren't made yet, so most things are just placeholders while I build the levels and functionality.

Coming is 50+ levels, and a level editor.

#threejs
#threejsJourney
#buildinpublic

[Jake Gifford @jgifforddev]

Been trying out GPT 4o to see if it can help me write some r3f faster and was thoroughly unimpressed.

Desk ducky is the undefeated coding buddy.

[Jake Gifford @jgifforddev]

Experimenting with cool grass types, like this Zelda-inspired grass originally from James Smyth.

Cleverly uses vertex color data to keep the grass anchored at the floor while swaying the upper vertices.

Live: https://t.co/mrcbNZAh9V

#threejs
#threejsJourney
#creativecoding

[Jake Gifford @jgifforddev]

Been improving my R3F portal scene as I get better at Blender. Added a few extra things to the scene to spice it up a bit :).

Definitely in need of advice for the waterfall, looks quite out of place, but water is hard 🥲.

Grass next!

#threejs
#threejsJourney

Preview:

[Jake Gifford @jgifforddev]

@pikilipita @onepopcorn Is this open source? I’d be interested in contributing.

[Jake Gifford @jgifforddev]

Finally ready to share my first R3F project from #threejsJourney.

Learned so much to get this point in Blender, R3F, and Three.js. Shoutout to the Three.js discord for helping with Blender troubleshooting :).

live: https://t.co/SowxpEQrAM

#threejs

[Jake Gifford @jgifforddev]

@bruno_simon @cgboost Looks great! How strong at Blender does one need to be before confidently approaching this course?

[Jake Gifford @jgifforddev]

@iamishkapoor Simplex4D

[Jake Gifford @jgifforddev]

Cool procedural terrain.

Live: https://t.co/opK7B0V7jk (beware your data, heavy textures for the wood)

#threejsJourney
#threejs

[Jake Gifford @jgifforddev]

@jerryjohnthomas @threejs Need 2 textures, because we can't read and write the same texture at the same time. So textureA is read, updating postions, textureB is written with new positions. On the next frame, textureB is read, and textureA is rewritten, next frame A is read, B rewritten on and on.

[Jake Gifford @jgifforddev]

Baby's first gp-gpu computations. Not my first time hearing of the concept, but my first time using it myself.

Encoding data as a texture is so clever.
Live: https://t.co/5UYpOyZl2i

#threeJS
#threejsJourney

[Jake Gifford @jgifforddev]

@jerryjohnthomas @threejs Starting point is a mesh, where the position attributes are extracted and used for my first FBO (texture). After that, 2 textures ping pong reading/writing to update the position of the vertices each frame.

[Jake Gifford @jgifforddev]

@RichiCoder I pass static attributes using a buffer geometry, but the position of each vertex is unpredictable frame to frame.

Position is saved, read and updated every frame. Frame rate with too many particles would slog without using FBO's.

[Jake Gifford @jgifforddev]

@Lukico_ Keep in mind this means your model will be black unless you add fragment shaders or bake the colors to an attribute in blender.

[Jake Gifford @jgifforddev]

@Lukico_ most likely because the model doesn't have a color attribute baked in.

Line 194, just comment out
`particles.geometry.setAttribute(
'aColor',
baseGeometry.instance.attributes.color
);`

and it should get you your model on screen. Other tweaks will be needed to make it pretty.

[Jake Gifford @jgifforddev]

@Lukico_ This should work for any glb or gltf. Might need to do some tweaking based on vertex counts of new files.

[Jake Gifford @jgifforddev]

Since this is getting a decent amount of views, this project is from https://t.co/kXyjKyDMyQ a three.js course by @bruno_simon .

I don't normally think courses are worth the money, but his course is truly phenomenal. Quite cheap too, highly recommend if you're interested.

[Jake Gifford @jgifforddev]

@jerryjohnthomas @threejs The xyzw coordinate of individual pixels are stored as rgba color codes in a texture and then read as xyzw by the vertex shader.

If you’ll ignore the markup on the photo, this is the rgba encoding for the sphere on screen. The texture is hidden in the final result.