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
Related
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.
Somebody knows how it's possible to have so good quality for the 3D Objects like here http://showroom.littleworkshop.fr/? The objects are exported at this quality from 3DsMax or Blender or something similar, or the quality it's improved in threejs? As far I saw, the project was created with threejs. Any information regarding this project it will be helpful.
Thank you.
Question of quality is subjective. A better question would be "how can I create a scene using three.js with photo-realistic lighting and materials".
So here's an answer to that. There are a few points that make the example you provided look good:
1 - lighting. The example uses a mixture of direct and ambient lighting.
It is practically impossible to generate such lighting in real time in three.js (or any other 3d package for that matter) with the current state of the art on commodity hardware. So, you need to use light-maps. Light maps are pre-rendered textures of light and shadow, they can take a long time to generate, but look incredible, as demonstrated by example you mentioned. You can use Blender's Cycles renderer to generate light maps using "Bake" feature. The topic of lightmap generation is really outside of the scope of the question.
2 - Physically based materials. This is used to refer to material models that have excellent representation of real-life materials beyond "plastic". Three.js had at least 1 such maretial: StandardMaterial which is based on Metalness/Roughness/Albedo model (https://threejs.org/examples/?q=material#webgl_materials_standard)
good luck!
Turn on Antialias for better quality of rendering it works great
Also use lights as per requirement and camera view
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
I've been making a game in scene kit, but the edges of objects are difficult to see, making some of the games details impossible to see. Is there a way to make a black outline around all the game objects?
you could use an SCNTechnique as mentioned in another answer (you can have a look at this article about cel shading, which has an edge-detection pass) but full-frame post-processes are quite expensive.
On OS X you can also leverage geometry shaders (see this article). But it's not available on iOS and might be harder to implement and get right.
I would go with a much easier technique, which only involves vertex and fragment shaders. You can take a look at this article, which gives an example that's easy to re-create in SceneKit using SCNProgram or shader modifiers.
There is an example of making a glowing outline for nodes that uses SCNTechnique here:
https://github.com/laanlabs/SCNTechniqueGlow
You could modify the color and blur method to achieve an stroked outline effect.
Another SCNTechnique example, as referenced here: https://www.nurfacegames.com/everything-you-wanted-to-know-about-outline-shaders/, is to render your node slightly larger behind then again in front at regular size.
Here's a playground example of that: https://github.com/mackhowell/scenekit-outline-shader-scntechnique.
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