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
Related
I am trying to distinguish car lights from the light reflection from street at night images. For example, in an image like this:
I tried changing to some other color spaces, but it didn't work. For example, cvtColor(image, gray, CV_HSV2BGR_FULL); made it like:
However, in this post it works fine.
Is there any way I can do something similar for this image? I am using OpenCV3.1 with C++ on Windows (Python would also be great).
In general, a reflection is a light source. As far as light propagation is concerned, the light source is the direction the photons are coming from. It might be a source or a reflection.
Thus, a better view on the problem would be to think more about what you are trying to detect. In the post you referenced, the problem is much simpler, since the reflections are not blown out (reaching maximum brightness), while the light sources are (or they are close enough). In your image, due to the low quality of the capture, the reflections and the light sources have similar brightness.
To emphasize why this is a problem, your approach is a local approach. Think about a very small patch (e.g. 3x3 pixels) from your image. Could you tell if it's from a reflection or not?
Therefore, a better view would be to think about shapes. You want to detect car lights, which seem to be round, of about the same size and white.
I would suggest something like a blob detector finely tuned to your problem, or to use your technique to threshold the image, and then run a CCA and measure the circularity/size of the components.
You can also consider doing some cropping/filling in the city lights with black since the camera seems fixed.
I purchased 3D Models to use in SceneKit, but I am having trouble making the model appear like the final product shown on the sites where I buy them from. I have been purchasing .obj files and converting them in Xcode. I was able to successfully complete one model, but I have 5 others all running into the same problem.
As you can see, I would like it to look like this (picture from the site I purchased it from) Image 1
But when I move the .obj file (came with many more as well) this is where it gets confusing. The model has a lot of materials (which I don't understand as well) and when I try to add one of the textures through "Diffuse" it doesn't work at all. This is the best I got.Image 2
The textures also don't seem right, these are all of them but I don't understand even if they linked up, how it would achieve the shiny metal look? Thanks.
Image 3
The materials look like this and there are tons that are repetitive (over 100)
Image 4
Any guidance will be appreciated. Thank you!
You will need to understand how a material is applied on a 3D object. A .obj file will not have a material applied on it, but will have image files, which would then be UV mapped around the 3D object. The diffuse image that you just added to the object is in simple terms, the colour of the surface of the material.There are different components that can be applied on the 3D object, like specular, normal, occlusion, etc. Of course just applying the diffuse component was not going to give you a good enough result.
This Unity doc is what made me understand what each of these components are and what they do when applied on an object.
https://docs.unity3d.com/Manual/StandardShaderMaterialParameters.html
This is pretty much similar to what we use in SceneKit, and you should be able to pick up how the map is to be applied on your 3D model.
Basically, this is what happens when you correctly apply the maps to the 3D model:
Another thing that you might want to look into is PBR(Physically Based Rendering)
Depending on the 3D Model you purchased, maybe you would find this helpful.
https://developer.apple.com/videos/play/wwdc2016/609/
This WWDC video should give you an understanding of how PBR works.
Also, https://medium.com/#avihay/amazing-physically-based-rendering-using-the-new-ios-10-scenekit-2489e43f7021
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 have never used Blender except for quick trials when I installed in Linux, but I wonder if I can used to solve a very specific problem.
I want to render some images showing a vehicle projecting light in a road with some objects (people, posts, signs). I need a bird's eye (superior, orthogonal) view, and the view from inside the vehicle (perspective, first-person) that is the image that would be seen by the driver or rider.
My question is: "Which CONCEPTS should I look for when searching Blender tutorials, in order to:
Select and use the proper rendering algorithm;
Modeling a scene with surfaces, materials, light sources and cameras;
Adding photorealistic behavior regarding light diffusion, reflection, etc.
Sorry if that is too obvious or too basic, but I am not even sure if Blender is able to model such a thing with an acceptable degree of photorealism (not super-realistic, that is not my intention).
Also, if there is another more appropriate StackExchange site to post this quesion, please let me know.
A nice First-Person viewport would be similar to this (without contour lines):
And a nice bird's eye viewport (witout color-mapping) would be this:
Cycles is blender's newer render engine that is fully raytraced and can easily create realistic results. On the other hand the older blender internal renderer can give you more control over lights, like length and angle from source but also the ability to subtract light from areas, it also supports volumetric rendering (if you want a foggy lit area) which is being worked on for cycles. This may be a key to the results you want. As you want to have control over the area that is lit I would run a couple of tests with lights over a plane to see whether cycles or blender internal can easily give the results your after.
As for the final render you can set the camera to perspective with control over focal length or orthographic and adjust scale as well as the option of a panoramic camera to get the final image you want.
Blender includes a ruler and protractor feature, there are also a couple of addons that may help. The scene settings offer metric or imperial display of measurements within blender.
For concepts, it sounds like your final scene would be fairly simple and any basic modelling and texturing would help. Blendswap could be a good resource for free models to help get you started.
For tutorials Blender Cookie is a great site for tutorials on specific tasks and has a good introduction to blender tutorial, while Blenderguru tutorials focus more on the final image.
Blender has also had it's own stackexchange site blender.stackexchange.com for a few months now.
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