home/three.js
2
0
Fork 0
mirror of https://github.com/wahyd4/three.js.git synced 2026-08-11 05:55:56 +10:00
Code Issues Packages Projects Releases Wiki Activity

Came up with a crazy approach to get Vertex Colors. Gouraud yet on step closer.

Browse Source 
Changed the DepthMaterial to use this approach instead.
This commit is contained in:
Mr.doob
2010-11-16 11:02:45 +00:00
parent c6d69d8286
commit fe82bdbda9
5 changed files with 98 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build/Three.js
+1 -1
View File
File diff suppressed because one or more lines are too long
build/ThreeDebug.js
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/materials_depth.html
+5 -4
View File
@@ -16,7 +16,7 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
@@ -77,12 +77,13 @@
plane = new THREE.Mesh( new Plane( 1000, 1000, 10, 10 ), material );
plane.rotation.x = - 90 * ( Math.PI / 180 );
plane.position.y = - 100;
plane.doubleSided = true;
scene.addObject( plane );
// Spheres
geometry = new Sphere( 100, 8, 4 );
geometry = new Cube( 100, 100, 100 );
//material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
material = new THREE.MeshDepthMaterial( { near: 1, far: 2000 } );
@@ -128,7 +129,7 @@
scene.addLight( pointLight );
renderer = new THREE.CanvasRenderer();
//renderer = new THREE.WebGLRenderer();
// renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
@@ -239,7 +240,7 @@
object.rotation.x += 0.01;
object.rotation.y += 0.005;
object.position.y = Math.sin( object.rotation.x ) * 200;
object.position.y = Math.sin( object.rotation.x ) * 200 + 200;
debugContext.rect( object.position.x * 0.1 - 5, object.position.z * 0.1 - 5, 10, 10 );
examples/materials_depth2.html
-84
View File
@@ -1,84 +0,0 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - depth material</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
color: #808080;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
}
a {
color: #ffffff;
text-decoration: none;
}
a:hover {
color: #0080ff;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - depth material.<br />
Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
</div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="geometry/WaltHead.js"></script>
<script type="text/javascript">
var camera, scene, renderer,
object;
init();
setInterval( loop, 1000 / 60 );
function init() {
var container = document.getElementById( 'container' );
camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 1000;
scene = new THREE.Scene();
object = new THREE.Mesh( new WaltHead(), new THREE.MeshDepthMaterial( { near: 1, far: 1000 } ) );
object.overdraw = true;
object.scale.x = object.scale.y = object.scale.z = 15;
scene.addObject( object );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
}
function loop() {
var time = new Date().getTime() * 0.0005;
object.rotation.y -= 0.01;
renderer.render(scene, camera);
}
</script>
</body>
</html>
src/renderers/CanvasRenderer.js
+91 -40
View File
@@ -23,6 +23,9 @@ THREE.CanvasRenderer = function () {
_v1x, _v1y, _v2x, _v2y, _v3x, _v3y,
_v4x, _v4y, _v5x, _v5y, _v6x, _v6y,
_color1, _color2, _color3, _color4,
_2near, _farPlusNear, _farMinusNear,
_bitmap, _bitmapWidth, _bitmapHeight,
_clipRect = new THREE.Rectangle(),
@@ -38,18 +41,27 @@ THREE.CanvasRenderer = function () {
_vector3 = new THREE.Vector3(), // Needed for PointLight
_uv1 = new THREE.UV(), _uv2 = new THREE.UV(), _uv3 = new THREE.UV(), _uv4 = new THREE.UV(),
_depthMap = document.createElement( 'canvas' ),
_depthMapContext = _depthMap.getContext( '2d' ),
_depthMapGradient = _depthMapContext.createLinearGradient( 0, 0, 255, 0);
_pixelMap, _pixelMapContext, _pixelMapImage, _pixelMapData,
_gradientMap, _gradientMapContext, _gradientMapQuality = 32;
_depthMap.width = 255;
_depthMap.height = 4;
_pixelMap = document.createElement( 'canvas' );
_pixelMap.width = _pixelMap.height = 2;
_depthMapGradient.addColorStop( 0, "white" );
_depthMapGradient.addColorStop( 1, "black" );
_pixelMapContext = _pixelMap.getContext( '2d' );
_pixelMapContext.fillStyle = 'rgba(0,0,0,1)';
_pixelMapContext.fillRect( 0, 0, 2, 2 );
_depthMapContext.fillStyle = _depthMapGradient;
_depthMapContext.fillRect( 0, 0, 255, 4 );
_pixelMapImage = _pixelMapContext.getImageData( 0, 0, 2, 2 );
_pixelMapData = _pixelMapImage.data;
_gradientMap = document.createElement( 'canvas' );
_gradientMap.width = _gradientMap.height = _gradientMapQuality;
_gradientMapContext = _gradientMap.getContext( '2d' );
_gradientMapContext.translate( - _gradientMapQuality / 2, - _gradientMapQuality / 2 );
_gradientMapContext.scale( _gradientMapQuality, _gradientMapQuality );
_gradientMapQuality --; // Fix UVs
this.domElement = _canvas;
this.autoClear = true;
@@ -293,26 +305,6 @@ THREE.CanvasRenderer = function () {
};
function setBlending( blending ) {
switch( blending ) {
case 0: // THREE.NormalBlending
_context.globalCompositeOperation = "source-over";
break;
case 1: // THREE.AdditiveBlending
_context.globalCompositeOperation = "lighter";
break;
case 2: // THREE.SubtractiveBlending
_context.globalCompositeOperation = "darker";
break;
}
_contextGlobalCompositeOperation = blending;
}
function calculateAmbientLight( scene, color ) {
var l, ll, light, lightColor,
@@ -627,13 +619,20 @@ THREE.CanvasRenderer = function () {
_color.setRGBA( _w, _w, _w, 1 );
*/
_bitmap = _depthMap;
_2near = material.__2near;
_farPlusNear = material.__farPlusNear;
_farMinusNear = material.__farMinusNear;
_uv1.u = ( material.__2near / (material.__farPlusNear - v1.positionScreen.z * material.__farMinusNear ) ) * 255;
_uv2.u = ( material.__2near / (material.__farPlusNear - v2.positionScreen.z * material.__farMinusNear ) ) * 255;
_uv3.u = ( material.__2near / (material.__farPlusNear - v3.positionScreen.z * material.__farMinusNear ) ) * 255;
_color1 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v1.positionScreen.z * _farMinusNear ) ) ) * 255 );
_color2 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v2.positionScreen.z * _farMinusNear ) ) ) * 255 );
_color3 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v3.positionScreen.z * _farMinusNear ) ) ) * 255 );
// _color4 = ~~ ( ( _color2 + _color3 ) * 0.5 );
_uv1.v = 0; _uv2.v = 1; _uv3.v = 2;
_bitmap = getGradientTexture( [ _color1, _color1, _color1 ], [ _color2, _color2, _color2 ], [ _color3, _color3, _color3 ], [ _color3, _color3, _color3 ] );
_uv1.u = 0; _uv1.v = 0;
_uv2.u = _gradientMapQuality; _uv2.v = 0;
_uv3.u = 0; _uv3.v = _gradientMapQuality;
drawTexturedTriangle( _bitmap, _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv3.u, _uv3.v );
@@ -723,14 +722,21 @@ THREE.CanvasRenderer = function () {
_color.setRGBA( _w, _w, _w, 1 );
*/
_bitmap = _depthMap;
_2near = material.__2near;
_farPlusNear = material.__farPlusNear;
_farMinusNear = material.__farMinusNear;
_uv1.u = ( material.__2near / (material.__farPlusNear - v1.positionScreen.z * material.__farMinusNear ) ) * 255;
_uv2.u = ( material.__2near / (material.__farPlusNear - v2.positionScreen.z * material.__farMinusNear ) ) * 255;
_uv3.u = ( material.__2near / (material.__farPlusNear - v3.positionScreen.z * material.__farMinusNear ) ) * 255;
_uv4.u = ( material.__2near / (material.__farPlusNear - v4.positionScreen.z * material.__farMinusNear ) ) * 255;
_color1 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v1.positionScreen.z * _farMinusNear ) ) ) * 255 );
_color2 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v2.positionScreen.z * _farMinusNear ) ) ) * 255 );
_color3 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v3.positionScreen.z * _farMinusNear ) ) ) * 255 );
_color4 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v4.positionScreen.z * _farMinusNear ) ) ) * 255 );
_uv1.v = 0; _uv2.v = 1; _uv3.v = 2; _uv4.v = 3;
_bitmap = getGradientTexture( [ _color1, _color1, _color1 ], [ _color2, _color2, _color2 ], [ _color4, _color4, _color4 ], [ _color3, _color3, _color3 ] );
_uv1.u = 0; _uv1.v = 0;
_uv2.u = _gradientMapQuality; _uv2.v = 0;
_uv3.u = _gradientMapQuality; _uv3.v = _gradientMapQuality;
_uv4.u = 0; _uv4.v = _gradientMapQuality;
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 );
@@ -860,6 +866,51 @@ THREE.CanvasRenderer = function () {
}
function setBlending( blending ) {
switch( blending ) {
case 0: // THREE.NormalBlending
_context.globalCompositeOperation = "source-over";
break;
case 1: // THREE.AdditiveBlending
_context.globalCompositeOperation = "lighter";
break;
case 2: // THREE.SubtractiveBlending
_context.globalCompositeOperation = "darker";
break;
}
_contextGlobalCompositeOperation = blending;
}
function getGradientTexture( c1, c2, c3, c4 ) {
_pixelMapData[ 0 ] = c1[ 0 ];
_pixelMapData[ 1 ] = c1[ 1 ];
_pixelMapData[ 2 ] = c1[ 2 ];
_pixelMapData[ 4 ] = c2[ 0 ];
_pixelMapData[ 5 ] = c2[ 1 ];
_pixelMapData[ 6 ] = c2[ 2 ];
_pixelMapData[ 8 ] = c3[ 0 ];
_pixelMapData[ 9 ] = c3[ 1 ];
_pixelMapData[ 10 ] = c3[ 2 ];
_pixelMapData[ 12 ] = c4[ 0 ];
_pixelMapData[ 13 ] = c4[ 1 ];
_pixelMapData[ 14 ] = c4[ 2 ];
_pixelMapContext.putImageData( _pixelMapImage, 0, 0 );
_gradientMapContext.drawImage( _pixelMap, 0, 0 );
return _gradientMap;
}
function normalToComponent( normal ) {
// https://gist.github.com/665829