From f6fa60700eaf4604203d75df51512a9dbd539768 Mon Sep 17 00:00:00 2001 From: alteredq Date: Wed, 31 Aug 2011 14:03:31 +0200 Subject: [PATCH] Fixed texture filtering example. There was z-fighting and obsolete UVs hacking. --- examples/webgl_materials_texture_filters.html | 45 +++++++------------ 1 file changed, 17 insertions(+), 28 deletions(-) diff --git a/examples/webgl_materials_texture_filters.html b/examples/webgl_materials_texture_filters.html index c494d382..372d2bdd 100644 --- a/examples/webgl_materials_texture_filters.html +++ b/examples/webgl_materials_texture_filters.html @@ -109,6 +109,7 @@ context.fillStyle = "#444"; context.fillRect( 0, 0, 128, 128 ); + context.fillStyle = "#fff"; context.fillRect( 0, 0, 64, 64); context.fillRect( 64, 64, 64, 64 ); @@ -117,36 +118,25 @@ materialCanvas = new THREE.MeshBasicMaterial( { map: textureCanvas } ); textureCanvas.needsUpdate = true; + textureCanvas.repeat.set( 1000, 1000 ); var textureCanvas2 = new THREE.Texture( imageCanvas, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping, THREE.NearestFilter, THREE.NearestFilter ); - materialCanvas2 = new THREE.MeshBasicMaterial( { color:0xffccaa, map: textureCanvas2 } ); + materialCanvas2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: textureCanvas2 } ); textureCanvas2.needsUpdate = true; + textureCanvas2.repeat.set( 1000, 1000 ); - var i, j, uvs, geometryRepeat = new THREE.PlaneGeometry( 100, 100, 1, 1 ); - - for ( i = 0; i < geometryRepeat.faceVertexUvs[ 0 ].length; i ++ ) { - - uvs = geometryRepeat.faceVertexUvs[ 0 ][ i ]; - - for ( j = 0; j < uvs.length; j ++ ) { - - uvs[ j ].u *= 1000; - uvs[ j ].v *= 1000; - - } - - } + var geometry = new THREE.PlaneGeometry( 100, 100 ); - var meshCanvas = new THREE.Mesh( geometryRepeat, materialCanvas ); + var meshCanvas = new THREE.Mesh( geometry, materialCanvas ); meshCanvas.rotation.x = Math.PI / 2; - meshCanvas.scale.x = meshCanvas.scale.y = meshCanvas.scale.z = 1000; + meshCanvas.scale.set( 1000, 1000, 1000 ); meshCanvas.doubleSided = true; - var meshCanvas2 = new THREE.Mesh( geometryRepeat, materialCanvas2 ); + var meshCanvas2 = new THREE.Mesh( geometry, materialCanvas2 ); meshCanvas2.rotation.x = Math.PI / 2; - meshCanvas2.scale.x = meshCanvas2.scale.y = meshCanvas2.scale.z = 1000; + meshCanvas2.scale.set( 1000, 1000, 1000 ); meshCanvas2.doubleSided = true; @@ -160,7 +150,7 @@ scene.addObject( meshCanvas ); scene2.addObject( meshCanvas2 ); - var geometry = new THREE.PlaneGeometry( 100, 100, 1, 1 ), + var geometry = new THREE.PlaneGeometry( 100, 100 ), mesh = new THREE.Mesh( geometry, materialPainting ), mesh2 = new THREE.Mesh( geometry, materialPainting2 ); @@ -174,15 +164,14 @@ zscene.addObject( zmesh ); - var meshFrame = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000 } ) ); + var meshFrame = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 5 } ) ); - meshFrame.position.z = -0.5; meshFrame.scale.x = 1.1 * image.width / 100; meshFrame.scale.y = 1.1 * image.height / 100; zscene.addObject( meshFrame ); - var meshShadow = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.9 } ) ); + var meshShadow = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.9, transparent: true } ) ); meshShadow.position.z = - 1.1 * image.height/2; meshShadow.scale.x = 1.1 * image.width / 100; @@ -202,8 +191,8 @@ var texturePainting = THREE.ImageUtils.loadTexture( "textures/758px-Canestra_di_frutta_(Caravaggio).jpg", THREE.UVMapping, callbackPainting ), texturePainting2 = new THREE.Texture(), - materialPainting = new THREE.MeshBasicMaterial( { color:0xffffff, map: texturePainting } ), - materialPainting2 = new THREE.MeshBasicMaterial( { color:0xffccaa, map: texturePainting2 } ); + materialPainting = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting } ), + materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } ); texturePainting2.minFilter = texturePainting2.magFilter = THREE.NearestFilter; texturePainting.minFilter = texturePainting.magFilter = THREE.LinearFilter; @@ -211,12 +200,12 @@ renderer = new THREE.WebGLRenderer(); renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); - renderer.domElement.style.position = "relative"; - container.appendChild( renderer.domElement ); - renderer.setClearColor( scene.fog.color, 1 ); renderer.autoClear = false; + renderer.domElement.style.position = "relative"; + container.appendChild( renderer.domElement ); + stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px';