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
Related
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.
I've been following some tutorials to make this simple sandbox with a test .glb file.
https://codesandbox.io/s/zen-black-et9cs?file=/src/App.js
Everything seems to work except the shadows. I can't find any missing castShadow/recieveShadow/shadowMap declarations anywhere... just not sure what I'm missing.
Thanks if you can point to my mistake!
Increasing the shadow map size to such a high value is no good approach since it's bad for performance.
Instead, decrease the frustum of the shadow camera. Use the following values:
shadow-camera-near={0.1}
shadow-camera-far={20}
shadow-camera-left={-10}
shadow-camera-right={10}
shadow-camera-top={10}
shadow-camera-bottom={-10}
Keep in mind that you can visually debug and thus better optimize the shadow camera by using THREE.CameraHelper.
I figured it out - it was the shadow-mapSize-width and height. 1024 wasn't enough, I had to bump that number much bigger (works at 10240). Not sure why this is the case, perhaps my imported model is of a different scale or something. But it works now!
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.
I have a strange problem which has been bugging me for quite a while now, the issue is best explained by a short video:
As you can see the objects in the scene have a jitter when you move the camera around but also a similar thing happens every now and then when the camera is not moving. It's been driving me crazy for a while now. This video has been taken on a Tinkerboard with TinkerOS, but the same issue is also there on a Tinkerboard with FlintOS.
On a regular laptop there is no issue and everything is moving smoothly. I'm not sure if this is a bug or if it is expected behaviour seeing the differences in hardware, so I was hoping somebody could shed some light on this.
Here is a WebGL report from the Tinkerboard:
Here a WebGL report from my laptop:
Obviously there are differences but I have no idea if any of these difference would explain this behaviour.
Can anyone clarify?
Thanks!
The most likely issue is precision; most mobile GPUs map mediump variables in shaders to FP16 data types, most desktop GPUs map them FP32 data types.
What are your shaders here? Try using "highp" everywhere you compute positions.
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