I'd like to code something like this with webgl & three.js:
Where to start with it? I mean besides reading the documentation ofc. I have no idea what kind of algorithm can do this...
Related
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
How can I achieve a similar effect (cel shading, comicbook) with three.js like the example?
Are there any lessons or example code?
Example
http://demonraid.com/wolvie2/
The example you provide is very complex with several effects that make up the comic-like looks.
But if you can settle for a simpler look, then Three.js provides a ready made cel shader that you can combine with an outline effect: https://threejs.org/examples/#webgl_materials_variations_toon
The material is documented here: https://threejs.org/docs/#api/materials/MeshToonMaterial
And the outline effect is here: https://github.com/mrdoob/three.js/blob/master/examples/js/effects/OutlineEffect.js
Three.JS noob here trying to do 2d visualization.
I used d3.js to make an interactive visualization involving thousands of nodes (rectangle shaped). Needless to say there were performance issues during animation because Browsers have to create an svg DOM element for every one of those 10 thousand nodes.
I wish to recreate the same visualization using WebGl in order to leverage hardware acceleration.
Now ThreeJS is a library which I have choosen because of its popularity (btw, I did look at PixiJS and its api didn't appeal to me). I am wanting to know what is the best approach to do 2d graphics in three.js.
I tried creating one PlaneGeometry for every rectangle. But it seems that 10 thousand Plane geometries are not the say to go (animation becomes super duper slow).
I am probably missing something. I just need to know what is the best primitive way to create 2d rectangles and still identify them uniquely so that I can interact with them once drawn.
Thanks for any help.
EDIT: Would you guys suggest to use another library by any chance?
I think you're on the right track with looking at WebGL, but depending on what you're doing in your visualization you might need to get closer to the metal than "out of the box" threejs.
I recommend taking a look at GLSL and taking a look at how you can implement your visualization using vertex and fragment shaders. You can still use threejs for a lot of the WebGL plumbing.
The reason you'll probably need to get directly into GLSL shader work is because you want to take most of the poly manipulation logic out of javascript, at least as much as is possible. Any time you ask js to do a tight loop over tens of thousands of polys to update position, etc... you are going to struggle with CPU usage.
It is going to be much more performant to have js pass in data parameters to your shaders and let the vertex manipulation happen there.
Take a look here: http://www.html5rocks.com/en/tutorials/webgl/shaders/ for a nice shader tutorial.
I would like to create a plastic material using three.js, something like the lighter fuel container here:
http://wiki.blender.org/index.php/Doc:2.4/Tutorials/Render/Import/SolidWorks
I would be glad if I could get a reasonably simple example to start working from.
I am actually not rendering an image but visualizing a mathematical problem (cellular automata). I need a set of interlocking surfaces (something like sheets of plastic foil) with as much visual information as possible, so I can distinguish between them. Therefore I was looking for: translucency, reflections, rotating an object with a fixed light source, visible edges. Later I will add some animated color coding, but for now I need a good material.
Here is the current status of my code:
https://github.com/jeras/three.js/tree/master/pyca
Here is how this networks look for 1D CA, but I would like to handle a 2D problem:
http://rattus.info/al/files/conference.pdf
Thanks,
Iztok Jeras
Well if you are looking for some examples to start working from , you should go to this three.js tutorials site : http://stemkoski.github.io/Three.js .
There is a lot of examples and the ones you might be interested of are :
the tranlucence
the reflection
the refraction
some bubble effect
Hope this helps
I'm trying to find or create a working example of inverse kinematic posing in three.js. Ideally I would like to export human models from Makehuman via their Collada exporter, load them with THREE.ColladaLoader and set them into different poses in three.js programmatically or through some dat.GUI interface. A bit like an artist doll implementation - I don't need animation, but real-time feedback when tweaking the pose would be nice, and inverse kinematic style posing would be highly preferred.
I've been studying and searching information for days. This http://www.youtube.com/watch?v=6om9xy6rnc0 is very close, but I was unable to find any example code or downloads. The closest working example I've found is this: http://mrdoob.github.com/three.js/examples/webgl_animation_skinning.html However that appears to use predefined animation frames, which in turn appears to manipulate the bones in forward kinematics manner so that was not much help either.
I couldn't even find a model for testing, as I don't know what to look for when searching something with IK rigs/skinning/bones compatible with Three.js. Makehuman does seem to have plenty of rigging export options, I don't know if any of those are usable.
Is there a usable IK system in Three.js, and if so, are there any working examples, working human models, or any hints on which exact rigging system/workflow should study to accomplish this? If direct Collada support is not possible, creating the characters in Blender and exporting them is an option too..
EDIT: found this live demo http://www.akjava.com/demo/poseeditor/ but the code is totally unreadable.
I don’t feel competent enough to answer your question, but I’ll post three links which may put you on the right track.
wylieconlon/kinematics
– a great demo of 2D inverse kinematics animation. The code is totally readable.
https://www.khanacademy.org/computer-programming/inverse-kinematics/1191743453
– another demo, this time less flexible but more terse.
How to calculate inverse kinematics
– a rabbit hole of links. Just in case you’d want to dive right into the thing.
This seems promising.
Fullik : javascript fast iterative solver for Inverse Kinematics on three.js
is a conversion from java to Caliko 3D libs
Caliko library is an implementation of the FABRIK inverse kinematics (IK) algorithm
https://github.com/lo-th/fullik