Logarithmic depth buffer for avatars? #3490
Comments
|
This probably wouldn't be related to depth buffers, but rather float accuracy of rendering with large distance offsets in the matrix chain. The fix might be to either clean up the matrix math, or perform intelligent rebasing of objects to a local frame of reference when they get far from their origin. |
|
An alternative way I've seen to reproduce this is to let your avatar fall into the void for a few minutes. |
|
Line 122 in 1ca437f Change |
I will try to create another intermediate object for avatar, which is translated to the bone root position, so that all character bone transformation can be done on origin position. |
ReasonThis is EnvironmentCodeThis is the simple example from <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>three-vrm example</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="https://unpkg.com/[email protected]/build/three.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
<script src="./lib/three-vrm.js"></script>
<script>
// renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );
const offset = 100000.0;
// camera
const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 30 );
camera.position.set( 0.0, offset, 5.0 );
// camera controls
const controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
controls.target.set( 0.0, offset, 0.0 );
controls.update();
// scene
const scene = new THREE.Scene();
// light
const light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1.0, 1.0, 1.0 ).normalize();
scene.add( light );
// gltf and vrm
const loader = new THREE.GLTFLoader();
loader.crossOrigin = 'anonymous';
loader.load(
// URL of the VRM you want to load
'./models/scilly_drophunter_v31.6_Guilty.vrm',
// called when the resource is loaded
( gltf ) => {
// generate VRM instance from gltf
THREE.VRMDebug.from( gltf ).then( ( vrm ) => {
const midObj = new THREE.Object3D();
scene.add( midObj );
midObj.add( vrm.scene );
midObj.position.copy(new THREE.Vector3( 0, offset, 0 ));
vrm.humanoid.getBoneNode( THREE.VRMSchema.HumanoidBoneName.Hips ).rotation.y = Math.PI;
vrm.springBoneManager.reset();
} );
},
// called while loading is progressing
( progress ) => console.log( 'Loading model...', 100.0 * ( progress.loaded / progress.total ), '%' ),
// called when loading has errors
( error ) => console.error( error )
);
// helpers
const gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>Test 1:
|
FixedScreenshotJumping below Environment
TestTested on
|
Test (Additional)Tested on
|
Test (Additional)Tested on
|
|
|
In very large scale scenes it is apparent that the scene uses logarithmic depth buffers but the avatar does not, is it possible to update avatars to use the logarithmic depth buffer too?
Move the player 1,000,000 units from the center to see this effect clearly.
The text was updated successfully, but these errors were encountered: