Skip to content

Commit ec00f29

Browse files
mrdoobmrdoob
committed
CanvasRenderer and SVGRenderer using single-material system.
Also moved `.overdraw` to Material. Code is much simpler now :)
1 parent 806ecdf commit ec00f29

33 files changed

+1318
-1470
lines changed

‎build/Three.js

+586-592
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/custom/ThreeCanvas.js

+91-99
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/custom/ThreeDOM.js

+55-61
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/custom/ThreeExtras.js

+235-237
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/custom/ThreeSVG.js

+79-85
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/custom/ThreeWebGL.js

+192-196
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/canvas_geometry_birds.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -420,7 +420,7 @@
420420

421421
bird = birds[ i ];
422422

423-
color = bird.materials[ 0 ].color;
423+
color = bird.material.color;
424424
color.r = color.g = color.b = ( 500 - bird.position.z ) / 1000;
425425

426426
bird.rotation.y = Math.atan2( - boid.velocity.z, boid.velocity.x );

‎examples/canvas_geometry_cube.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666

6767
for ( var i = 0; i < 6; i ++ ) {
6868

69-
materials.push( [ new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) ] );
69+
materials.push( new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
7070

7171
}
7272

‎examples/canvas_geometry_earth.html

+4-9
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,8 @@
4242
<script>
4343

4444
var container, stats;
45-
4645
var camera, scene, renderer;
47-
4846
var mesh;
49-
5047
var mouseX = 0, mouseY = 0;
5148

5249
var windowHalfX = window.innerWidth / 2;
@@ -64,15 +61,13 @@
6461

6562
scene = new THREE.Scene();
6663

