Motion Blur with WebGL and three.js - javascript

Is there a way to achieve high-performance motion-blur effect in WebGL?
I'm using Three.js, and the scene is a few simple plane objects with different textures. I move the camera in x axis.

This example does a post processing pass of motionblur:
http://mrdoob.github.com/three.js/examples/webgl_materials_cubemap_dynamic.html

Related

Three.js How to make Object3D looks at near of view frustum not a point or render like sprite?

I'm a newbie about 3D programming.
I'm trying to use three.js and Spine to render 2D-Characters on 3D-Space.
And I want to render Mesh as Sprite.
It means objects look at near view with parallel always not a camera's point with lookAt() function.
Spine has SkeletonMesh which is inherited by Mesh.
So It shows like 3D Objects even if it has only one face.
Is there any simple way?
or please advice mathematical method.
Thanks.
If you want an object face the camera, but look in a direction that is parallel to the look direction of the camera, you can use this pattern:
object.quaternion.copy( camera.quaternion );
You can't assign the quaternion, you must copy it every frame in the animation loop -- or at least when the camera changes its orientation.
This approach is an alternative to using
object.lookAt( camera.position );
three.js r.84

Perspective transformation in three.js

I wonder if there is an easy way to do perspective transformation/distort/skewing to a simple plane (or even 3D object) in three.js? Preferably the mouse controls?
Something like in this example: jsfiddle.net/rjw57/A6Pgy/ except in three.js - fiddle is built directly in WebGL.
Otherwise, any idea how to reach the similar result?

Spinning 3D WebGL Shapes

I am supposed to draw a transparent sphere which can be rotated by mouse dragging. I tried to start learning the basis of WebGl but I have not found any appropriate sources. Can anybody help me how to start learning WebGl and also how to draw 3D shapes such as Sphere or tetrahedron and how I can spin it in all dimensions ?
Thanks.
I'd recommend you use three.js but if you really want to learn WebGL start with http://webglfundamentals.org ;)
I would suggest using a framework like three.js that abstracts webGL's functionality, it makes doing things like this a breeze. Check out threejs.org and http://learningthreejs.com/

Three.js - Sprites and light

I'm implementing a little 3D maze game, rendering the walls as Meshes affected by a PointLight. Some objects will be implementes as Sprites, but I'm having an issue....the objects appear fully iluminated, a behavior like MeshBasicMaterial.
It's possible to have these Sprites affected by the light just like Lambert or Phong materials?
Instead of using a Sprite, why not use a PlaneGeometry with a MeshLambertMaterial, and keep the rotation of the plane in sync with the rotation of the camera so that the plane always faces the camera just as a Sprite does? See the related question Three.js - billboard effect, maintain orientation after camera pans for further details.
Having Sprites respond to lights is currently not supported. They are affected by Fog, however.
three.js r.62

Three.JS, How to configure the camera to do not upside down the model?

I am working on a 3D model of a building using Three.JS and Collada loader.
I'm improving my system interactivity, but I have two main issues:
1- When I rotate the model in the scene, it rotates in 3 axis and it makes it upside down! I want to keep the model fixed in horizontal axis and only rotate it along Y axis (Up).
A live sample How I can rotate this cube only around Y Axis (Up)?
2-How I can have a smooth control on the system using mouse movements? For example in big models, it is not easy to zoom to a specific small object smoothly. How I can configure the camera to zoom, pan and rotate smoothly?
Thanks
You are not rotating the model. You are rotating the camera.
Use OrbitControls instead of TrackballControls -- it will keep the camera right-side-up.
OrbitControls should be smooth. If it is not, then there may be something wrong with your model. That can only be handled on a case-by-case basis.
You are using a version of the library that is a year old. It is wise to update to the current version.
three.js r.57.
Add the following in your script:
controls.getMouseProjectionOnBall2 = controls.getMouseProjectionOnBall;
controls.getMouseProjectionOnBall = function(x, y){
return controls.getMouseProjectionOnBall2.call(controls, x, controls.screen.height/2);
}
Regarding the jerky movements, I see you're doing everything possible already (often people omit requestAnimationFrame). I don't think there's anything you can do to reduce jerkiness other than reduce the complexity of your building.

Categories