|
|
@@ -0,0 +1,282 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <title>three.js webgl - materials - manual mipmaping</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: #aaa;
|
|
|
+ font-family:Monospace;
|
|
|
+ font-size:13px;
|
|
|
+ text-align:center;
|
|
|
+
|
|
|
+ background-color: #000;
|
|
|
+ margin: 0px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ #info {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px; width: 100%;
|
|
|
+ padding: 5px;
|
|
|
+ z-index:100;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lbl { color:#fff; font-size:16px; font-weight:bold; position: absolute; bottom:0px; z-index:100; text-shadow:#000 1px 1px 1px; background-color:rgba(0,0,0,0.85); padding:1em }
|
|
|
+ #lbl_left { text-align:left; left:0px }
|
|
|
+ #lbl_right { text-align:left; right:0px }
|
|
|
+
|
|
|
+ .g { color:#aaa }
|
|
|
+ .c { color:#fa0 }
|
|
|
+
|
|
|
+ a { color:red }
|
|
|
+
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+
|
|
|
+ <body>
|
|
|
+ <div id="info">
|
|
|
+ <a href="http://threejs.org" target="_blank">three.js</a> - texture manual mipmapping example
|
|
|
+ - painting by <a href="http://en.wikipedia.org/wiki/Basket_of_Fruit_%28Caravaggio%29">Caravaggio</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="lbl_left" class="lbl">
|
|
|
+ Floor <span class="g">(128x128)</span><br/>
|
|
|
+ mag: <span class="c">Linear</span><br/>
|
|
|
+ min: <span class="c">LinearMipMapLinear</span><br/>
|
|
|
+ <br/>
|
|
|
+ Painting <span class="g">(748x600)</span><br/>
|
|
|
+ mag: <span class="c">Linear</span><br/>
|
|
|
+ min: <span class="c">Linear</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="lbl_right" class="lbl">
|
|
|
+ Floor <br/>
|
|
|
+ mag: <span class="c">Nearest</span><br/>
|
|
|
+ min: <span class="c">NearestMipMapNearestFilter</span><br/>
|
|
|
+ <br/>
|
|
|
+ Painting <br/>
|
|
|
+ mag: <span class="c">Nearest</span><br/>
|
|
|
+ min: <span class="c">Nearest</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script src="../build/three.min.js"></script>
|
|
|
+
|
|
|
+ <script src="js/Detector.js"></script>
|
|
|
+ <script src="js/libs/stats.min.js"></script>
|
|
|
+
|
|
|
+ <script>
|
|
|
+
|
|
|
+ if (!Detector.webgl) Detector.addGetWebGLMessage();
|
|
|
+
|
|
|
+ var SCREEN_WIDTH = window.innerWidth;
|
|
|
+ var SCREEN_HEIGHT = window.innerHeight;
|
|
|
+
|
|
|
+ var container, stats;
|
|
|
+
|
|
|
+ var camera, scene, scene2, renderer;
|
|
|
+
|
|
|
+ var mouseX = 0, mouseY = 0;
|
|
|
+
|
|
|
+ var windowHalfX = window.innerWidth / 2;
|
|
|
+ var windowHalfY = window.innerHeight / 2;
|
|
|
+
|
|
|
+ init();
|
|
|
+ animate();
|
|
|
+
|
|
|
+
|
|
|
+ function init() {
|
|
|
+
|
|
|
+ container = document.createElement('div');
|
|
|
+ document.body.appendChild(container);
|
|
|
+
|
|
|
+ camera = new THREE.PerspectiveCamera(35, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 5000);
|
|
|
+ camera.position.z = 1500;
|
|
|
+
|
|
|
+ scene = new THREE.Scene();
|
|
|
+ scene.fog = new THREE.Fog(0x000000, 1500, 4000);
|
|
|
+
|
|
|
+ scene2 = new THREE.Scene();
|
|
|
+ scene2.fog = scene.fog;
|
|
|
+
|
|
|
+ // GROUND
|
|
|
+
|
|
|
+ function mipmap(size, color) {
|
|
|
+ var imageCanvas = document.createElement("canvas"),
|
|
|
+ context = imageCanvas.getContext("2d");
|
|
|
+
|
|
|
+ imageCanvas.width = imageCanvas.height = size;
|
|
|
+
|
|
|
+ context.fillStyle = "#444";
|
|
|
+ context.fillRect(0, 0, size, size);
|
|
|
+
|
|
|
+ context.fillStyle = color;
|
|
|
+ context.fillRect(0, 0, size / 2, size / 2);
|
|
|
+ context.fillRect(size / 2, size / 2, size / 2, size / 2);
|
|
|
+ return imageCanvas;
|
|
|
+ }
|
|
|
+ var canvas = mipmap(128, '#f00');
|
|
|
+ var textureCanvas = new THREE.Texture(canvas, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping);
|
|
|
+ textureCanvas.mipmaps = [];
|
|
|
+ textureCanvas.mipmaps[0] = canvas;
|
|
|
+ textureCanvas.mipmaps[1] = mipmap(64, '#0f0');
|
|
|
+ textureCanvas.mipmaps[2] = mipmap(32, '#00f');
|
|
|
+ textureCanvas.mipmaps[3] = mipmap(16, '#400');
|
|
|
+ textureCanvas.mipmaps[4] = mipmap(8, '#040');
|
|
|
+ textureCanvas.mipmaps[5] = mipmap(4, '#004');
|
|
|
+ textureCanvas.mipmaps[6] = mipmap(2, '#044');
|
|
|
+ textureCanvas.mipmaps[7] = mipmap(1, '#404');
|
|
|
+
|
|
|
+ materialCanvas = new THREE.MeshBasicMaterial({ map: textureCanvas });
|
|
|
+
|
|
|
+ textureCanvas.needsUpdate = true;
|
|
|
+ textureCanvas.repeat.set(1000, 1000);
|
|
|
+
|
|
|
+ canvas = mipmap(128, '#f00');
|
|
|
+ var textureCanvas2 = new THREE.Texture(canvas, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping, THREE.NearestFilter, THREE.NearestMipMapNearestFilter);
|
|
|
+ textureCanvas2.mipmaps = [];
|
|
|
+ textureCanvas2.mipmaps[0] = canvas;
|
|
|
+ textureCanvas2.mipmaps[1] = mipmap(64, '#0f0');
|
|
|
+ textureCanvas2.mipmaps[2] = mipmap(32, '#00f');
|
|
|
+ textureCanvas2.mipmaps[3] = mipmap(16, '#400');
|
|
|
+ textureCanvas2.mipmaps[4] = mipmap(8, '#040');
|
|
|
+ textureCanvas2.mipmaps[5] = mipmap(4, '#004');
|
|
|
+ textureCanvas2.mipmaps[6] = mipmap(2, '#044');
|
|
|
+ textureCanvas2.mipmaps[7] = mipmap(1, '#404');
|
|
|
+ materialCanvas2 = new THREE.MeshBasicMaterial({ color: 0xffccaa, map: textureCanvas2 });
|
|
|
+
|
|
|
+ textureCanvas2.needsUpdate = true;
|
|
|
+ textureCanvas2.repeat.set(1000, 1000);
|
|
|
+
|
|
|
+ var geometry = new THREE.PlaneGeometry(100, 100);
|
|
|
+
|
|
|
+ var meshCanvas = new THREE.Mesh(geometry, materialCanvas);
|
|
|
+ meshCanvas.rotation.x = -Math.PI / 2;
|
|
|
+ meshCanvas.scale.set(1000, 1000, 1000);
|
|
|
+
|
|
|
+ var meshCanvas2 = new THREE.Mesh(geometry, materialCanvas2);
|
|
|
+ meshCanvas2.rotation.x = -Math.PI / 2;
|
|
|
+ meshCanvas2.scale.set(1000, 1000, 1000);
|
|
|
+
|
|
|
+
|
|
|
+ // PAINTING
|
|
|
+
|
|
|
+ var callbackPainting = function () {
|
|
|
+
|
|
|
+ var image = texturePainting.image;
|
|
|
+
|
|
|
+ texturePainting2.image = image;
|
|
|
+ texturePainting2.needsUpdate = true;
|
|
|
+
|
|
|
+ scene.add(meshCanvas);
|
|
|
+ scene2.add(meshCanvas2);
|
|
|
+
|
|
|
+ var geometry = new THREE.PlaneGeometry(100, 100);
|
|
|
+ var mesh = new THREE.Mesh(geometry, materialPainting);
|
|
|
+ var mesh2 = new THREE.Mesh(geometry, materialPainting2);
|
|
|
+
|
|
|
+ addPainting(scene, mesh);
|
|
|
+ addPainting(scene2, mesh2);
|
|
|
+
|
|
|
+ function addPainting(zscene, zmesh) {
|
|
|
+
|
|
|
+ zmesh.scale.x = image.width / 100;
|
|
|
+ zmesh.scale.y = image.height / 100;
|
|
|
+
|
|
|
+ zscene.add(zmesh);
|
|
|
+
|
|
|
+ var meshFrame = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0x000000, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 5 }));
|
|
|
+ meshFrame.scale.x = 1.1 * image.width / 100;
|
|
|
+ meshFrame.scale.y = 1.1 * image.height / 100;
|
|
|
+
|
|
|
+ zscene.add(meshFrame);
|
|
|
+
|
|
|
+ var meshShadow = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0x000000, opacity: 0.75, transparent: true }));
|
|
|
+ meshShadow.position.y = -1.1 * image.height / 2;
|
|
|
+ meshShadow.position.z = -1.1 * image.height / 2;
|
|
|
+ meshShadow.rotation.x = -Math.PI / 2;
|
|
|
+ meshShadow.scale.x = 1.1 * image.width / 100;
|
|
|
+ meshShadow.scale.y = 1.1 * image.height / 100;
|
|
|
+ zscene.add(meshShadow);
|
|
|
+
|
|
|
+ var floorHeight = -1.117 * image.height / 2;
|
|
|
+ meshCanvas.position.y = meshCanvas2.position.y = floorHeight;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ 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 });
|
|
|
+
|
|
|
+ texturePainting2.minFilter = texturePainting2.magFilter = THREE.NearestFilter;
|
|
|
+ texturePainting.minFilter = texturePainting.magFilter = THREE.LinearFilter;
|
|
|
+
|
|
|
+
|
|
|
+ renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
|
+ renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
|
|
|
+ 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';
|
|
|
+ stats.domElement.style.zIndex = 100;
|
|
|
+ //container.appendChild( stats.domElement );
|
|
|
+
|
|
|
+ document.addEventListener('mousemove', onDocumentMouseMove, false);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function onDocumentMouseMove(event) {
|
|
|
+
|
|
|
+ mouseX = (event.clientX - windowHalfX);
|
|
|
+ mouseY = (event.clientY - windowHalfY);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function animate() {
|
|
|
+
|
|
|
+ requestAnimationFrame(animate);
|
|
|
+
|
|
|
+ render();
|
|
|
+ stats.update();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function render() {
|
|
|
+
|
|
|
+ camera.position.x += (mouseX - camera.position.x) * .05;
|
|
|
+ camera.position.y += (-(mouseY - 200) - camera.position.y) * .05;
|
|
|
+
|
|
|
+ camera.lookAt(scene.position);
|
|
|
+
|
|
|
+ renderer.enableScissorTest(false);
|
|
|
+ renderer.clear();
|
|
|
+ renderer.enableScissorTest(true);
|
|
|
+
|
|
|
+ //renderer.setViewport( 0, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
|
|
|
+ renderer.setScissor(0, 0, SCREEN_WIDTH / 2 - 2, SCREEN_HEIGHT);
|
|
|
+ renderer.render(scene, camera);
|
|
|
+
|
|
|
+
|
|
|
+ //renderer.setViewport( SCREEN_WIDTH/2, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
|
|
|
+ renderer.setScissor(SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2 - 2, SCREEN_HEIGHT);
|
|
|
+ renderer.render(scene2, camera);
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+
|
|
|
+ </body>
|
|
|
+</html>
|
Ben Adams