67-
mesh = new THREE.Mesh( new THREE.PlaneGeometry( 300, 300, 3, 3 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/shadow.png' ) } ) );
68-
mesh.overdraw = true;
64+
mesh = new THREE.Mesh( new THREE.PlaneGeometry( 300, 300, 3, 3 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/shadow.png' ), overdraw: true } ) );
6965
mesh.position.y = - 250;
7066
mesh.rotation.x = - 90 * Math.PI / 180;
71-
scene.add(mesh);
67+
scene.add( mesh );
7268

73-
mesh = new THREE.Mesh( new THREE.SphereGeometry( 200, 20, 20 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' ) } ) );
74-
mesh.overdraw = true;
75-
scene.add(mesh);
69+
mesh = new THREE.Mesh( new THREE.SphereGeometry( 200, 20, 20 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' ), overdraw: true } ) );
70+
scene.add( mesh );
7671

7772
renderer = new THREE.CanvasRenderer();
7873
renderer.setSize( window.innerWidth, window.innerHeight );

‎examples/canvas_geometry_panorama.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,6 @@
7979

8080
mesh = new THREE.Mesh( new THREE.CubeGeometry( 300, 300, 300, 7, 7, 7, materials ), new THREE.MeshFaceMaterial() );
8181
mesh.scale.x = - 1;
82-
mesh.overdraw = true;
8382
scene.add( mesh );
8483

8584
renderer = new THREE.CanvasRenderer();
@@ -100,7 +99,7 @@
10099
function loadTexture( path ) {
101100

102101
var texture = new THREE.Texture( texture_placeholder );
103-
var material = new THREE.MeshBasicMaterial( { map: texture } );
102+
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );
104103

105104
var image = new Image();
106105
image.onload = function () {

‎examples/canvas_geometry_panorama_fisheye.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,6 @@
7979

8080
mesh = new THREE.Mesh( new THREE.CubeGeometry( 300, 300, 300, 7, 7, 7, materials ), new THREE.MeshFaceMaterial() );
8181
mesh.scale.x = - 1;
82-
mesh.overdraw = true;
8382
scene.add( mesh );
8483

8584
for ( var i = 0, l = mesh.geometry.vertices.length; i < l; i ++ ) {
@@ -110,7 +109,7 @@
110109
function loadTexture( path ) {
111110

112111
var texture = new THREE.Texture( texture_placeholder );
113-
var material = new THREE.MeshBasicMaterial( { map: texture } );
112+
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );
114113

115114
var image = new Image();
116115
image.onload = function () {

‎examples/canvas_geometry_terrain.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
scene = new THREE.Scene();
6868

6969
var data = generateHeight( 1024, 1024 );
70-
var material = new THREE.MeshBasicMaterial( { map: new THREE.Texture( generateTexture( data, 1024, 1024 ) ) } );
70+
var material = new THREE.MeshBasicMaterial( { map: new THREE.Texture( generateTexture( data, 1024, 1024 ) ), overdraw: true } );
7171

7272
var quality = 16, step = 1024 / quality;
7373
var plane = new THREE.PlaneGeometry( 2000, 2000, quality - 1, quality - 1 );
@@ -83,7 +83,6 @@
8383

8484
mesh = new THREE.Mesh( plane, material );
8585
mesh.rotation.x = -90 * Math.PI / 180;
86-
mesh.overdraw = true;
8786
scene.add( mesh );
8887

8988
renderer = new THREE.CanvasRenderer();

‎examples/canvas_geometry_text.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@
8989
text3d.computeBoundingBox();
9090
var centerOffset = -0.5 * ( text3d.boundingBox.x[ 1 ] - text3d.boundingBox.x[ 0 ] );
9191

92-
var textMaterial = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, wireframe: false } );
92+
var textMaterial = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, overdraw: true } );
9393
text = new THREE.Mesh( text3d, textMaterial );
9494

9595
text.doubleSided = false;
@@ -100,7 +100,6 @@
100100

101101
text.rotation.x = 0;
102102
text.rotation.y = Math.PI * 2;
103-
text.overdraw = true;
104103

105104
parent = new THREE.Object3D();
106105
parent.add( text );

‎examples/canvas_interactive_particles.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -146,16 +146,16 @@
146146

147147
if ( INTERSECTED != intersects[ 0 ].object ) {
148148

149-
if ( INTERSECTED ) INTERSECTED.materials[ 0 ].program = programStroke;
149+
if ( INTERSECTED ) INTERSECTED.material.program = programStroke;
150150

151151
INTERSECTED = intersects[ 0 ].object;
152-
INTERSECTED.materials[ 0 ].program = programFill;
152+
INTERSECTED.material.program = programFill;
153153

154154
}
155155

156156
} else {
157157

158-
if ( INTERSECTED ) INTERSECTED.materials[ 0 ].program = programStroke;
158+
if ( INTERSECTED ) INTERSECTED.material.program = programStroke;
159159

160160
INTERSECTED = null;
161161

‎examples/canvas_lights_pointlights.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,7 @@
9999
loader = new THREE.JSONLoader();
100100
loader.load( 'obj/WaltHeadLo.js', function ( geometry ) {
101101

102-
mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading } ) );
103-
mesh.overdraw = true;
102+
mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, overdraw: true } ) );
104103
scene.add( mesh );
105104

106105
} );

‎examples/canvas_materials.html

+9-10
Original file line numberDiff line numberDiff line change
@@ -70,15 +70,15 @@
7070

7171
var materials = [
7272

73-
{ material: new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true } ), overdraw: false, doubleSided: true },
74-
{ material: new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.AdditiveBlending } ), overdraw: false, doubleSided: true },
75-
{ material: new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading } ), overdraw: true, doubleSided: false },
76-
{ material: new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ), overdraw: true, doubleSided: false },
77-
{ material: new THREE.MeshDepthMaterial(), overdraw: true, doubleSided: false },
78-
{ material: new THREE.MeshNormalMaterial(), overdraw: true, doubleSided: false },
79-
{ material: new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' ) } ), overdraw: false, doubleSided: false },
80-
{ material: new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' ) } ), overdraw: false, doubleSided: false },
81-
{ material: new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'textures/envmap.png', new THREE.SphericalReflectionMapping() ) } ), overdraw: false, doubleSided: false }
73+
{ material: new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true } ), doubleSided: true },
74+
{ material: new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.AdditiveBlending } ), doubleSided: true },
75+
{ material: new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, overdraw: true } ), doubleSided: false },
76+
{ material: new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.SmoothShading, overdraw: true } ), doubleSided: false },
77+
{ material: new THREE.MeshDepthMaterial( { overdraw: true } ), doubleSided: false },
78+
{ material: new THREE.MeshNormalMaterial( { overdraw: true } ), doubleSided: false },
79+
{ material: new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' ) } ), doubleSided: false },
80+
{ material: new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' ) } ), doubleSided: false },
81+
{ material: new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'textures/envmap.png', new THREE.SphericalReflectionMapping() ) } ), doubleSided: false }
8282

8383
];
8484

