zelda's #botw has main char broken out into head, upper & lower. Each has their own skeletons plus an animation skeleton. Got the ripped linkle mod base + 1 armor asset working together in #threejs. Can't wait to get her running & attacking things on the web
#opensource #gamedev #indiedev
Bit of work but linkle is now working well on the web with #threejs. Only 800kb without zip, not bad. Next get some animations converted & running plus some armor assets. Can't wait to have her run in a field of grass while hitting things. Small steps :)
#opensource #gamedev
#opensource demo sketchpunklabs.github.io/threejs_prot...
First milestone complete, animation system & 3rd person ctrlr from scratch. Even got Xbox ctrl input cause im no keyboard warrior 😘
Sensible thing is to do jumping next, nay! Tis time for COMBAT !!! 👊🗡️
#threejs #gamedev #indiedev
#Opensource Demo
sketchpunklabs.github.io/threejs_prot...
Refactored 1D Blendspace proto to work in my new from scratch anim sys. Root motion built in & works with fixed frames. Next add xbox ctrler to move mewtwo around infinite world. Can't wait to do combat next :)
#threejs #gamedev #indiedev
Code/Demo: sketchpunklabs.github.io/threejs_prot...
I created an orbit camera controller with the support for #SpaceMouse as an input device. This lovely device is recognized by the gamepad api in the browser, so yey. Very niche feature but fun to have around :)
#threejs #3dconnexion
Code+Demo
sketchpunklabs.github.io/threejs_prot...
Enjoyed learning how @PavelBoytchev's planar rotations work, lovely way verts are weighted. Heres my 2nd stab at reproducing a single joint of it. Redid most of the #maths so its very simple w/ lots of comments. Free code, enjoy!
#threejs #glsl
Code&Demo
sketchpunklabs.github.io/threejs_prot...
Made a skeleton renderer that uses instanced meshes & custom shaders for the bones. Idea is to easily restyle your skeleton previews all you'd like without all the hard animation mathy bits getting in your way
Tis Free! Enjoy.
#threejs #webgl
Code&Demo
sketchpunklabs.github.io/threejs_prot...
Someone shared a link to @dedouze_'s new animation tool today at work & felt inspired enough to try to build a very basic concept prototype using #threejs. Tis was a fun exercise this evening.
Code is free, enjoy !
Code&Demo
sketchpunklabs.github.io/threejs_prot...
Dealing with cameras lately so tonight I put together 4 examples of moving a camera to fill the screen with the desired object. Free code, enjoy.
#threejs #javascript #maths
Code&Demo sketchpunklabs.github.io/threejs_prot...
Here's a basic proto of creating a wind system. A way to visualize wind dir plus run compute to get wind dir at a certain spot. Gonna use it someday to animate cloths, hair & grass. #opensource, enjoy !
#threejs #maths #glsl
Demo/Code: sketchpunklabs.github.io/threejs_proto/code/webgl/maths/spline_camera.html
like interesting prototypes? editor stuff? How about this lil example of using gpu picking, viewport rendering, and hermite curves to give your camera a bit of humph while editing & viewing in realtime
#threejs
Heres the result of all that Asinc bs Ive been dealing with for awhile. Lovely to finally see this model animating. Its swaying booty is just a nice bonus. There are some bugs & lil hacks to get it working. I'll do a full refactor after I get boneSprings workin again 😊
#threejs #gamedev #webgl
CODE: github.com/sketchpunkla...
Got all that arc #maths fixed up into a non-iterative IK solver. I used the leg bones of the AT-ST since the lens vary oddly & id wanna make sure it'll work. Sadly its really late to try it on the bot but soon!
Solver is #opensource, enjoy
#threejs
DemoSrc: sketchpunklabs.github.io/threejs_prot...
Finally getting arcAngle from arcLen & chordLen working using Inverse Sine Cardinal, took 6 yrs. Now I can improve one of my IK solvers & get a starwars AT-ST doing walk cycles from human animations :)
Code of the #maths are free.
#threejs
Demo/Src: sketchpunklabs.github.io/threejs_prot...
My employer @getcartwheel has allowed me 2 #opensource a feature I made, a mini view that renders in ur scene. U can render anything you want, first use case was a zoomable view. Made possible by using scissor, viewport & stencil buf
#threejs
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:
Code/Demo: sketchpunklabs.github.io/threejs_prot...
I may need to build 3D Gizmos again, so thought I put together a simple ex of all the main actions needed. Got line & plane translation with visualizers for the raw data. FromScratch raycasts + mathlib, free & portable
#threejs #maths
Code / Demo : sketchpunklabs.github.io/threejs_prot...
Reached the first milestone in building a basic #physics engines. Has linear / angular vel, Box Collider, pnt constraint, no dep. Lots of comments, res links, great starter ex for anyone interested in the topic
#threejs #maths
Code/Demo sketchpunklabs.github.io/threejs_prot...
The toy #physics engine Im trying to put together, I found a tutorial on using BVH+MortonCode to handle the broadphase stage. 2 days of reading & coding I have an ex with lots of comments for anyone interested in this fun datastruct.
#threejs
github.com/codecrafters...
Found this great resource that links to various tutorials & examples of how to build things from scratch. I've already started reading one particular build your own 3D physics engine tut & how to completely build your own react library :)
#gamedev #webdev
Code: github.com/sketchpunk/c...
I recently did a test on the topic of websockets. I made a barebones & vanilla example of a multiplayer client /server game. Also added an NPC pixel & xbox controller input. #free + good learning example /w lots of comments
#javascript #indiedev
Code/Demo sketchpunklabs.github.io/threejs_prot...
Put together an ex of gpu picking, an alt for ray casting. Uses renderlists so no need to keep extra scene of objects. For point picking I get intID plus worldspace hit pos. Also made screenspace RECT selection :)
#threejs #opensource
github.com/sketchpunkla...
Because of changes to #threejs over the years I need a new repo to continue doing prototyping. Now I can run multiple versions, webgl/webgpu, better organization & updated my visual debugging to work in latest version plus github pages. Clone away :)
oh... this is exactly the sort of retirement I want. Wake up late, think of doing more work into 4 bar linkage, see people like my old octasphere imp on x then get inspired to make a better version & make it usable for anyone. Thats like peek life living for me, work on whatever whenever :)
Demo/Code: codesandbox.io/p/sandbox/pr...
Revisiting @prideout's Octasphere, this time around I added extra params to reshape it into a 3D rect / capsule shape. No dependences. Engine agnostic, so should work in #threejs @babylonjs etc. Sadly no UV coords tho. Fun shape to have around.
CODE&DEMOS
sketchpunklabs.github.io
The final first prototype of auto skinning a 3D mesh using compute shaders on #webgl & running in #threejs. All the code is up & free for anyone to learn or use.
Big step closer to cloning mixamo 🥳
#opensource #javascript #math #animation
Code&Demo
codesandbox.io/p/sandbox/th...
Heres how to voxelize a triangle mesh using #WebGL's TransformFeedback compute within #threejs. Its just the first step to making Voxel Geodesic AutoSkinning. Here's hoping to replace mixamo with something #opensource-y😊
#gamedev #indiedev
Code&Demo
codesandbox.io/p/sandbox/th...
#WebGL's TransformFeedback used to run a compute shader that voxelizes an SDF shape. The modified buffer is part of an instancedMesh that renders a cube for active voxels. BONUS, Raymarched volume render of the SDF too.
#threejs #glsl
Prototype of using #WebGL's TransformFeedback compute shaders to perform custom skinning with #threejs rendering the results. Mean u can pose/animate a char once then render multiple shells as static meshes. When I have time, I'll try out fur shells & a walk cycle 😊
github.com/sketchpunkla...
JOIN THE #THREEJS HALLOWEEN CHALLENGE!!!
Use this starter project made with @KayLousberg spooky assets to make a fun/eerie web experience. Tag your creation with #threejshalloween!
More info @ repo! Please share & Happy Halloween!
github.com/sketchpunkla...
