Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 7e191836 编写于 作者: L Luca Siciliano
浏览文件
操作

Added new effect for the Oculus Rift

上级 7697a481
隐藏空白更改
内联 并排
Showing with 426 addition and 0 deletion
examples/js/effects/OculusRiftEffect.js 0 → 100644
浏览文件 @ 7e191836
/**
* @author troffmo5 / http://github.com/troffmo5
*
* Effect to render the scene in stereo 3d side by side with lens distortion.
* It is written to be used with the Oculus Rift (http://www.oculusvr.com/) but
* it works also with other HMD using the same technology
*/
THREE.OculusRiftEffect = function ( renderer ) {
// Configuration
this.separation = 10;
this.distortion = 0.1;
this.aspectFactor = 1;
this.fov = null; // use original camera FOV
// initialization
var _width, _height;
var _pCamera = new THREE.PerspectiveCamera();
_pCamera.matrixAutoUpdate = false;
_pCamera.target = new THREE.Vector3();
var _scene = new THREE.Scene();
var _oCamera = new THREE.OrthographicCamera( -1, 1, 1, -1, 1, 1000 );
_oCamera.position.z = 1;
_scene.add( _oCamera );
// pre-render hooks
this.preLeftRender = function() {};
this.preRightRender = function() {};
renderer.autoClear = false;
var _params = { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
var _renderTarget = new THREE.WebGLRenderTarget( 800, 600, _params );
var _material = new THREE.ShaderMaterial( {
uniforms: {
"tex": { type: "t", value: _renderTarget },
"c": { type: "f", value: this.distortion }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
" vUv = uv;",
" gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
// Formula used from the paper: "Applying and removing lens distortion in post production"
// by Gergely Vass , Tamás Perlaki
// http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.136.3745
fragmentShader: [
"uniform float c;",
"uniform sampler2D tex;",
"varying vec2 vUv;",
"void main()",
"{",
" vec2 uv = vUv;",
" vec2 vector = uv * 2.0 - 1.0;",
" float factor = 1.0/(1.0+c);",
" float vectorLen = length(vector);",
" vec2 direction = vector / vectorLen;",
" float newLen = vectorLen + c * pow(vectorLen,3.0);",
" vec2 newVector = direction * newLen * factor;",
" newVector = (newVector + 1.0) / 2.0;",
" if (newVector.x < 0.0 || newVector.x > 1.0 || newVector.y < 0.0 || newVector.y > 1.0)",
" gl_FragColor = vec4(0.0,0.0,0.0,1.0);",
" else",
" gl_FragColor = texture2D(tex, newVector);",
"}"
].join("\n")
} );
var mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), _material );
_scene.add( mesh );
this.setSize = function ( width, height ) {
_width = width / 2;
_height = height;
_renderTarget = new THREE.WebGLRenderTarget( width, height, _params );
_material.uniforms[ "tex" ].value = _renderTarget;
renderer.setSize( width, height );
};
this.render = function ( scene, camera ) {
renderer.clear();
_material.uniforms['c'].value = this.distortion;
// camera parameters
if (camera.matrixAutoUpdate) camera.updateMatrix();
_pCamera.fov = this.fov ? this.fov : camera.fov;
_pCamera.aspect = camera.aspect / (2*this.aspectFactor);
_pCamera.near = camera.near;
_pCamera.far = camera.far;
_pCamera.updateProjectionMatrix();
// Render left
this.preLeftRender();
var offset = new THREE.Vector3(-this.separation,0,0);
_pCamera.matrix.copy(camera.matrix);
_pCamera.matrix.translate(offset);
_pCamera.matrixWorldNeedsUpdate = true;
renderer.setViewport( 0, 0, _width, _height );
renderer.render( scene, _pCamera, _renderTarget, true );
renderer.render( _scene, _oCamera );
// Render right
this.preRightRender();
offset.set(this.separation,0,0);
_pCamera.matrix.copy(camera.matrix);
_pCamera.matrix.translate(offset);
_pCamera.matrixWorldNeedsUpdate = true;
renderer.setViewport( _width, 0, _width, _height );
renderer.render( scene, _pCamera, _renderTarget, true );
renderer.render( _scene, _oCamera );
};
};
examples/webgl_geometry_minecraft_oculusrift.html 0 → 100644
浏览文件 @ 7e191836
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - geometry - minecraft - Oculus Rift</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: rgb(168, 148, 0);
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #bfd1e5;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: #a06851;
}
#oldie {
background:rgb(100,0,0) !important;
color:#fff !important;
margin-top:10em !important;
}
#oldie a { color:#fff }
</style>
</head>
<body>
<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - <a href="http://www.minecraft.net/" target="_blank">minecraft</a> demo [oculus rift]. featuring <a href="http://painterlypack.net/" target="_blank">painterly pack</a><br />(left click: forward, right click: backward, o,p: distortion [<span id='distVal'>0</span>], k,l; eye separation [<span id='sepVal'>0</span>], n,m; fov [<span id='fovVal'>0</span>])</div>
<script src="../build/three.min.js"></script>
<script src="js/controls/FirstPersonControls.js"></script>
<script src="js/ImprovedNoise.js"></script>
<script src="js/Detector.js"></script>
<script src="js/effects/OculusRiftEffect.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) {
Detector.addGetWebGLMessage();
document.getElementById( 'container' ).innerHTML = "";
}
var container, stats;
var camera, controls, scene, renderer;
var mesh;
var worldWidth = 128, worldDepth = 128,
worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2,
data = generateHeight( worldWidth, worldDepth );
var clock = new THREE.Clock();
init();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
camera.position.y = getY( worldHalfWidth, worldHalfDepth ) * 100 + 100;
controls = new THREE.FirstPersonControls( camera );
controls.movementSpeed = 1000;
controls.lookSpeed = 0.125;
controls.lookVertical = true;
scene = new THREE.Scene();
// sides
var matrix = new THREE.Matrix4();
var pxGeometry = new THREE.PlaneGeometry( 100, 100 );
pxGeometry.faces[ 0 ].materialIndex = 1;
pxGeometry.applyMatrix( matrix.makeRotationY( Math.PI / 2 ) );
pxGeometry.applyMatrix( matrix.makeTranslation( 50, 0, 0 ) );
var nxGeometry = new THREE.PlaneGeometry( 100, 100 );
nxGeometry.faces[ 0 ].materialIndex = 1;
nxGeometry.applyMatrix( matrix.makeRotationY( - Math.PI / 2 ) );
nxGeometry.applyMatrix( matrix.makeTranslation( - 50, 0, 0 ) );
var pyGeometry = new THREE.PlaneGeometry( 100, 100 );
pyGeometry.faces[ 0 ].materialIndex = 0;
pyGeometry.applyMatrix( matrix.makeRotationX( - Math.PI / 2 ) );
pyGeometry.applyMatrix( matrix.makeTranslation( 0, 50, 0 ) );
var pzGeometry = new THREE.PlaneGeometry( 100, 100 );
pzGeometry.faces[ 0 ].materialIndex = 1;
pzGeometry.applyMatrix( matrix.makeTranslation( 0, 0, 50 ) );
var nzGeometry = new THREE.PlaneGeometry( 100, 100 );
nzGeometry.faces[ 0 ].materialIndex = 1;
nzGeometry.applyMatrix( matrix.makeRotationY( Math.PI ) );
nzGeometry.applyMatrix( matrix.makeTranslation( 0, 0, -50 ) );
//
var geometry = new THREE.Geometry();
var dummy = new THREE.Mesh();
for ( var z = 0; z < worldDepth; z ++ ) {
for ( var x = 0; x < worldWidth; x ++ ) {
var h = getY( x, z );
dummy.position.x = x * 100 - worldHalfWidth * 100;
dummy.position.y = h * 100;
dummy.position.z = z * 100 - worldHalfDepth * 100;
var px = getY( x + 1, z );
var nx = getY( x - 1, z );
var pz = getY( x, z + 1 );
var nz = getY( x, z - 1 );
dummy.geometry = pyGeometry;
THREE.GeometryUtils.merge( geometry, dummy );
if ( ( px != h && px != h + 1 ) || x == 0 ) {
dummy.geometry = pxGeometry;
THREE.GeometryUtils.merge( geometry, dummy );
}
if ( ( nx != h && nx != h + 1 ) || x == worldWidth - 1 ) {
dummy.geometry = nxGeometry;
THREE.GeometryUtils.merge( geometry, dummy );
}
if ( ( pz != h && pz != h + 1 ) || z == worldDepth - 1 ) {
dummy.geometry = pzGeometry;
THREE.GeometryUtils.merge( geometry, dummy );
}
if ( ( nz != h && nz != h + 1 ) || z == 0 ) {
dummy.geometry = nzGeometry;
THREE.GeometryUtils.merge( geometry, dummy );
}
}
}
var textureGrass = THREE.ImageUtils.loadTexture( 'textures/minecraft/grass.png' );
textureGrass.magFilter = THREE.NearestFilter;
textureGrass.minFilter = THREE.LinearMipMapLinearFilter;
var textureGrassDirt = THREE.ImageUtils.loadTexture( 'textures/minecraft/grass_dirt.png' );
textureGrassDirt.magFilter = THREE.NearestFilter;
textureGrassDirt.minFilter = THREE.LinearMipMapLinearFilter;
var material1 = new THREE.MeshLambertMaterial( { map: textureGrass, ambient: 0xbbbbbb } );
var material2 = new THREE.MeshLambertMaterial( { map: textureGrassDirt, ambient: 0xbbbbbb } );
var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( [ material1, material2 ] ) );
scene.add( mesh );
var ambientLight = new THREE.AmbientLight( 0xcccccc );
scene.add( ambientLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
directionalLight.position.set( 1, 1, 0.5 ).normalize();
scene.add( directionalLight );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
effect = new THREE.OculusRiftEffect( renderer );
effect.setSize( window.innerWidth, window.innerHeight );
// Right Oculus Parameters are yet to be determined
effect.separation = 20;
effect.distortion = 0.1;
effect.fov = 110;
document.getElementById( 'distVal' ).innerHTML = effect.distortion.toFixed(2);
document.getElementById( 'sepVal' ).innerHTML = effect.separation;
document.getElementById( 'fovVal' ).innerHTML = effect.fov;
container.innerHTML = "";
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
// GUI
window.addEventListener( 'resize', onWindowResize, false );
document.addEventListener( 'keydown', keyPressed, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
effect.setSize( window.innerWidth, window.innerHeight );
controls.handleResize();
}
function keyPressed (event) {
switch ( event.keyCode ) {
case 79: /*O*/ effect.distortion -= 0.01; document.getElementById( 'distVal' ).innerHTML = effect.distortion.toFixed(2); break;
case 80: /*P*/ effect.distortion += 0.01; document.getElementById( 'distVal' ).innerHTML = effect.distortion.toFixed(2); break;
case 75: /*K*/ effect.separation -= 1; document.getElementById( 'sepVal' ).innerHTML = effect.separation; break;
case 76: /*L*/ effect.separation += 1; document.getElementById( 'sepVal' ).innerHTML = effect.separation; break;
case 78: /*N*/ effect.fov -= 1; document.getElementById( 'fovVal' ).innerHTML = effect.fov; break;
case 77: /*M*/ effect.fov += 1; document.getElementById( 'fovVal' ).innerHTML = effect.fov; break;
}
}
function generateHeight( width, height ) {
var data = [], perlin = new ImprovedNoise(),
size = width * height, quality = 2, z = Math.random() * 100;
for ( var j = 0; j < 4; j ++ ) {
if ( j == 0 ) for ( var i = 0; i < size; i ++ ) data[ i ] = 0;
for ( var i = 0; i < size; i ++ ) {
var x = i % width, y = ( i / width ) | 0;
data[ i ] += perlin.noise( x / quality, y / quality, z ) * quality;
}
quality *= 4
}
return data;
}
function getY( x, z ) {
return ( data[ x + z * worldWidth ] * 0.2 ) | 0;
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
controls.update( clock.getDelta() );
effect.render( scene, camera );
}
</script>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或