Fun with WebGL 2.0 : 003 : The Shaders Part 1 SketchpunkLabs 2017-01-21 | This is a big subject, so I'm breaking the lesson out as two parts. In the first part I'm going to try to explain shaders, the parts that make it up and using VAO's to make using shaders easier.Then in the second part I'll walk you through some of the new code in which we start creating our shader base class and setting up vao as our mesh data structure.GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTumblr :: http://sketchpunklabs.tumblr.com/
Ossos : IK Rigs & Fullbody IK SketchpunkLabs 2021-12-26 | Official Open Source Projecthttps://github.com/sketchpunklabs/ossosThings will get prototyped for the Oito Project before being refactored for the opensource community for uses.https://github.com/sketchpunk/oito/tree/main/packages/ikrig If interested on Verlet Intergration, here's the first of 4 videos on the subject by CodingMath.https://www.youtube.com/watch?v=3HjO_RGIjCU====================================================== GitHub :: https://github.com/sketchpunk Patreon :: https://www.patreon.com/sketchpunk Twitter :: https://twitter.com/SketchpunkLabs
2D Hexagon Map From Scratch SketchpunkLabs 2021-10-12 | Links to source code, demos and online IDE project is available at https://www.patreon.com/posts/57298750. Not required, but any small donation is appreciated. ====================================================== GitHub :: https://github.com/sketchpunk/FunWithWebGL2 Patreon :: https://www.patreon.com/sketchpunk Twitter :: https://twitter.com/SketchpunkLabs
WebGL 3D Painting Prototype SketchpunkLabs 2021-09-25 | Src&Demo: https://www.patreon.com/posts/56602881Ever wanted to create a substance painter tool for the web? Have no clue how to even get started by painting on a 3D model? Well today is ur lucky day, Get this bare bones example 4 FREE ! Make something kewl!#opensource #javascript #webgl #threejs ====================================================== GitHub :: https://github.com/sketchpunk Patreon :: https://www.patreon.com/sketchpunk Twitter :: https://twitter.com/SketchpunkLabs
WebGL2 : 137.6 : IK Rigs - Head & Springs SketchpunkLabs 2020-04-25 | This is a mini series in where i break down the IK Rigs system I developed that was inspired by Ubisoft's GDC talk about their own IK Rigs. The main goal is to be able to read an animation, translate each pose into a set of IK bits of data that we can then apply to various other meshes without being remotely similar to the animation's own skeleton.To prove that point, we use a humanoid model thats shorter then our source to use as a simple baseline translation from one human to another. Then we also use a Robot dinosaur which is very different from the source. For example, human src have a 2 bone leg but dino has 3, so we end up using various IK Solvers to deal with different bone configurations. Then there's a tail which there is no animation data for it, so we use springs to procedurally move extra parts based on the movement the model is able to replicate. There are other differences that the dino skeleton has but by the end you'll see its possible to translate human motion into an animal body.This is really just the beginning of IK Rigs. With the hard part out of the way, we can then explore other various things from the GDC talk further the development of IK Rigs which will eventually become future tutorials. So I welcome all to this new journey.https://github.com/sketchpunk/FunWithWebGL2/tree/master/lesson_137_ik_rigs======================================================Links of Interesthttps://www.youtube.com/watch?v=KLjTU0yKS00& ====================================================== GitHub :: https://github.com/sketchpunk/FunWithWebGL2 Patreon :: https://www.patreon.com/sketchpunk Twitter :: https://twitter.com/SketchpunkLabs
WebGL2 : 137.5 : IK Rigs - Spine SketchpunkLabs 2020-04-25 | This is a mini series in where i break down the IK Rigs system I developed that was inspired by Ubisoft's GDC talk about their own IK Rigs. The main goal is to be able to read an animation, translate each pose into a set of IK bits of data that we can then apply to various other meshes without being remotely similar to the animation's own skeleton.To prove that point, we use a humanoid model thats shorter then our source to use as a simple baseline translation from one human to another. Then we also use a Robot dinosaur which is very different from the source. For example, human src have a 2 bone leg but dino has 3, so we end up using various IK Solvers to deal with different bone configurations. Then there's a tail which there is no animation data for it, so we use springs to procedurally move extra parts based on the movement the model is able to replicate. There are other differences that the dino skeleton has but by the end you'll see its possible to translate human motion into an animal body.This is really just the beginning of IK Rigs. With the hard part out of the way, we can then explore other various things from the GDC talk further the development of IK Rigs which will eventually become future tutorials. So I welcome all to this new journey.https://github.com/sketchpunk/FunWithWebGL2/tree/master/lesson_137_ik_rigs======================================================Links of Interesthttps://www.youtube.com/watch?v=KLjTU0yKS00& ====================================================== GitHub :: https://github.com/sketchpunk/FunWithWebGL2 Patreon :: https://www.patreon.com/sketchpunk Twitter :: https://twitter.com/SketchpunkLabs
WebGL2 : 137 : IK Rig - Grounding SketchpunkLabs 2020-04-24 | This is a mini series in where i break down the IK Rigs system I developed that was inspired by Ubisoft's GDC talk about their own IK Rigs. The main goal is to be able to read an animation, translate each pose into a set of IK bits of data that we can then apply to various other meshes without being remotely similar to the animation's own skeleton.To prove that point, we use a humanoid model thats shorter then our source to use as a simple baseline translation from one human to another. Then we also use a Robot dinosaur which is very different from the source. For example, human src have a 2 bone leg but dino has 3, so we end up using various IK Solvers to deal with different bone configurations. Then there's a tail which there is no animation data for it, so we use springs to procedurally move extra parts based on the movement the model is able to replicate. There are other differences that the dino skeleton has but by the end you'll see its possible to translate human motion into an animal body.This is really just the beginning of IK Rigs. With the hard part out of the way, we can then explore other various things from the GDC talk further the development of IK Rigs which will eventually become future tutorials. So I welcome all to this new journey.https://github.com/sketchpunk/FunWithWebGL2/tree/master/lesson_137_ik_rigs======================================================Links of Interesthttps://www.youtube.com/watch?v=KLjTU0yKS00&====================================================== GitHub :: https://github.com/sketchpunk/FunWithWebGL2 Patreon :: https://www.patreon.com/sketchpunk Twitter :: https://twitter.com/SketchpunkLabs Tumblr :: http://sketchpunklabs.tumblr.com/ Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 137.3 : IK Rigs - Feet SketchpunkLabs 2020-04-23 | This is a mini series in where i break down the IK Rigs system I developed that was inspired by Ubisoft's GDC talk about their own IK Rigs. The main goal is to be able to read an animation, translate each pose into a set of IK bits of data that we can then apply to various other meshes without being remotely similar to the animation's own skeleton.To prove that point, we use a humanoid model thats shorter then our source to use as a simple baseline translation from one human to another. Then we also use a Robot dinosaur which is very different from the source. For example, human src have a 2 bone leg but dino has 3, so we end up using various IK Solvers to deal with different bone configurations. Then there's a tail which there is no animation data for it, so we use springs to procedurally move extra parts based on the movement the model is able to replicate. There are other differences that the dino skeleton has but by the end you'll see its possible to translate human motion into an animal body.This is really just the beginning of IK Rigs. With the hard part out of the way, we can then explore other various things from the GDC talk further the development of IK Rigs which will eventually become future tutorials. So I welcome all to this new journey.https://github.com/sketchpunk/FunWithWebGL2/tree/master/lesson_137_ik_rigs======================================================Links of Interesthttps://www.youtube.com/watch?v=KLjTU0yKS00& ====================================================== GitHub :: https://github.com/sketchpunk/FunWithWebGL2 Patreon :: https://www.patreon.com/sketchpunk Twitter :: https://twitter.com/SketchpunkLabs
WebGL2 : 137.2 : IK Rigs - Limbs SketchpunkLabs 2020-04-22 | This is a mini series in where i break down the IK Rigs system I developed that was inspired by Ubisoft's GDC talk about their own IK Rigs. The main goal is to be able to read an animation, translate each pose into a set of IK bits of data that we can then apply to various other meshes without being remotely similar to the animation's own skeleton.To prove that point, we use a humanoid model thats shorter then our source to use as a simple baseline translation from one human to another. Then we also use a Robot dinosaur which is very different from the source. For example, human src have a 2 bone leg but dino has 3, so we end up using various IK Solvers to deal with different bone configurations. Then there's a tail which there is no animation data for it, so we use springs to procedurally move extra parts based on the movement the model is able to replicate. There are other differences that the dino skeleton has but by the end you'll see its possible to translate human motion into an animal body.This is really just the beginning of IK Rigs. With the hard part out of the way, we can then explore other various things from the GDC talk further the development of IK Rigs which will eventually become future tutorials. So I welcome all to this new journey.https://github.com/sketchpunk/FunWithWebGL2/tree/master/lesson_137_ik_rigs====================================================== Links of Interest https://www.youtube.com/watch?v=KLjTU0yKS00& ====================================================== GitHub :: https://github.com/sketchpunk/FunWithWebGL2 Patreon :: https://www.patreon.com/sketchpunk Twitter :: https://twitter.com/SketchpunkLabs
WebGL2 : 137.1 : IK Rig - Hips SketchpunkLabs 2020-04-21 | This is a mini series in where i break down the IK Rigs system I developed that was inspired by Ubisoft's GDC talk about their own IK Rigs. The main goal is to be able to read an animation, translate each pose into a set of IK bits of data that we can then apply to various other meshes without being remotely similar to the animation's own skeleton.To prove that point, we use a humanoid model thats shorter then our source to use as a simple baseline translation from one human to another. Then we also use a Robot dinosaur which is very different from the source. For example, human src have a 2 bone leg but dino has 3, so we end up using various IK Solvers to deal with different bone configurations. Then there's a tail which there is no animation data for it, so we use springs to procedurally move extra parts based on the movement the model is able to replicate. There are other differences that the dino skeleton has but by the end you'll see its possible to translate human motion into an animal body.This is really just the beginning of IK Rigs. With the hard part out of the way, we can then explore other various things from the GDC talk further the development of IK Rigs which will eventually become future tutorials. So I welcome all to this new journey.https://github.com/sketchpunk/FunWithWebGL2/tree/master/lesson_137_ik_rigs====================================================== Links of Interest https://www.youtube.com/watch?v=KLjTU0yKS00& ====================================================== GitHub :: https://github.com/sketchpunk/FunWithWebGL2 Patreon :: https://www.patreon.com/sketchpunk Twitter :: https://twitter.com/SketchpunkLabs
WebGL2 : 137.0 : IK Rigs Intro SketchpunkLabs 2020-04-21 | This is a mini series in where i break down the IK Rigs system I developed that was inspired by Ubisoft's GDC talk about their own IK Rigs. The main goal is to be able to read an animation, translate each pose into a set of IK bits of data that we can then apply to various other meshes without being remotely similar to the animation's own skeleton.To prove that point, we use a humanoid model thats shorter then our source to use as a simple baseline translation from one human to another. Then we also use a Robot dinosaur which is very different from the source. For example, human src have a 2 bone leg but dino has 3, so we end up using various IK Solvers to deal with different bone configurations. Then there's a tail which there is no animation data for it, so we use springs to procedurally move extra parts based on the movement the model is able to replicate. There are other differences that the dino skeleton has but by the end you'll see its possible to translate human motion into an animal body.This is really just the beginning of IK Rigs. With the hard part out of the way, we can then explore other various things from the GDC talk further the development of IK Rigs which will eventually become future tutorials. So I welcome all to this new journey.https://github.com/sketchpunk/FunWithWebGL2/tree/master/lesson_137_ik_rigs====================================================== Links of Interest https://www.youtube.com/watch?v=KLjTU0yKS00& ====================================================== GitHub :: https://github.com/sketchpunk/FunWithWebGL2 Patreon :: https://www.patreon.com/sketchpunk Twitter :: https://twitter.com/SketchpunkLabs
WebGL2 : 136 : Quaternion Swing and Twist SketchpunkLabs 2020-04-09 | This is the second video in relation to IK Animation. Before dealing with IK stuff, I want to go through a few math ideas that I found to be important when trying to animate characters with IK. This second one is about breaking rotation into a set of 2 rotations that makes it easy to store and translate to IK Bones. The basic idea is to swing a bone to face a specific direction, then apply a roll / twist, for example swing your arm then just rotating just your wrist. Saving data as a direction vector plus an angle of rotation for the twist makes it pretty easy to store in a vec4 data type and works pretty well to share overall animation to various ik rigs.====================================================== Links of Interest http://allenchou.net/2018/05/game-math-swing-twist-interpolation-sterp/ ====================================================== GitHub :: https://github.com/sketchpunk/FunWithWebGL2 Patreon :: https://www.patreon.com/sketchpunk Twitter :: https://twitter.com/SketchpunkLabs
WebGL2 : 135 : Quaternion Inverse Direction SketchpunkLabs 2020-03-22 | This is the first video in relation to IK Animation. Before dealing with IK stuff, I want to go through a few math ideas that I found to be important when trying to animate characters with IK. The first one i'm calling "Quaternion Inverse Direction", because I have no better name for it since I noticed this after a few failed attempts of IK animation. The main idea is to try to create a universal direction no matter what rotational orientation all your objects exist in. ====================================================== GitHub :: https://github.com/sketchpunk/FunWithWebGL2 Patreon :: https://www.patreon.com/sketchpunk Twitter :: https://twitter.com/SketchpunkLabs Tumblr :: http://sketchpunklabs.tumblr.com/ Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
001 : A Triangle : WebGL 2 WebGPU SketchpunkLabs 2019-11-23 | In this first video, We're going to break things down into distinct functions and show mirror examples in WebGL and WebGPU. The areas are Init, Shader, Ubo, Mesh and Render. We'll learn how to setup each bit that we need to get a simple triangle rendered on screen.KEEP IN MIND. WebGPU is still being developed as I write this, so the code contained here may break at some point when the api gets changed around. This happened in the middle of developing this first lesson :)======================================================Links of Interesthttps://www.google.com/chrome/canary/https://gpuweb.github.io/gpuweb/https://github.com/gpuweb/gpuweb/https://github.com/gpuweb/gpuweb/wiki/Implementation-Statushttps://github.com/gpuweb/gpuweb/tree/master/designhttps://redcamel.github.io/webgpu/https://github.com/redcamel/webgpuhttps://github.com/austinEng/webgpu-sampleshttps://developers.google.com/web/updates/2019/08/get-started-with-gpu-compute-on-the-webhttps://vulkan-tutorial.com/Drawing_a_triangle/Graphics_pipeline_basics/Introductionhttps://github.com/SaschaWillems/Vulkan/tree/master/data/shadershttps://github.com/SaschaWillems/Vulkan/blob/master/examples======================================================GitHub :: https://github.com/sketchpunk/webgl2webgpuPatreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabs
000 : INTRO : WebGL 2 WebGPU SketchpunkLabs 2019-11-23 | INTO OF NEW TUTORIAL SERIES.======================================================Links of Interesthttps://www.google.com/chrome/canary/======================================================GitHub :: https://github.com/sketchpunk/webgl2webgpuPatreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabs
WebGL2 : 134 : Data Texture Skin Animation SketchpunkLabs 2019-11-10 | So we retargeted some animation and managed to save it back out as a GLTF file to reuse. So lets try something different. Lets take our animation and transform it into something that will be usable on the GPU, then store all this data into a texture buffer. So why do this? Well, we can store boat loads of information in a texture plus we have random access to the data. So if we're smart in saving our data as Pixels, we can move all our skin animation code into a shader that will do all the work on the gpu. So no more figuring out theworld space position / rotation for every bone for every frame, all that will be cached onto a texture and we'll no longer need to recalculate the animation again, victory.======================================================Links of Interesthttps://webgl2fundamentals.org/webgl/lessons/webgl-skinning.html======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabs
WebGL2 : 133 : Saving Retargeted Animation SketchpunkLabs 2019-11-10 | In the last video we explored how to retarget animation from one character onto another. In this video we're going to continue by saving the data back out into a new GLTF json & bin file so we can run the animations on our target meshes without redoing the retargeting. We're going to step through the process of creating a new animation object from our retargeting, then step through a custom made GLTF export to save out the animation and its armature. Then finally we learn how to generate JSON and Binary files in javascript and start a download process to save the files onto your desktop without any backend servers, purely client side file saving.======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
IK Rig - Prototype Demo SketchpunkLabs 2019-10-18 | Here is my prototype of my IK Rig system build from scratch using web technologies, WebGL and Javascript. This project was inspired by a GDC talk from ubisoft showing of an animation system they called IK Rigs. So I've spent over a year trying to piece together a system to replicate some of the features that they demonstrated. So this video is to show off and get people excited about the prospects of what a system like this can do.======================================================Ubisoft's GDC Talk about their IK Rigshttps://www.youtube.com/watch?v=KLjTU0yKS00IK Rig Demohttp://fungi.sketchpunk.com/demo/ik/ik_retarget.htmlStride Control Testhttp://fungi.sketchpunk.com/demo/ik/stride_test.htmlVarious Single Pass IK Solvershttp://fungi.sketchpunk.com/demo/ik_solvers/chain_demo.htmlSource codehttps://github.com/sketchpunk/fungi======================================================Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabs
WebGL2 : 132 : Animation Retargeting SketchpunkLabs 2019-10-03 | In today's video we're going to explore an advanced topic, Animation retargeting. The idea is to map the bones of two similar skeletons and transform all the rotation of one onto the other. The purpose to be able to reuse animation with different models and characters.======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 131 : Soft Body Physics SketchpunkLabs 2019-09-21 | Today we continue from the last lesson, where we did all our springs computation on the gpu. Springs are used to help simulate soft body physics and one component need to help is a bit of collision. So we're going to deal with a bit of collision detection in our computer shader and when the collision is released our mesh will spring back to its resting position. We'll explore floor collision, sphere to sphere and end with using ray intersection to add a big of push to our test vegeta mesh.======================================================Links of Interesthttps://codepen.io/sketchpunk/pen/xvyzQj======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 130 : Spring Vertices SketchpunkLabs 2019-09-21 | In this video we're going use springs on vertices, but instead modifying a vert array and uploading to the gpu, we are going to do all the computation on the gpu itself by using Shaders and TransformFeedback. This will allow us to be as efficient and fast as possible. For fun we're going to build terrain using noise while using springs to move all our verts to the desired position.======================================================Links of Interesthttps://exp.v-os.ca/cartographer/======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 129 : Spring Bone Chain SketchpunkLabs 2019-08-16 | In the previous lesson we learned how to build a jiggle bone. In today's lesson, we're going to expand it by applying the concept to an array of bones. This gives us the ability to start animating specific things like hair, clothing, tails, whatever use you can think of that is skinned with a chain of bones.Project files can be found on github, but if you want the tentacle example, its available as a free download at my patreon page.https://www.patreon.com/posts/29203274======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 128 : Spring - Jiggle - Dynamic Bone SketchpunkLabs 2019-07-27 | In this lesson, we're going to learn how to handle spring movement on an armature / skeleton bone. This is known sometimes as a Jiggle or Dynamic Bone, just another tool for procedural animations. The base idea is pretty simple. You use spring movement to move an invisible point around that follows along to matchthe resting position in worldspace for the bone's tail.From there, you get the angle between 2 rays. Bone's head to the Trail's resting position, then from the bone's head to the following point. With the angle at hand, all we need to do is get the cross product of the two rays to get an axis of rotation. Angle plus Axis, we can easily create a quaternion that we can apply to the bind pose rotation of the bone for a final springy bone movement. It sounds complicated, but the code is fairly simple. I also setup visual aids to help drive the concept home for most people.Lesson source with extra bits is on patreon for free.https://www.patreon.com/posts/28683295======================================================Links of Interesthttps://wiki.unity3d.com/index.php/JiggleBone======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 127 : Spring Rotation SketchpunkLabs 2019-07-27 | In this lesson we explore more spring math by instead using rotation instead translation. We will also explore a different sort of spring called Soft Constraints also known as implicit euler and semi-implicit euler which is used by some physics engines like Box2D. We also continue to build our baller controller since the last video. We use spring rotation to control the movement of the plunger gun that is attached to the sphere.Extra Source Files are on patreon for free. Enjoy.https://www.patreon.com/posts/28683139======================================================Links of Interesthttp://allenchou.net/2015/04/game-math-more-on-numeric-springing/http://box2d.org/files/GDC2011/GDC2011_Catto_Erin_Soft_Constraints.pdfhttps://gafferongames.com/post/spring_physics/https://gafferongames.com/post/physics_in_3d/https://wiki.unity3d.com/index.php/JiggleBonehttps://www.khanacademy.org/science/ap-physics-1/simple-harmonic-motion-ap/spring-mass-systems-ap/v/period-dependance-for-mass-on-springhttps://gamedev.stackexchange.com/questions/105728/how-to-program-a-fully-controllable-spring-damped-motionhttps://codepen.io/sketchpunk/details/WqJOMMhttp://lolengine.net/blog/2015/05/03/damping-with-delta-timehttp://www.rorydriscoll.com/2016/03/07/frame-rate-independent-damping-using-lerp/http://mathproofs.blogspot.com/2013/07/critically-damped-spring-smoothing.html======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 126 : Spring Movement SketchpunkLabs 2019-07-08 | In this lesson we explore a bit of spring physics. We'll focus on on equations based on 1D movement to keep things super simple, but like curves, its requires little to no effort to expand it to 2D or 3D. We'll cover a few different examples of the math I found, also discuss a few different examples of how to apply delta time to spring movement. We'll end by checking out an example of how to calculate the Spring Constant and Damping based on a few inputs like start/end positions, how much time to cover the distances and how many bounces you want the spring to do.The hopes of this lesson is to get a basic well rounded idea of how to handle springs. This will be the first lesson of a mini series related to the topic. Future tutorials will hope to cover:- Spring Rotation- Spring Bone (Jiggly Bone)- Spring Bone Chains (Hair, Clothing, etc)- Soft Body PhysicsLesson files that included the baller sample can be found for free at my patreon page.https://www.patreon.com/posts/28212727======================================================Links of Interesthttps://gafferongames.com/post/spring_physics/https://gafferongames.com/post/physics_in_3d/https://wiki.unity3d.com/index.php/JiggleBonehttps://www.khanacademy.org/science/ap-physics-1/simple-harmonic-motion-ap/spring-mass-systems-ap/v/period-dependance-for-mass-on-springhttps://gamedev.stackexchange.com/questions/105728/how-to-program-a-fully-controllable-spring-damped-motionhttps://codepen.io/sketchpunk/details/WqJOMMhttp://lolengine.net/blog/2015/05/03/damping-with-delta-timehttp://www.rorydriscoll.com/2016/03/07/frame-rate-independent-damping-using-lerp/http://mathproofs.blogspot.com/2013/07/critically-damped-spring-smoothing.html======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 125 : Procedural IK Dance P2 SketchpunkLabs 2019-06-28 | Now with much of our IK system built, we're going to explore recreating an example of procedural animated dance. Its something I found a long while back when I first started to learn about ik. Its a pretty cool experiment done in unity that depends on its IK system and various other things that exists in the C# language. So we'll step though building a simple version purely with javascript and webgl. This is a fun example of building a semi complicated procedural animation.In the second part, we're going to focus on moving the spine and the arms.======================================================Links of Interesthttps://github.com/keijiro/PuppetTest======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 125 : Procedural IK Dance P1 SketchpunkLabs 2019-06-28 | Now with much of our IK system built, we're going to explore recreating an example of procedural animated dance. Its something I found a long while back when I first started to learn about ik. Its a pretty cool experiment done in unity that depends on its IK system and various other things that exists in the C# language. So we'll step though building a simple version purely with javascript and webgl. This is a fun example of building a semi complicated proceduralanimation.In this first part we're going to focus on getting the feet moving while the hips oscillates up and down.======================================================Links of Interesthttps://github.com/keijiro/PuppetTest======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 124 : IK Solver Limb SketchpunkLabs 2019-06-14 | We continue from the last to videos, now leading to exploring a two bone IK solver usually named limb. We use our aim IK as a starting point then you law of cosines to find the angles that we need to bed the two bones so that the wrist can reach the end effector.======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 123 : Generate T-Pose SketchpunkLabs 2019-05-31 | In the previous lesson we learned a new IK Solver i put together called Aim. By taking some of the ideas and removing the parts related to twist, we can simply align bones aiming at specific direction. We can easily apply this to the arms and legs of a model to force the mesh into a T-Pose. Having a t-pose will make IK easer moving forward, so its great to be able to make meshes into that pose dynamically without the need of 3D Software package.======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 122 : IK Solver Aim SketchpunkLabs 2019-05-24 | In previous lessons related to inverse kinematics we only worked with simple bones but when applying those examples to meshes with complete skeletons things don't render very well. In the next set of video we're going to dive into doing IK with actual skinned meshes and some of the extra steps needed and things to watch out for. To start with we're going to dive into what I'mcalling the IK Aiming. The idea is to properly aim a limb at the end effector while trying to keep its orientation while applying a twist to control the direction the elbow or knee points to. This will be the starting point for the rebuilding of our IK solvers from pass videos.======================================================Links of Interest======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 121 : Rotation Noise SketchpunkLabs 2019-02-11 | Today I want to play around with the idea of using perlin noise on rotation. We learn how to apply it a single object then experiment with applying the same idea to skeleton bones to create a random moving tentacle or tail.First tutorial using the new fungi engine. So syntax will look different.======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/
Refactor Fungi 002 SketchpunkLabs 2019-02-11 | Long winded updated to fungi. New Engine and Armature/Skinning added to the core.======================================================GitHub :: https://github.com/sketchpunk/fungiPatreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
Refactor Fungi 001 SketchpunkLabs 2019-01-11 | https://github.com/sketchpunk/Fungi/tree/master/fungi/core
WebGL2 : 120 : Swarm Attack SketchpunkLabs 2018-12-10 | Exploring the idea of swarms, which at is core are just particles that follow some sort of direction. So we first put together the basics of our system, the data and how to make the swarm move from target to target. Then we explore the idea of the swarm moving in some shape. Then in the end we let our swarm form itself into a spiral for a rush attack or a tentacle for a whip attack then returning back to its default swarm movement.======================================================Links of Interesthttps://80.lv/articles/animating-beasts-using-the-procedural-way-in-unity/https://twitter.com/Makan_Gilani======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 119 : Three Bone IK Solver SketchpunkLabs 2018-10-09 | As the final solver in the series, we'll look on how to make 3 bones work in a similar fashion to the hind leg of an animal, like a dog or cat. ======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 118 : Piston (Prismatic) IK Solver SketchpunkLabs 2018-10-09 | Today we work on a simpler IK solver, something I call piston, since I can't come up with a better name. This is a more mechanical sort of solver where it involves having bones fold into their parent bone, like some kind of telescopic lens or an antenna. Something useful more more machinery kinematics.Update :Learned that this sort of thing has a technical term, Prismatic. So for future videos you will see piston replaced with the word Prismatic.======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/
WebGL2 : 117 : Arc Circle IK Solver SketchpunkLabs 2018-10-08 | Continuing procedural animations with inverse kinematics, we explore a solver I put together that arcs the bones towards the target. The distance will determine if the bones will be rotated on an arc or more like a circle. This is great for tentacles or whatever else you can come up with. This is the second of 4 solvers that will be part of our ubisoft's recreation of IK Rigs.======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/
WebGL2 : 116 : Wagging animation with IK Chains SketchpunkLabs 2018-10-04 | In today's video we're going to continue building up our armature system by creating something called Chains. These are just array of bones that allows us to group animations for our future rigs. We'll explore how to animate our chain with a swaying / wagging sort of animation then playing around with its values and even hack the function a bit to see what else we can do when we generate the animation at runtime. Then we end off generating two poses for our chains then lerping between them as another approach to animating our chains.======================================================Links of Interesthttps://www.reddit.com/r/GraphicsProgramming/comments/9kumwz/one_procedural_animation_driving_4_rigs_with_4_ik/======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/
WebGL2 : 115 : ECS Bone/Joint Entity SketchpunkLabs 2018-10-03 | Today we're going to rebuild part of our armature system where the bones / joints will become ECS entities. Before, our system was built as a self contained system but that leaves us with limitations. By allowing our bones to exist as entities in the system, we can do entity type things like adding components to it, we can easily attach children to bones like sockets. This sets us up to do future thing like adding physics to our bones. While we're add it, we're going to add 3 axis scaling to our bones, so we can control how our bones scale in the future.======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/
WebGL2 : 114 : Pure Transform SketchpunkLabs 2018-10-03 | In today's video we're going to explore trying to do Transforms without Matrices. We look at a concept from a blog post then take it a step further and push the transform data to our shader and apply it to our vertices without the need of turning our transform (rotation, position, scale) into model matrix. The only tricky bit is applying quaternion rotation but we already covered GLSL code to just that, so its not difficult to complete the task.======================================================Links of Interesthttp://gabormakesgames.com/blog_transforms_transforms.html======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
IK Rig like Prototype Demo SketchpunkLabs 2018-09-21 | Showing off a few weeks worth of work trying to implement something similar to IK-Rigs from Ubisoft's GDC demo two year back. So far, the concept works by having a set of universal data that can be animated, then pushed through IK solvers then apply the results back to an armature bones. ======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/
WebGL2 : 113 : Quaternion Ball Constraint / Limit SketchpunkLabs 2018-09-10 | In this video we are going to explore one more constraint, this one is called a ball constraint. The basic idea is by slicing a piece of the sphere away and the hole that it creates is our limit of movement.======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 112 : Quaternion Hinge Constraint / Limit SketchpunkLabs 2018-09-10 | In todays video we explore a way to limit the rotation of quaternion by using the idea of a hinge. This locks the rotation to one specific axis and then we can determine the low and high limits of rotation.======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 111 : Quaternion Cone Constraint SketchpunkLabs 2018-08-16 | In this video we start exploring ways to limit the amount of rotation that can be done with our armature. Today we try our hand at trying to setup a cone constraint that will limit how much rotation that can be applied and if the rotation is over the limit, snap the rotation to the closest point of the cone's base.======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 110 : Inverse Kinematics with Curve Placement SketchpunkLabs 2018-08-16 | In the attempt of recreating IK-Rigs, we explore different ways to go about doing Inverse kinematics beyond just FABIK or just adding to it. We explore how to easily do a two joint chain like Arms and legs just by doing a bit of triangle math to create reach that does not need FABIK to work. Then we try augmenting FABIK by apply curves while trying to reach for an object. I go through using catenary, circular and sine curves which gives us different ways to reach for an object and how to handle chains that are longer then 2 joints.======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 109 : Inverse Kinematics SketchpunkLabs 2018-08-16 | In the next step of kinematics, we explore the inverse concept by using the algorithm known as FABIK. The gist of it is that we have a target that we use to shift all the bones in the right direction to allow our armature arm reach and touch that target. This is an extension of forwards kinematics, hence the F part of FABIK which stands for Forwards and backwards Inverse Kinematics.======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 108 : Armature Locomotion SketchpunkLabs 2018-07-31 | Today we finally have our armature take its first steps of movement. We explore the idea of tracking the movement of the feet during its animation cycle and when its within a close range to the floor we apply the foots current velocity to the armature. This mean, every step actually moves our model forward... or backwards. So our movement speed and direction can be driven purely on the animation and proximity to the floor.======================================================Links of Interesthttps://www.youtube.com/watch?v=KLjTU0yKS00https://www.youtube.com/watch?v=LNidsMesxSE======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 107 : Rotation Movement SketchpunkLabs 2018-07-31 | Today we explore rotation motion. We take the idea of how a wheel works and apply to sphere. We use a bit of math to calculate a spheres moving velocity / direction based on the rate of rotation being applied to the sphere. This allows the sphere (or wheel) to rotate and move in sync with each other which makes the simulation of movement look real.======================================================Links of Interesthttps://andreashackel.de/tech-art/stripes-shader-1/https://www.youtube.com/watch?v=KLjTU0yKS00https://www.youtube.com/watch?v=LNidsMesxSE======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 106 : Procedural Animation SketchpunkLabs 2018-07-31 | Today we begin working procedural animations for our armature system. This means we create animations for our bones with nothing but code. This is also known as Forward Kinematics. In the end, we will create a walk cycle based on solely on rotations and timing. I'll also show full body jogging and ninja running :)======================================================Links of Interesthttps://www.youtube.com/watch?v=4oCo1j8xGewhttps://www.youtube.com/watch?v=KLjTU0yKS00https://www.youtube.com/watch?v=LNidsMesxSE======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 105 : Bone / Skin Weights SketchpunkLabs 2018-07-31 | In this video we discuss a method in how to connect and weight vertices to armature bones. This will make it easier to procedurally generate meshes that we can manipulate with our armature system.======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
WebGL2 : 104 : Texture Arrays SketchpunkLabs 2018-07-26 | Today we explore a feature of WebGL 2.0 called Texture Arrays. Its similar to the idea to texture atlas but without all the manual work of calculating the UV positions. Since this feature is built in, it makes it super easy to use compared to atlases. Once we learn how to created, configure and upload a texture array to the GPU, you see me apply it to our voxel system to start putting together that portals 2 editor prototype I've been wanting to do.======================================================GitHub :: https://github.com/sketchpunk/FunWithWebGL2Patreon :: https://www.patreon.com/sketchpunkTwitter :: https://twitter.com/SketchpunkLabsTumblr :: http://sketchpunklabs.tumblr.com/Trello :: https://trello.com/b/zcTUPpFy/fun-with-webgl-20
