I can't seem to animate an asteroid impact - animation

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.

Related

How was Tekken 3 cinematic intro created (software used, process, effect ...etc)?

Apologies if this is a very specific and out of the blue type of question. Tekken 3 was one of the best games that left a lasting impression on me, growing up, especially the cinematic intro. For me it's still one of the best and coolest game cinematic intros ever, even compared to this era (giving it's been over 20 years now since the game's release). Even though I'm a software developer, I've always been intrigued by how such amazing cinematics intros are created. I've researched on Google everywhere, but unfortunately couldn't find a source that discloses such information. I know it's been over 20 years since and the game is quite old, but I still find it strange that there's no discussion anywhere online on how its amazing cinematic intro was created (what software(s) was used, how the cinematic effect was created ...etc). The best resource info I could find, simply talks about the game characters, moves ..etc. Nothing about the opening cinematic intro. Just for those who need a reference as to what I'm talking about, here's the video from YouTube: https://www.youtube.com/watch?v=IsvtUxEFQaU.
I'm aware it's a very complicated process that requires a highly experienced team to work on it, but I simply want to know what software and what kind of processes/effects were used (even guesses from experienced animators/developers would suffice) and as much information about the process as possible, would be really appreciated. There are numerous tutorials online about how to make computer animations on 3D std max, Maya, Unity and Unreal, but they all look like children Disney animations or animation from the actual game graphic itself, not the cinematic effect rendering you experience from Tekken 3 intro. If you watch its intro you will know what I mean. I would really appreciate any help and would be very intrigued to learn the process if somebody could provide me with a direction and some information on the software and processes used, just from a very high level view.
Thank you so much in advance for the help. You will literally be answering one of my main life's mysteries :)
but they all look like children Disney animations or animation from the actual game graphic itself
I'm sorry, but did we watch the same video? It's entertaining for sure but visually nothing impressive.
This doesn't look like an in-game cinematic so it's probably using a 3d animation package like 3DsMax/Maya/Softimage/etc.. These packages are also used for feature films so I'm not sure where you're getting at that it all looks like children Disney animations. They can also be used for live action for photo realistic renders. Though these days 3DsMax is mostly used for games, Maya is what's mainly being used for films as it's what the studios are using (for the most part, there's exceptions). These packages also include solutions for particle effects, and cloth simulations. Right now Houdini is king for these 2 though.
Of course what matters most is the skills from the team to make the most out of the software.
The process generally goes like this:
Create a script to define the story
Create concept art for characters and locations
Create assets (3d models/textures/shaders)
Rig the assets so they can deform
Animate the assets into shots (modeling/rigging/anim can work in parallel)
Do character effects on your finished shots (cloth, hair, rigid dynamics. This depends on your budget and is optional)
If you're using any other software for lighting/effects, you probably need to export your scene to cache data (alembic is a popular format)
Render everything out
Use a compositing software to add all different elements together and make final tweaks to the shot (optional)
I'm still missing a few stuff, especially for bigger productions, but that's the general idea.

Ive been working on a "mario like" game engine in p5.js, im having some serious trouble with collision avoidance

By collision avoidance, i mean stopping the player from walking through something. Like in mario, he can't just walk through the blocks. I technically succeeded in making this, but it's very very bad. The player often gets stuck on the block once the player hits it, and i cant figure out how to fix it. I put all the code together on an online p5.js editor, Here
In the code i linked, I'm trying to get the player to not go through any of the terrain constructions i make, the one i have currently set up is a red square named 'block1'
Stack Overflow isn't really designed for general "how do I do this" type questions. It's for specific "I tried X, expected Y, but got Z instead" type questions. But I'll try to help in a general sense.
You need to take a step back and break your problem down into smaller steps and then take those steps on one at a time. Can you get a simple program working that just shows two hard-coded rectangles that change color if they're colliding? Get that working perfectly before moving on.
Shameless self-promotion: I wrote a tutorial on collision detection available here. That's for regular Processing, but everything should be basically the same for P5.js. Generally you probably want to use grid-based collision detection to figure out which cell your player is in, and then use rectangle-rectangle collision detection to actually check whether the player has hit a block.
If you're having trouble, please debug your code and try to narrow your problem down to a MCVE and ask a specific technical question. Good luck.

On three.js / editor

I am trying to make a Newton's Cradle on three.js. I am wondering how would I make it so that the balls are able to be pulled and let go so that then they can hit the others and click back and forth?
that is a pretty huge undertaking and not something someone will give you detailed instructions for on this site :) This is probably the reason why your question is downvoted. It's not meant to demotivate you but simply that your question is way too broad. Here are some hints, and definitely come back with more detailed questions once you are on your way:
you need a physics-engine. Have a look at Physijs or cannon.js which
both work well with three.js.
you need some interactions in order to drag one of the balls. For this you will need to understand this demo
but that should be it. You'll need to learn how the physics-engine works, but it will handle all the complicated stuff for you :)

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