Three.js skeleton moves but geometry stays static - three.js

I've recently started fiddling with three.js and I'm trying to understand how building a skinnedMesh works. I was getting a bit lost due to the apparent lack of documentation so I just copied the code from this example into my project to play with it a little bit and try to understand things better.
However, tho in my project the skeleton moves as expected, the geometry just stays static. The code is unchanged from the example but I can't reproduce the outcome.
Any tips would be welcome.
Below is a picture of the described behaviour.

Related

I can't seem to animate an asteroid impact

I have a project due in a couple days. I have to do a simulation of what would happen during an asteroid impact on earth. I found this short video on youtube:
text
and it shows exactly what I want to do.
I tried doing it myself because the author did not do any tutorial or explain how they did it except for the fact that they used 'flip fluid addon' which I have. I watched countless tutorials but nothing seems to work because no one did it. Tutorials are all on how to do ocean/sea and how to make an object go through a liquid. I need to make it so an object falls into the liquid and the recreates the slap from the Youtube video. Could someone point me to the right direction? It's really important.
Thank you.

Creating frosted glass three webgl

I'm having trouble to find how to create a material with the look of frosted glass. I haven't found anything on the web that looks what I want to do.
I've tried a lot of settings for the material.
In this link you can see what I'm trying to get..
Does anybody have an idea how to solve this?
Regards
Rikard
One way I've encountered that worked well for me in the past performed a Blit on the portion of the framebuffer you want frosted with the blur algo or normal pattern of your choice. A stencil mask as part of the glass shader is used to determine which portion should be affected and which should not.
This article has a nice writeup on glass refraction which, when used with a blur will give a good effect.
https://beclamide.medium.com/advanced-realtime-glass-refraction-simulation-with-webgl-71bdce7ab825
I know It's not WebGL per se, but I've used the below Unity frosted glass shader before, to great effect. You may be able to extract the pertinent pieces from it and use that knowledge to assemble a WebGL version. https://github.com/andydbc/unity-frosted-glass
I'm about to undertake this myself, and will update this answer with actual code 'if' I succeed.

Unity 3D and Mixamo Animation -- Feet Inside of ground

I have a weird problem I can't figure out. I'm new enough to Unity 3D I have a hard time even posing the questions sometimes.
Take a careful look at this picture where I drew the red circles:
The problem is that both in the actual game and in the animation preview, this Mixamo character, using the Mixamo running animation, shows her feet under the ground. Actually, this is a problem with all animations. She does NOT start out under the ground (and in fact starts above ground.) But when the game runs, she falls to the ground (well, she doesn't really fall since she has no ridge body. She appears suddenly at level 0, which you'd think is right on the ground, but in fact it shows her a foot or two under the ground), and the animation then plays with her too low. She doesn't have a ridged body, so that is not the problem.
You can also see my settings for the animation. I've played around with all of them and can't fix it. This happens whether or not I apply root motion or foot IK.
Is there a way to 'lift' the animation up so that it is right on the ground?
I just found an issue in Unity. When i kept the T-Pose Model (Skinned) in a folder and the animation of it in another folder then the Animations turn out to misbehave. Like Legs twitching or parts of body going down. When I brought the T-Pose and other animations together in one folder and updated the reference in Rig of T-Pose then all became normal.
One shitty basic problem is just:
There's an obscure setting actually on "Layers" in Animator, on the "base" layer you have to explicitly turn on "IK Pass".
Only in very unusual situations would you want this "off", just another bizarre mistake by Unity.
Reimporting fixed the problem. I do not know why. It seems that when you play with the animations, they sometimes get corrupted.

WebGL Custom Shader Fluid on Image

I am currently trying to dive into the topic of WebGL shaders with THREE.js. I would appreciate if someone could give me some starting points for the following scenario:
I would like to create a fluid-like material, which either interacts with the users mouse or «flows» on it's on.
a little like this
http://cake23.de/turing-fluid.html
I would like to pass a background image to it, which serves as a starting point in terms of which colors are shown in the «liquid sauce» and where they are at the beginning. so to say: I define the initial image which is then transformed by a self initiated liquid flowing and also by the users interaction.
How I would proceed, with my limited knowledge:
I create a plane with the wanted image as a texture.
On top (between the image and the camera) I create a new mesh (plane too?) and this mesh has some custom vertex and fragment shaders applied.
Those shaders should somehow take the color from behind (from the image) and then move those vertices around following some physical rules...
I realize that the given example above has unminified code, but still it is so much, that I can't really break it down to simpler terms, which I fully understand. So I would really appreciate if someone could give me some simpler concepts which serve as a starting point for me.
more pages addressing things like this:
http://www.ibiblio.org/e-notes/webgl/gpu/fluid.htm
https://29a.ch/sandbox/2012/fluidwebgl/
https://haxiomic.github.io/GPU-Fluid-Experiments/html5/
Well, anyway thanks for every link or reference, for every basic concept or anything you'd like to share.
Cheers
Edit:
Getting a similar result (visually) like this image would be great:
I'm trying to accomplish a similar thing. I am being surfing the web a lot. Looking for any hint I can use. so far, my conclusions are:
Try to support yourself using three.js
The magic are really in the shaders, mostly in the fragments shaders it could be a good thing start understanding how to write them and how they work. This link is a good start. shader tutorial
understand the dynamic (natural/real)behavior of fluid could be valuable. (equations)
maybe, this can help you a bit too. Raindrop simulation
If you have found something more around that, let me know.
I found this shaders already created. Maybe, any of them can help you without forcing you to learn a plenty of stuff. splash shaders
good luck

three.js shadowCascade DirectionalLight

I'm trying to copy the shadowCascade functionality from http://threejs.org/examples/webgl_morphtargets_md2_control.html to my project. I did this 1:1 however I only get a a little bit of shadowing at a certain angles and rotations, and often cut off. Further, enabling shadowCascade from start throws shader errors. I have to wait for some time until I can set shadowCascade = true.
I tried to find documentation, links or hints explaining how shadowCascade works and what all those parameters do, without success so far.
All in all I'm rather confused, I don't really understand what is happening and why. Thanks in advance for some clarification and help!
Here's a screenshot
Edit: Here's a video of the effect
The shadowCascade code has not been a significant focus of development in more than a year. There may be problems. If you want to pursue this, and track down possible bugs, that would be great. Some issues may be due to your device and/or browser, however.
For now, I would suggest you use a directional light with the character as the target and a tight shadow box.
three.js r.66

Resources