Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 7d8fd5f8 编写于 作者: M Mr.doob
浏览文件
操作

CanvasRenderer now renders MeshDepthMaterial properly (per vertex). Gouraud is one step closer :) 

Cleaned up CanvasRenderer and SVGRenderer code a bit.
上级 05b496d8
展开全部 隐藏空白更改
内联 并排
Showing with 226 addition and 180 deletion
build/Three.js
浏览文件 @ 7d8fd5f8
此差异已折叠。
build/ThreeDebug.js
浏览文件 @ 7d8fd5f8
此差异已折叠。
examples/materials_depth.html
浏览文件 @ 7d8fd5f8
......@@ -23,15 +23,9 @@
<script type="text/javascript">
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container, stats;
var container;
var stats;
var camera;
var scene;
var renderer;
var camera, scene, renderer;
var cube, plane;
......@@ -69,7 +63,7 @@
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.Camera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 2000 );
camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.x = 1000;
camera.position.y = 1000;
camera.position.z = 1000;
......@@ -79,7 +73,7 @@
// Plane
var material = new THREE.MeshDepthMaterial( { near: 1, far: 2000, wireframe: true } );
var material = new THREE.MeshDepthMaterial( { near: 1, far: 2000 } );
plane = new THREE.Mesh( new Plane( 1000, 1000, 10, 10 ), material );
plane.rotation.x = - 90 * ( Math.PI / 180 );
......@@ -88,7 +82,7 @@
// Spheres
geometry = new Sphere( 100, 16, 8 );
geometry = new Sphere( 100, 8, 4 );
//material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
material = new THREE.MeshDepthMaterial( { near: 1, far: 2000 } );
......@@ -98,16 +92,19 @@
cube.overdraw = true;
cube.position.x = ( i % 5 ) * 200 - 400;
cube.position.z = Math.floor( i / 5 ) * 200 - 400;
cube.position.z = Math.floor( i / 5 ) * 200 - 350;
/*
cube.position.x = Math.random() * 1000 - 500;
cube.position.y = Math.random() * 1000 - 500;
cube.position.z = Math.random() * 1000 - 500;
*/
cube.rotation.x = Math.random() * 200 - 100;
cube.rotation.y = Math.random() * 200 - 100;
cube.rotation.z = Math.random() * 200 - 100;
/*
cube.scale.x = cube.scale.y = cube.scale.z = Math.random() + 0.5;
*/
......@@ -132,7 +129,7 @@
renderer = new THREE.CanvasRenderer();
//renderer = new THREE.WebGLRenderer();
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......@@ -200,20 +197,20 @@
function loop() {
if ( moveForward ) camera.position.z -= 5; // camera.moveZ( 5 );
if ( moveBackwards ) camera.position.z += 5; // camera.moveZ( - 5 );
if ( moveForward ) camera.position.z -= 10; // camera.moveZ( 10 );
if ( moveBackwards ) camera.position.z += 10; // camera.moveZ( - 10 );
if ( moveUp ) camera.position.y += 5; // camera.moveZ( 5 );
if ( moveDown ) camera.position.y -= 5; // camera.moveZ( - 5 );
if ( moveUp ) camera.position.y += 10; // camera.moveZ( 10 );
if ( moveDown ) camera.position.y -= 10; // camera.moveZ( - 10 );
if ( moveLeft ) camera.position.x -= 5; // camera.moveX( - 5 );
if ( moveRight ) camera.position.x += 5; // camera.moveX( 5 );
if ( moveLeft ) camera.position.x -= 10; // camera.moveX( - 10 );
if ( moveRight ) camera.position.x += 10; // camera.moveX( 10 );
if ( pitchUp ) camera.rotation.x += 0.01; // camera.rotateX( 1 );
if ( pitchDown ) camera.rotation.x -= 0.01; // camera.rotateX( - 1 );
if ( yawLeft ) camera.target.position.x -= 5; // camera.rotation.y += 0.01; // camera.rotateY( 1 );
if ( yawRight ) camera.target.position.x += 5; // camera.rotation.y -= 0.01; // camera.rotateY( - 1 );
if ( yawLeft ) camera.target.position.x -= 10; // camera.rotation.y += 0.01; // camera.rotateY( 1 );
if ( yawRight ) camera.target.position.x += 10; // camera.rotation.y -= 0.01; // camera.rotateY( - 1 );
if ( rollLeft ) camera.rotation.z += 0.01; // camera.rotateZ( 1 );
if ( rollRight ) camera.rotation.z -= 0.01; // camera.rotateZ( - 1 );
......@@ -240,11 +237,9 @@
var object = scene.objects[i];
/*
object.rotation.x += 0.01;
object.rotation.y += 0.005;
object.position.y = Math.sin( object.rotation.x ) * 200;
*/
debugContext.rect( object.position.x * 0.1 - 5, object.position.z * 0.1 - 5, 10, 10 );
......
src/materials/MeshDepthMaterial.js
浏览文件 @ 7d8fd5f8
......@@ -4,8 +4,7 @@
* parameters = {
* near: <float>,
* far: <float>,
* wireframe: <boolean>,
* wireframe_linewidth: <float>
* opacity: <float>
* }
*/
......@@ -14,16 +13,12 @@ THREE.MeshDepthMaterial = function ( parameters ) {
this.near = 1;
this.far = 1000;
this.opacity = 1;
this.wireframe = false;
this.wireframe_linewidth = 1;
if ( parameters ) {
if ( parameters.near !== undefined ) this.near = parameters.near;
if ( parameters.far !== undefined ) this.far = parameters.far;
if ( parameters.opacity !== undefined ) this.opacity = parameters.opacity;
if ( parameters.wireframe !== undefined ) this.wireframe = parameters.wireframe;
if ( parameters.wireframe_linewidth !== undefined ) this.wireframe_linewidth = parameters.wireframe_linewidth;
}
......
src/renderers/CanvasRenderer.js
浏览文件 @ 7d8fd5f8
......@@ -16,6 +16,9 @@ THREE.CanvasRenderer = function () {
_contextFillStyle = '#000000',
_contextLineWidth = 1,
_v1, _v2, _v3, _v4,
_v5 = new THREE.Vertex(), _v6 = new THREE.Vertex(), // Needed for latter splitting tris to quads
_clipRect = new THREE.Rectangle(),
_clearRect = new THREE.Rectangle(),
_bboxRect = new THREE.Rectangle(),
......@@ -25,12 +28,22 @@ THREE.CanvasRenderer = function () {
_light = new THREE.Color( 0xffffffff ),
_ambientLight = new THREE.Color( 0xff000000 ),
_pi2 = Math.PI * 2,
_w, // z-buffer to w-buffer
_vector2 = new THREE.Vector2(), // Needed for expand
_pi2 = Math.PI * 2, _w, // z-buffer to w-buffer
_vector3 = new THREE.Vector3(), // Needed for PointLight
_uv1 = new THREE.UV(), _uv2 = new THREE.UV(), _uv3 = new THREE.UV(), _uv4 = new THREE.UV(),
v5 = new THREE.Vector2(), v6 = new THREE.Vector2(); // Needed for latter splitting tris to quads
_depthMap = document.createElement( 'canvas' ),
_depthMapContext = _depthMap.getContext( '2d' ),
_depthMapGradient = _depthMapContext.createLinearGradient( 0, 0, 255, 0);
_depthMap.width = 255;
_depthMap.height = 4;
_depthMapGradient.addColorStop( 0, "white" );
_depthMapGradient.addColorStop( 1, "black" );
_depthMapContext.fillStyle = _depthMapGradient;
_depthMapContext.fillRect( 0, 0, 255, 4 );
this.domElement = _canvas;
this.autoClear = true;
......@@ -69,8 +82,7 @@ THREE.CanvasRenderer = function () {
this.render = function ( scene, camera ) {
var e, el, element, m, ml, fm, fml, material,
v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, v5x, v5y, v6x, v6y;
var e, el, element, m, ml, fm, fml, material;
if ( this.autoClear ) {
......@@ -103,22 +115,25 @@ THREE.CanvasRenderer = function () {
if ( element instanceof THREE.RenderableParticle ) {
v1x = element.x * _canvasWidthHalf; v1y = element.y * _canvasHeightHalf;
_v1 = element;
_v1.x *= _canvasWidthHalf; _v1.y *= _canvasHeightHalf;
for ( m = 0, ml = element.material.length; m < ml; m++ ) {
material = element.material[ m ];
material && renderParticle( v1x, v1y, element, material, scene );
material && renderParticle( _v1, element, material, scene );
}
} else if ( element instanceof THREE.RenderableLine ) {
v1x = element.v1.x * _canvasWidthHalf; v1y = element.v1.y * _canvasHeightHalf;
v2x = element.v2.x * _canvasWidthHalf; v2y = element.v2.y * _canvasHeightHalf;
_v1 = element.v1; _v2 = element.v2;
_v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
_v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
_bboxRect.addPoint( v1x, v1y );
_bboxRect.addPoint( v2x, v2y );
_bboxRect.addPoint( _v1.positionScreen.x, _v1.positionScreen.y );
_bboxRect.addPoint( _v2.positionScreen.x, _v2.positionScreen.y );
if ( !_clipRect.instersects( _bboxRect ) ) {
......@@ -131,31 +146,29 @@ THREE.CanvasRenderer = function () {
while ( m < ml ) {
material = element.material[ m ++ ];
material && renderLine( v1x, v1y, v2x, v2y, element, material, scene );
material && renderLine( _v1, _v2, element, material, scene );
}
} else if ( element instanceof THREE.RenderableFace3 ) {
element.v1.x *= _canvasWidthHalf; element.v1.y *= _canvasHeightHalf;
element.v2.x *= _canvasWidthHalf; element.v2.y *= _canvasHeightHalf;
element.v3.x *= _canvasWidthHalf; element.v3.y *= _canvasHeightHalf;
_v1 = element.v1; _v2 = element.v2; _v3 = element.v3;
_v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
_v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
_v3.positionScreen.x *= _canvasWidthHalf; _v3.positionScreen.y *= _canvasHeightHalf;
if ( element.overdraw ) {
expand( element.v1, element.v2 );
expand( element.v2, element.v3 );
expand( element.v3, element.v1 );
expand( _v1.positionScreen, _v2.positionScreen );
expand( _v2.positionScreen, _v3.positionScreen );
expand( _v3.positionScreen, _v1.positionScreen );
}
v1x = element.v1.x; v1y = element.v1.y;
v2x = element.v2.x; v2y = element.v2.y;
v3x = element.v3.x; v3y = element.v3.y;
_bboxRect.addPoint( v1x, v1y );
_bboxRect.addPoint( v2x, v2y );
_bboxRect.addPoint( v3x, v3y );
_bboxRect.addPoint( _v1.positionScreen.x, _v1.positionScreen.y );
_bboxRect.addPoint( _v2.positionScreen.x, _v2.positionScreen.y );
_bboxRect.addPoint( _v3.positionScreen.x, _v3.positionScreen.y );
if ( !_clipRect.instersects( _bboxRect ) ) {
......@@ -176,7 +189,7 @@ THREE.CanvasRenderer = function () {
while ( fm < fml ) {
material = element.faceMaterial[ fm ++ ];
material && renderFace3( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene );
material && renderFace3( _v1, _v2, _v3, element, material, scene );
}
......@@ -184,46 +197,41 @@ THREE.CanvasRenderer = function () {
}
renderFace3( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene );
material && renderFace3( _v1, _v2, _v3, element, material, scene );
}
} else if ( element instanceof THREE.RenderableFace4 ) {
element.v1.x *= _canvasWidthHalf; element.v1.y *= _canvasHeightHalf;
element.v2.x *= _canvasWidthHalf; element.v2.y *= _canvasHeightHalf;
element.v3.x *= _canvasWidthHalf; element.v3.y *= _canvasHeightHalf;
element.v4.x *= _canvasWidthHalf; element.v4.y *= _canvasHeightHalf;
_v1 = element.v1; _v2 = element.v2; _v3 = element.v3; _v4 = element.v4;
_v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
_v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
_v3.positionScreen.x *= _canvasWidthHalf; _v3.positionScreen.y *= _canvasHeightHalf;
_v4.positionScreen.x *= _canvasWidthHalf; _v4.positionScreen.y *= _canvasHeightHalf;
v5.copy( element.v2 ); v6.copy( element.v4 );
_v5.positionScreen.copy( _v2.positionScreen );
_v6.positionScreen.copy( _v4.positionScreen );
if ( element.overdraw ) {
expand( element.v1, element.v2 );
expand( element.v2, element.v4 );
expand( element.v4, element.v1 );
expand( _v1.positionScreen, _v2.positionScreen );
expand( _v2.positionScreen, _v4.positionScreen );
expand( _v4.positionScreen, _v1.positionScreen );
}
v1x = element.v1.x; v1y = element.v1.y;
v2x = element.v2.x; v2y = element.v2.y;
v4x = element.v4.x; v4y = element.v4.y;
if ( element.overdraw ) {
expand( element.v3, v5 );
expand( element.v3, v6 );
expand( _v3.positionScreen, _v5.positionScreen );
expand( _v3.positionScreen, _v6.positionScreen );
}
v3x = element.v3.x; v3y = element.v3.y;
v5x = v5.x; v5y = v5.y;
v6x = v6.x; v6y = v6.y;
_bboxRect.addPoint( v1x, v1y );
_bboxRect.addPoint( v2x, v2y );
_bboxRect.addPoint( v3x, v3y );
_bboxRect.addPoint( v4x, v4y );
_bboxRect.addPoint( _v1.positionScreen.x, _v1.positionScreen.y );
_bboxRect.addPoint( _v2.positionScreen.x, _v2.positionScreen.y );
_bboxRect.addPoint( _v3.positionScreen.x, _v3.positionScreen.y );
_bboxRect.addPoint( _v4.positionScreen.x, _v4.positionScreen.y );
if ( !_clipRect.instersects( _bboxRect ) ) {
......@@ -244,7 +252,7 @@ THREE.CanvasRenderer = function () {
while ( fm < fml ) {
material = element.faceMaterial[ fm ++ ];
material && renderFace4( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, v5x, v5y, v6x, v6y, element, material, scene );
material && renderFace4( _v1, _v2, _v3, _v4, _v5, _v6, element, material, scene );
}
......@@ -252,7 +260,7 @@ THREE.CanvasRenderer = function () {
}
renderFace4( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, v5x, v5y, v6x, v6y, element, material, scene );
material && renderFace4( _v1, _v2, _v3, _v4, _v5, _v6, element, material, scene );
}
......@@ -376,7 +384,7 @@ THREE.CanvasRenderer = function () {
}
function renderParticle ( v1x, v1y, element, material, scene ) {
function renderParticle ( v1, element, material, scene ) {
var width, height, scaleX, scaleY, offsetX, offsetY,
bitmap, bitmapWidth, bitmapHeight;
......@@ -404,7 +412,7 @@ THREE.CanvasRenderer = function () {
// TODO: Rotations break this...
_bboxRect.set( v1x + offsetX - width, v1y + offsetY - height, v1x + offsetX + width, v1y + offsetY + height );
_bboxRect.set( v1.x + offsetX - width, v1.y + offsetY - height, v1.x + offsetX + width, v1.y + offsetY + height );
if ( !_clipRect.instersects( _bboxRect ) ) {
......@@ -413,7 +421,7 @@ THREE.CanvasRenderer = function () {
}
_context.save();
_context.translate( v1x, v1y );
_context.translate( v1.x, v1.y );
_context.rotate( - element.rotation );
_context.scale( scaleX, - scaleY );
_context.translate( - bitmapWidth + material.offset.x, - bitmapHeight - material.offset.y );
......@@ -453,7 +461,7 @@ THREE.CanvasRenderer = function () {
width = element.scale.x * _canvasWidthHalf;
height = element.scale.y * _canvasHeightHalf;
_bboxRect.set( v1x - width, v1y - height, v1x + width, v1y + height );
_bboxRect.set( v1.x - width, v1.y - height, v1.x + width, v1.y + height );
if ( !_clipRect.instersects( _bboxRect ) ) {
......@@ -462,7 +470,7 @@ THREE.CanvasRenderer = function () {
}
_context.save();
_context.translate( v1x, v1y );
_context.translate( v1.x, v1.y );
_context.rotate( - element.rotation );
_context.scale( width, height );
......@@ -479,7 +487,7 @@ THREE.CanvasRenderer = function () {
}
function renderLine( v1x, v1y, v2x, v2y, element, material, scene ) {
function renderLine( v1, v2, element, material, scene ) {
if ( _contextGlobalAlpha != material.opacity ) {
......@@ -490,8 +498,8 @@ THREE.CanvasRenderer = function () {
if ( material instanceof THREE.LineBasicMaterial ) {
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.moveTo( v1.positionScreen.x, v1.positionScreen.y );
_context.lineTo( v2.positionScreen.x, v2.positionScreen.y );
_context.closePath();
_color.__styleString = material.color.__styleString;
......@@ -516,7 +524,7 @@ THREE.CanvasRenderer = function () {
}
function renderFace3( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene ) {
function renderFace3( v1, v2, v3, element, material, scene ) {
var bitmap, bitmapWidth, bitmapHeight;
......@@ -532,25 +540,42 @@ THREE.CanvasRenderer = function () {
bitmapWidth = bitmap.width - 1;
bitmapHeight = bitmap.height - 1;
_uv1.copy( element.uvs[ 0 ] );
_uv2.copy( element.uvs[ 1 ] );
_uv3.copy( element.uvs[ 2 ] );
_uv1.u = element.uvs[ 0 ].u * bitmapWidth; _uv1.v = element.uvs[ 0 ].v * bitmapHeight;
_uv2.u = element.uvs[ 1 ].u * bitmapWidth; _uv2.v = element.uvs[ 1 ].v * bitmapHeight;
_uv3.u = element.uvs[ 2 ].u * bitmapWidth; _uv3.v = element.uvs[ 2 ].v * bitmapHeight;
_uv1.u *= bitmapWidth; _uv1.v *= bitmapHeight;
_uv2.u *= bitmapWidth; _uv2.v *= bitmapHeight;
_uv3.u *= bitmapWidth; _uv3.v *= bitmapHeight;
drawTexturedTriangle( bitmap, v1.positionScreen.x, v1.positionScreen.y, v2.positionScreen.x, v2.positionScreen.y, v3.positionScreen.x, v3.positionScreen.y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv3.u, _uv3.v );
return;
}
if ( material instanceof THREE.MeshDepthMaterial ) {
drawTexturedTriangle( bitmap, v1x, v1y, v2x, v2y, v3x, v3y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv3.u, _uv3.v );
bitmap = _depthMap;
bitmapWidth = bitmap.width - 1;
bitmapHeight = bitmap.height - 1;
_w = material.__2near / (material.__farPlusNear - v1.positionScreen.z * material.__farMinusNear );
_uv1.u = _w * bitmapWidth; _uv1.v = 0;
_w = material.__2near / (material.__farPlusNear - v2.positionScreen.z * material.__farMinusNear );
_uv2.u = _w * bitmapWidth; _uv2.v = 1;
_w = material.__2near / (material.__farPlusNear - v3.positionScreen.z * material.__farMinusNear );
_uv3.u = _w * bitmapWidth; _uv3.v = 2;
drawTexturedTriangle( bitmap, v1.positionScreen.x, v1.positionScreen.y, v2.positionScreen.x, v2.positionScreen.y, v3.positionScreen.x, v3.positionScreen.y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv3.u, _uv3.v );
return;
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v1x, v1y );
_context.moveTo( v1.positionScreen.x, v1.positionScreen.y );
_context.lineTo( v2.positionScreen.x, v2.positionScreen.y );
_context.lineTo( v3.positionScreen.x, v3.positionScreen.y );
_context.lineTo( v1.positionScreen.x, v1.positionScreen.y );
_context.closePath();
if ( material instanceof THREE.MeshBasicMaterial ) {
......@@ -559,8 +584,10 @@ THREE.CanvasRenderer = function () {
} else if ( material instanceof THREE.MeshDepthMaterial ) {
/*
_w = 1 - ( material.__2near / (material.__farPlusNear - element.z * material.__farMinusNear ) );
_color.setRGBA( _w, _w, _w, 1 );
*/
} else if ( material instanceof THREE.MeshLambertMaterial ) {
......@@ -613,7 +640,7 @@ THREE.CanvasRenderer = function () {
}
function renderFace4 ( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, v5x, v5y, v6x, v6y, element, material, scene ) {
function renderFace4( v1, v2, v3, v4, v5, v6, element, material, scene ) {
var bitmap, bitmapWidth, bitmapHeight;
......@@ -639,19 +666,44 @@ THREE.CanvasRenderer = function () {
_uv3.u *= bitmapWidth; _uv3.v *= bitmapHeight;
_uv4.u *= bitmapWidth; _uv4.v *= bitmapHeight;
drawTexturedTriangle( bitmap, v1x, v1y, v2x, v2y, v4x, v4y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv4.u, _uv4.v );
drawTexturedTriangle( bitmap, v5x, v5y, v3x, v3y, v6x, v6y, _uv2.u, _uv2.v, _uv3.u, _uv3.v, _uv4.u, _uv4.v );
drawTexturedTriangle( bitmap, v1.positionScreen.x, v1.positionScreen.y, v2.positionScreen.x, v2.positionScreen.y, v4.positionScreen.x, v4.positionScreen.y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv4.u, _uv4.v );
drawTexturedTriangle( bitmap, v5.positionScreen.x, v5.positionScreen.y, v3.positionScreen.x, v3.positionScreen.y, v6.positionScreen.x, v6.positionScreen.y, _uv2.u, _uv2.v, _uv3.u, _uv3.v, _uv4.u, _uv4.v );
return;
}
if ( material instanceof THREE.MeshDepthMaterial ) {
bitmap = _depthMap;
bitmapWidth = bitmap.width - 1;
bitmapHeight = bitmap.height - 1;
_w = material.__2near / (material.__farPlusNear - v1.positionScreen.z * material.__farMinusNear );
_uv1.u = _w * bitmapWidth; _uv1.v = 0;
_w = material.__2near / (material.__farPlusNear - v2.positionScreen.z * material.__farMinusNear );
_uv2.u = _w * bitmapWidth; _uv2.v = 1;
_w = material.__2near / (material.__farPlusNear - v3.positionScreen.z * material.__farMinusNear );
_uv3.u = _w * bitmapWidth; _uv3.v = 2;
_w = material.__2near / (material.__farPlusNear - v4.positionScreen.z * material.__farMinusNear );
_uv4.u = _w * bitmapWidth; _uv4.v = 3;
drawTexturedTriangle( bitmap, v1.positionScreen.x, v1.positionScreen.y, v2.positionScreen.x, v2.positionScreen.y, v4.positionScreen.x, v4.positionScreen.y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv4.u, _uv4.v );
drawTexturedTriangle( bitmap, v5.positionScreen.x, v5.positionScreen.y, v3.positionScreen.x, v3.positionScreen.y, v6.positionScreen.x, v6.positionScreen.y, _uv2.u, _uv2.v, _uv3.u, _uv3.v, _uv4.u, _uv4.v );
return;
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v4x, v4y );
_context.lineTo( v1x, v1y );
_context.moveTo( v1.positionScreen.x, v1.positionScreen.y );
_context.lineTo( v2.positionScreen.x, v2.positionScreen.y );
_context.lineTo( v3.positionScreen.x, v3.positionScreen.y );
_context.lineTo( v4.positionScreen.x, v4.positionScreen.y );
_context.lineTo( v1.positionScreen.x, v1.positionScreen.y );
_context.closePath();
if ( material instanceof THREE.MeshBasicMaterial ) {
......@@ -724,15 +776,11 @@ THREE.CanvasRenderer = function () {
_context.lineTo( x2, y2 );
_context.closePath();
x1 -= x0;
y1 -= y0;
x2 -= x0;
y2 -= y0;
x1 -= x0; y1 -= y0;
x2 -= x0; y2 -= y0;
u1 -= u0;
v1 -= v0;
u2 -= u0;
v2 -= v0;
u1 -= u0; v1 -= v0;
u2 -= u0; v2 -= v0;
var det = 1 / ( u1 * v2 - u2 * v1 ),
......@@ -753,14 +801,15 @@ THREE.CanvasRenderer = function () {
// Hide anti-alias gaps
function expand( a, b ) {
function expand( v1, v2 ) {
var x = v2.x - v1.x, y = v2.y - v1.y,
unit = 1 / Math.sqrt( x * x + y * y );
_vector2.sub( b, a );
_vector2.unit();
_vector2.multiplyScalar( 0.75 );
x *= unit; y *= unit;
b.addSelf( _vector2 );
a.subSelf( _vector2 );
v2.x += x; v2.y += y;
v1.x -= x; v1.y -= y;
}
......
src/renderers/Projector.js
浏览文件 @ 7d8fd5f8
......@@ -84,9 +84,9 @@ THREE.Projector = function() {
( v3.positionScreen.y - v1.positionScreen.y ) * ( v2.positionScreen.x - v1.positionScreen.x ) < 0 ) ) ) {
_face3 = _face3Pool[ _face3Count ] = _face3Pool[ _face3Count ] || new THREE.RenderableFace3();
_face3.v1.copy( v1.positionScreen );
_face3.v2.copy( v2.positionScreen );
_face3.v3.copy( v3.positionScreen );
_face3.v1.positionScreen.copy( v1.positionScreen );
_face3.v2.positionScreen.copy( v2.positionScreen );
_face3.v3.positionScreen.copy( v3.positionScreen );
_face3.normalWorld.copy( face.normal );
object.matrixRotation.transform( _face3.normalWorld );
......@@ -126,10 +126,10 @@ THREE.Projector = function() {
( v2.positionScreen.y - v3.positionScreen.y ) * ( v4.positionScreen.x - v3.positionScreen.x ) < 0 ) ) ) ) {
_face4 = _face4Pool[ _face4Count ] = _face4Pool[ _face4Count ] || new THREE.RenderableFace4();
_face4.v1.copy( v1.positionScreen );
_face4.v2.copy( v2.positionScreen );
_face4.v3.copy( v3.positionScreen );
_face4.v4.copy( v4.positionScreen );
_face4.v1.positionScreen.copy( v1.positionScreen );
_face4.v2.positionScreen.copy( v2.positionScreen );
_face4.v3.positionScreen.copy( v3.positionScreen );
_face4.v4.positionScreen.copy( v4.positionScreen );
_face4.normalWorld.copy( face.normal );
object.matrixRotation.transform( _face4.normalWorld );
......@@ -176,15 +176,15 @@ THREE.Projector = function() {
vertex.__visible = vertexPositionScreen.z > 0 && vertexPositionScreen.z < 1;
if ( v > 0 ) {
if ( vertex.__visible && v > 0 ) {
vertex2 = object.geometry.vertices[ v - 1 ];
if ( vertex.__visible && vertex2.__visible ) {
_line = _linePool[ _lineCount ] = _linePool[ _lineCount ] || new THREE.RenderableLine();
_line.v1.copy( vertex.positionScreen );
_line.v2.copy( vertex2.positionScreen );
_line.v1.positionScreen.copy( vertex.positionScreen );
_line.v2.positionScreen.copy( vertex2.positionScreen );
// TODO: Use centroids here too.
_line.z = Math.max( vertex.positionScreen.z, vertex2.positionScreen.z );
......
src/renderers/SVGRenderer.js
浏览文件 @ 7d8fd5f8
......@@ -8,6 +8,9 @@ THREE.SVGRenderer = function () {
_projector = new THREE.Projector(),
_svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
_svgWidth, _svgHeight, _svgWidthHalf, _svgHeightHalf,
_v1, _v2, _v3, _v4,
_clipRect = new THREE.Rectangle(),
_bboxRect = new THREE.Rectangle(),
......@@ -37,7 +40,7 @@ THREE.SVGRenderer = function () {
};
this.setSize = function ( width, height ) {
this.setSize = function( width, height ) {
_svgWidth = width; _svgHeight = height;
_svgWidthHalf = _svgWidth / 2; _svgHeightHalf = _svgHeight / 2;
......@@ -60,10 +63,9 @@ THREE.SVGRenderer = function () {
};
this.render = function ( scene, camera ) {
this.render = function( scene, camera ) {
var e, el, m, ml, fm, fml, element, material,
v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y;
var e, el, m, ml, fm, fml, element, material;
if ( this.autoClear ) {
......@@ -91,28 +93,31 @@ THREE.SVGRenderer = function () {
if ( element instanceof THREE.RenderableParticle ) {
v1x = element.x * _svgWidthHalf; v1y = element.y * -_svgHeightHalf;
_v1 = element;
_v1.x *= _svgWidthHalf; _v1.y *= -_svgHeightHalf;
for ( m = 0, ml = element.material.length; m < ml; m++ ) {
material = element.material[ m ];
material && renderParticle( v1x, v1y, element, material, scene );
material && renderParticle( _v1, element, material, scene );
}
}/* else if ( element instanceof THREE.RenderableLine ) {
TODO: It's actually quite easy...
}*/ else if ( element instanceof THREE.RenderableFace3 ) {
v1x = element.v1.x * _svgWidthHalf; v1y = element.v1.y * -_svgHeightHalf;
v2x = element.v2.x * _svgWidthHalf; v2y = element.v2.y * -_svgHeightHalf;
v3x = element.v3.x * _svgWidthHalf; v3y = element.v3.y * -_svgHeightHalf;
_v1 = element.v1; _v2 = element.v2; _v3 = element.v3;
_bboxRect.addPoint( v1x, v1y );
_bboxRect.addPoint( v2x, v2y );
_bboxRect.addPoint( v3x, v3y );
_v1.positionScreen.x *= _svgWidthHalf; _v1.positionScreen.y *= - _svgHeightHalf;
_v2.positionScreen.x *= _svgWidthHalf; _v2.positionScreen.y *= - _svgHeightHalf;
_v3.positionScreen.x *= _svgWidthHalf; _v3.positionScreen.y *= - _svgHeightHalf;
_bboxRect.addPoint( _v1.positionScreen.x, _v1.positionScreen.y );
_bboxRect.addPoint( _v2.positionScreen.x, _v2.positionScreen.y );
_bboxRect.addPoint( _v3.positionScreen.x, _v3.positionScreen.y );
if ( !_clipRect.instersects( _bboxRect ) ) {
......@@ -133,7 +138,7 @@ THREE.SVGRenderer = function () {
while ( fm < fml ) {
material = element.faceMaterial[ fm ++ ];
material && renderFace3( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene );
material && renderFace3( _v1, _v2, _v3, element, material, scene );
}
......@@ -141,21 +146,23 @@ THREE.SVGRenderer = function () {
}
material && renderFace3( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene );
material && renderFace3( _v1, _v2, _v3, element, material, scene );
}
} else if ( element instanceof THREE.RenderableFace4 ) {
v1x = element.v1.x * _svgWidthHalf; v1y = element.v1.y * -_svgHeightHalf;
v2x = element.v2.x * _svgWidthHalf; v2y = element.v2.y * -_svgHeightHalf;
v3x = element.v3.x * _svgWidthHalf; v3y = element.v3.y * -_svgHeightHalf;
v4x = element.v4.x * _svgWidthHalf; v4y = element.v4.y * -_svgHeightHalf;
_v1 = element.v1; _v2 = element.v2; _v3 = element.v3; _v4 = element.v4;
_v1.positionScreen.x *= _svgWidthHalf; _v1.positionScreen.y *= -_svgHeightHalf;
_v2.positionScreen.x *= _svgWidthHalf; _v2.positionScreen.y *= -_svgHeightHalf;
_v3.positionScreen.x *= _svgWidthHalf; _v3.positionScreen.y *= -_svgHeightHalf;
_v4.positionScreen.x *= _svgWidthHalf; _v4.positionScreen.y *= -_svgHeightHalf;
_bboxRect.addPoint( v1x, v1y );
_bboxRect.addPoint( v2x, v2y );
_bboxRect.addPoint( v3x, v3y );
_bboxRect.addPoint( v4x, v4y );
_bboxRect.addPoint( _v1.positionScreen.x, _v1.positionScreen.y );
_bboxRect.addPoint( _v2.positionScreen.x, _v2.positionScreen.y );
_bboxRect.addPoint( _v3.positionScreen.x, _v3.positionScreen.y );
_bboxRect.addPoint( _v4.positionScreen.x, _v4.positionScreen.y );
if ( !_clipRect.instersects( _bboxRect) ) {
......@@ -176,7 +183,7 @@ THREE.SVGRenderer = function () {
while ( fm < fml ) {
material = element.faceMaterial[ fm ++ ];
material && renderFace4( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, element, material, scene );
material && renderFace4( _v1, _v2, _v3, _v4, element, material, scene );
}
......@@ -184,7 +191,7 @@ THREE.SVGRenderer = function () {
}
material && renderFace4( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, element, material, scene );
material && renderFace4( _v1, _v2, _v3, _v4, element, material, scene );
}
......@@ -283,11 +290,11 @@ THREE.SVGRenderer = function () {
}
function renderParticle ( v1x, v1y, element, material, scene ) {
function renderParticle( v1, element, material, scene ) {
_svgNode = getCircleNode( _circleCount++ );
_svgNode.setAttribute( 'cx', v1x );
_svgNode.setAttribute( 'cy', v1y );
_svgNode.setAttribute( 'cx', v1.x );
_svgNode.setAttribute( 'cy', v1.y );
_svgNode.setAttribute( 'r', element.scale.x * _svgWidthHalf );
if ( material instanceof THREE.ParticleCircleMaterial ) {
......@@ -323,10 +330,10 @@ THREE.SVGRenderer = function () {
}
*/
function renderFace3 ( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene ) {
function renderFace3( v1, v2, v3, element, material, scene ) {
_svgNode = getPathNode( _pathCount ++ );
_svgNode.setAttribute( 'd', 'M ' + v1x + ' ' + v1y + ' L ' + v2x + ' ' + v2y + ' L ' + v3x + ',' + v3y + 'z' );
_svgNode.setAttribute( 'd', 'M ' + v1.positionScreen.x + ' ' + v1.positionScreen.y + ' L ' + v2.positionScreen.x + ' ' + v2.positionScreen.y + ' L ' + v3.positionScreen.x + ',' + v3.positionScreen.y + 'z' );
if ( material instanceof THREE.MeshBasicMaterial ) {
......@@ -370,10 +377,10 @@ THREE.SVGRenderer = function () {
}
function renderFace4 ( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, element, material, scene ) {
function renderFace4( v1, v2, v3, v4, element, material, scene ) {
_svgNode = getPathNode( _pathCount ++ );
_svgNode.setAttribute( 'd', 'M ' + v1x + ' ' + v1y + ' L ' + v2x + ' ' + v2y + ' L ' + v3x + ',' + v3y + ' L ' + v4x + ',' + v4y + 'z' );
_svgNode.setAttribute( 'd', 'M ' + v1.positionScreen.x + ' ' + v1.positionScreen.y + ' L ' + v2.positionScreen.x + ' ' + v2.positionScreen.y + ' L ' + v3.positionScreen.x + ',' + v3.positionScreen.y + ' L ' + v4.positionScreen.x + ',' + v4.positionScreen.y + 'z' );
if ( material instanceof THREE.MeshBasicMaterial ) {
......@@ -412,7 +419,7 @@ THREE.SVGRenderer = function () {
}
function getPathNode ( id ) {
function getPathNode( id ) {
if ( _svgPathPool[ id ] == null ) {
......@@ -432,7 +439,7 @@ THREE.SVGRenderer = function () {
}
function getCircleNode ( id ) {
function getCircleNode( id ) {
if ( _svgCirclePool[id] == null ) {
......
src/renderers/renderables/RenderableFace3.js
浏览文件 @ 7d8fd5f8
......@@ -4,9 +4,9 @@
THREE.RenderableFace3 = function () {
this.v1 = new THREE.Vector2();
this.v2 = new THREE.Vector2();
this.v3 = new THREE.Vector2();
this.v1 = new THREE.Vertex();
this.v2 = new THREE.Vertex();
this.v3 = new THREE.Vertex();
this.centroidWorld = new THREE.Vector3();
this.centroidScreen = new THREE.Vector3();
......
src/renderers/renderables/RenderableFace4.js
浏览文件 @ 7d8fd5f8
......@@ -4,10 +4,10 @@
THREE.RenderableFace4 = function () {
this.v1 = new THREE.Vector2();
this.v2 = new THREE.Vector2();
this.v3 = new THREE.Vector2();
this.v4 = new THREE.Vector2();
this.v1 = new THREE.Vertex();
this.v2 = new THREE.Vertex();
this.v3 = new THREE.Vertex();
this.v4 = new THREE.Vertex();
this.centroidWorld = new THREE.Vector3();
this.centroidScreen = new THREE.Vector3();
......
src/renderers/renderables/RenderableLine.js
浏览文件 @ 7d8fd5f8
......@@ -4,8 +4,8 @@
THREE.RenderableLine = function () {
this.v1 = new THREE.Vector2();
this.v2 = new THREE.Vector2();
this.v1 = new THREE.Vertex();
this.v2 = new THREE.Vertex();
this.z = null;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或