@@ -96,7 +96,6 @@
9696
for ( var i = 0, l = materials.length; i < l; i ++ ) {
9797

9898
var sphere = new THREE.Mesh( geometry, materials[ i ].material );
99-
sphere.overdraw = materials[ i ].overdraw;
10099
sphere.doubleSided = materials[ i ].doubleSided;
101100

102101
sphere.position.x = ( i % 5 ) * 200 - 400;

‎examples/canvas_materials_depth.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -81,12 +81,11 @@
8181
// Spheres
8282

8383
geometry = new THREE.CubeGeometry( 100, 100, 100 );
84-
material = new THREE.MeshDepthMaterial( { near: 1, far: 2000 } );
84+
material = new THREE.MeshDepthMaterial( { near: 1, far: 2000, overdraw: true } );
8585

8686
for ( var i = 0; i < 20; i ++ ) {
8787

8888
cube = new THREE.Mesh( geometry, material );
89-
cube.overdraw = true;
9089

9190
cube.position.x = ( i % 5 ) * 200 - 400;
9291
cube.position.z = Math.floor( i / 5 ) * 200 - 350;

‎examples/canvas_materials_normal.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,7 @@
6464
loader = new THREE.JSONLoader();
6565
loader.load( 'obj/WaltHeadLo.js', function ( geometry ) {
6666

67-
mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() );
68-
mesh.overdraw = true;
67+
mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial( { overdraw: true } ) );
6968
scene.add( mesh );
7069

7170
} );

‎examples/canvas_materials_reflection.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,7 @@
6868

6969
geometry.computeVertexNormals();
7070

71-
mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'textures/metal.jpg', new THREE.SphericalReflectionMapping() ) } ) );
72-
mesh.overdraw = true;
71+
mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'textures/metal.jpg', new THREE.SphericalReflectionMapping() ), overdraw: true } ) );
7372
scene.add( mesh );
7473

7574
} );

‎examples/canvas_materials_video.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
texture.minFilter = THREE.LinearFilter;
8383
texture.magFilter = THREE.LinearFilter;
8484

85-
var material = new THREE.MeshBasicMaterial( { map: texture } );
85+
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );
8686

8787
imageReflection = document.createElement( 'canvas' );
8888
imageReflection.width = 480;
@@ -100,15 +100,14 @@
100100
textureReflection.minFilter = THREE.LinearFilter;
101101
textureReflection.magFilter = THREE.LinearFilter;
102102

103-
var materialReflection = new THREE.MeshBasicMaterial( { map: textureReflection } );
103+
var materialReflection = new THREE.MeshBasicMaterial( { map: textureReflection, overdraw: true } );
104104

105105
//
106106

107107
var plane = new THREE.PlaneGeometry( 480, 204, 4, 4 );
108108

109109
mesh = new THREE.Mesh( plane, material );
110110
mesh.scale.x = mesh.scale.y = mesh.scale.z = 1.5;
111-
mesh.overdraw = true;
112111
scene.add(mesh);
113112

114113
mesh = new THREE.Mesh( plane, materialReflection );

‎examples/canvas_particles_shapes.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@
9494
text3d.computeBoundingBox();
9595
var centerOffset = -0.5 * ( text3d.boundingBox.x[ 1 ] - text3d.boundingBox.x[ 0 ] );
9696

97-
var textMaterial = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, wireframe: false } );
97+
var textMaterial = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, overdraw: true } );
9898

9999
text = new THREE.Mesh( text3d, textMaterial );
100100

‎examples/canvas_performance.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -75,12 +75,11 @@
7575
// Spheres
7676

7777
geometry = new THREE.SphereGeometry( 100, 26, 18 );
78-
material = new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, opacity: 1 } );
78+
material = new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, overdraw: true } );
7979

8080
for ( var i = 0; i < 20; i ++ ) {
8181

8282
sphere = new THREE.Mesh( geometry, material );
83-
sphere.overdraw = true;
8483

8584
sphere.position.x = ( i % 5 ) * 200 - 400;
8685
sphere.position.z = Math.floor( i / 5 ) * 200 - 400;

‎examples/canvas_sandbox.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -91,12 +91,11 @@
9191
objects = [];
9292

9393
geometry = new THREE.SphereGeometry( 100, 16, 8 );
94-
material = new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'textures/metal.jpg', new THREE.SphericalReflectionMapping() ) } );
94+
material = new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'textures/metal.jpg', new THREE.SphericalReflectionMapping() ), overdraw: true } );
9595

9696
for ( var i = 0; i < 10; i ++ ) {
9797

9898
sphere = new THREE.Mesh( geometry, material );
99-
sphere.overdraw = true;
10099

101100
sphere.position.x = Math.random() * 1000 - 500;
102101
sphere.position.y = Math.random() * 1000 - 500;

‎examples/misc_ubiquity_test.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -128,9 +128,11 @@
128128
mesh.doubleSided = true;
129129
group.add( mesh );
130130

131+
/*
131132
mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true, wireframe: true, wireframeLinewidth: 10 } ) );
132133
mesh.doubleSided = true;
133134
group.add( mesh );
135+
*/
134136

135137
// LIGHTS
136138

@@ -194,9 +196,9 @@
194196
qrcode.rotation.z += 0.02;
195197
*/
196198

197-
//canvasRenderer.render( scene, camera );
198-
//svgRenderer.render( scene, camera );
199-
webglRenderer.render( scene, camera );
199+
canvasRenderer.render( scene, camera );
200+
svgRenderer.render( scene, camera );
201+
// webglRenderer.render( scene, camera );
200202

201203
}
202204

