Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VREffect.js: unwanted ghosting occurs when objects are added to the camera #7041

Closed
skezo opened this issue Aug 24, 2015 · 2 comments
Closed

Comments

@skezo
Copy link

skezo commented Aug 24, 2015

Issue
When adding an object (e.g. cube) to the camera while VREffect.js is active ghosting will occur on the object when the camera moves. This happens with master and dev versions (r.72) of Three.js and VREffect.js

ghosting

To see the issue in action visit: http://misalabs.azurewebsites.net/ghosting/index.html using iPhone (iOS 8+ safari) or Android 4.4+ (Chrome). Press the "Cardboard" icon to activate VR mode. The live example is using webvr-manager but the issue can be recreated using the below code.

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.3, 10000);
//Add camera to scene
scene.add(camera)

// Apply VR headset positional data to camera.
var controls = new THREE.VRControls(camera);

// Apply VR rendering to renderer.
var effect = new THREE.VREffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight);

// Create 3D object to attach to camera
var geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh(geometry, material);
cube.position.z = -3;

// Add cube to three.js camera
camera.add(cube);

//Animation Loop
function animate(timestamp) {
requestAnimationFrame(animate);
controls.update();
effect.render(scene, camera);
}
animate();

Expected outcome
The object added to the camera should appear fixed to the camera with no ghosting effect present while moving the camera.

no-ghosting

Workaround:
If I add camera.updateMatrixWorld() before the effect.render(scene, camera) in the callback of the requestAnimationFrame() method the ghosting stops. For example:

//Animation Loop
function animate(timestamp) {
requestAnimationFrame(animate);
controls.update();
camera.updateMatrixWorld();
effect.render(scene, camera); 
}
animate();

To see the workaround in action visit: http://misalabs.azurewebsites.net/ghosting/no-ghosting.html
using iPhone (iOS 8 safari) or Android 4.4+ (Chrome). Press the "Cardboard" icon to activate VR mode. The live example is using webvr-manager but the workaround can be recreated using the above code.

@skezo skezo changed the title VREffect.js: unwated ghosting occurs when objects are added to the camera VREffect.js: unwanted ghosting occurs when objects are added to the camera Aug 24, 2015
@WestLangley
Copy link
Collaborator

Yes. VREffect.render() is accessing camera.matrixWorld() without first updating it.

The proper fix is to add a call to camera.updateMatrixWorld() within VREffect.render(), instead.

However, this issue should be automatically resolved when #7019 is merged, and changes to VREffect.render() should not be required.

@brianchirls
Copy link
Contributor

I see #7019 has been merged. Should this one be closed? Can someone confirm it's fixed?

@mrdoob mrdoob closed this as completed Nov 4, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants