I have been using advanced renderers like Vray to render gemstones (offline). I am working on a project to render them in real time using three.js
I am not a 3D expert and am wondering if its possible to implement some of the more advanced refraction, reflection shaders to simulate a sparkling/faceted gemstone, and if so where can I find the code to implement it
For simulated refraction and reflection using cubemap shaders within Three.js, I would look at the source within this demo: http://stemkoski.github.io/Three.js/Bubble.html
For accurate Raytracing using Javascript (similar to VRay or other photon-lighting techniques): http://29a.ch/2010/6/2/realtime-raytracing-in-javascript
Related
Three.js has good set of Effectcomposers post processing and via shaderpass we can add any GLSL shader. But PixiJS has even great list of filters. Is there some direct way to copy these filters as GLSL code to shaderpass of three.js. Unfortunately these filters are embed deep with uniforms and there appears no simple way to copy these filters in three.js
May I have a 2D layer for UI, Text, Buttons, etc over the 3D scene in ThreeJS?
Ideally something like engine from PixiJS inside ThreeJS? I've seen PixiJS offers some 3D features so why not combine both libraries in something super-powerful? I just do not want to place any HTML Dom elements over WebGL canvas as this will probably slow down performance on Mobile devices.
One way to solve this issue is to implement the UI as screen space sprites like demonstrated in the following official example (check out how the red sprites are rendered):
https://threejs.org/examples/webgl_sprites
The idea is to render them with a separate orthographic camera and an additional call of WebGLRenderer.render(). Besides, instances of THREE.Sprite do support raycasting which is of course useful when implementing interaction.
Building up on Mugen87's answer, you can also use THREE.Shape to make visual containers adapted to the user screen size :
https://threejs.org/docs/#api/en/extras/core/Shape
You can use THREE.Shape to make mesh-based text, is illustrated in this example :
https://threejs.org/examples/?q=text#webgl_geometry_text_shapes
You should also have a look at three-mesh-ui, an add-on for building mesh-based user interface with three.js :
https://github.com/felixmariotto/three-mesh-ui
I am using THREE.js via this - https://github.com/ubilabs/google-maps-api-threejs-layer and I would like to implement custom logic for switching LODs. The main reason is that distance from camera is still the same but camera have scale set based on zoom level of map. I would like to switch LOD based on zoom level. I am trying to figure out how to "hack" LOD logic so I could pass own function which will be called by THREE.js and will return which LOD to use.
Please can you give me some hints how to implement this in the way as clean as possible?
I am trying to simulate the OpenGL flat shading model using Three.js. My idea is creating an example like http://en.wikipedia.org/wiki/File:Phong-shading-sample.jpg. I was trying to change some different shading models but I cannot obtain the desired result.
Is it possible to create this scene in three.js?
Thanks in advance
Materials e.g. the MeshBasicMaterial have an option called "shading". It can be set to THREE.None, THREE.FlatShading, THREE.SmoothShading.
I am not sure if you need a light source in the first place or wether you have to enable shading for a the whole scene. Look at the demos at the Three.js website for something with shading.
I have fbx model exported from 3ds max. I have 3d coordinate that are extracted from a motion capture session. I want to animate the model using these 3d coordinates. after googling I found xna can be used for this purpose.
I found a tutorial on digitalrun that used kinectxna to capture motion and animate .fbx model using xna. but I can't build it because it wants kinect hardware elements.
I found another tutorial here. I am newbie to xna. I faced difficulties to understand that.can someone point me to right tutorial that expalins skeletal animation of .fbx model using xna?
You can start with this example to understand how animation work:
http://xbox.create.msdn.com/en-us/education/catalog/sample/skinned_model
The animation data is contained in the model itself. But you can change some code to work with your 3d coordinates.
Also...
I found a library to animation. XNAnimation Library
P.S. You can find a lot of tutorials and libraries for animation if you search "Skinned Model"