‎src/core/Projector.js

+9-10
Original file line numberDiff line numberDiff line change
@@ -144,8 +144,8 @@ THREE.Projector = function() {
144144

145145
var near = camera.near, far = camera.far,
146146
o, ol, v, vl, f, fl, n, nl, c, cl, u, ul, object,
147-
objectMatrixWorld, objectMatrixWorldRotation, objectMaterials, objectOverdraw,
148-
geometry, vertices, vertex, vertexPositionScreen,
147+
objectMatrixWorld, objectMatrixWorldRotation, objectMaterial,
148+
geometry, geometryMaterials, vertices, vertex, vertexPositionScreen,
149149
faces, face, faceVertexNormals, normal, faceVertexUvs, uvs,
150150
v1, v2, v3, v4;
151151

@@ -178,14 +178,14 @@ THREE.Projector = function() {
178178
object = _renderData.objects[ o ];
179179

180180
objectMatrixWorld = object.matrixWorld;
181-
objectMaterials = object.materials;
182-
objectOverdraw = object.overdraw;
181+
objectMaterial = object.material;
183182

184183
_vertexCount = 0;
185184

186185
if ( object instanceof THREE.Mesh ) {
187186

188187
geometry = object.geometry;
188+
geometryMaterials = object.geometry.materials;
189189
vertices = geometry.vertices;
190190
faces = geometry.faces;
191191
faceVertexUvs = geometry.faceVertexUvs;
@@ -298,9 +298,8 @@ THREE.Projector = function() {
298298

299299
}
300300

301-
_face.meshMaterials = objectMaterials;
302-
_face.faceMaterials = face.materials;
303-
_face.overdraw = objectOverdraw;
301+
_face.material = objectMaterial;
302+
_face.faceMaterial = face.materialIndex !== null ? geometryMaterials[ face.materialIndex ] : null;
304303

305304
_face.z = _face.centroidScreen.z;
306305

@@ -317,7 +316,7 @@ THREE.Projector = function() {
317316
object = _renderData.lines[ o ];
318317

319318
objectMatrixWorld = object.matrixWorld;
320-
objectMaterials = object.materials;
319+
objectMaterial = object.material;
321320

322321
_vertexCount = 0;
323322

@@ -354,7 +353,7 @@ THREE.Projector = function() {
354353

355354
_line.z = Math.max( _clippedVertex1PositionScreen.z, _clippedVertex2PositionScreen.z );
356355

357-
_line.materials = objectMaterials;
356+
_line.material = objectMaterial;
358357

359358
_renderData.elements.push( _line );
360359

@@ -389,7 +388,7 @@ THREE.Projector = function() {
389388
_particle.scale.x = object.scale.x * Math.abs( _particle.x - ( _vector4.x + camera.projectionMatrix.n11 ) / ( _vector4.w + camera.projectionMatrix.n14 ) );
390389
_particle.scale.y = object.scale.y * Math.abs( _particle.y - ( _vector4.y + camera.projectionMatrix.n22 ) / ( _vector4.w + camera.projectionMatrix.n24 ) );
391390

392-
_particle.materials = object.materials;
391+
_particle.material = object.material;
393392

394393
_renderData.elements.push( _particle );
395394

‎src/materials/Material.js

+2
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ THREE.Material = function ( parameters ) {
2424

2525
this.alphaTest = parameters.alphaTest !== undefined ? parameters.alphaTest : 0;
2626

27+
this.overdraw = parameters.overdraw !== undefined ? parameters.overdraw : false; // Boolean for fixing antialiasing gaps in CanvasRenderer
28+
2729
}
2830

2931
THREE.MaterialCount = 0;

‎src/objects/Mesh.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,12 @@ THREE.Mesh = function ( geometry, material ) {
1111
this.geometry = geometry;
1212
this.material = material;
1313

14-
this.overdraw = false; // TODO: Move to material?
14+
if ( material instanceof Array ) {
1515

16+
console.warn( 'DEPRECATE: Material array is no longer supported. Using material 0...' );
17+
this.material = material[ 0 ];
18+
19+
}
1620

1721
if ( this.geometry ) {
1822

0 commit comments

Comments
 (0)