three.js/manual/resources/threejs-textures.js

import * as THREE from 'three';
import { threejsLessonUtils } from './threejs-lesson-utils.js';

{

	const loader = new THREE.TextureLoader();

	function loadTextureAndPromise( url ) {

		let textureResolve;
		const promise = new Promise( ( resolve ) => {

			textureResolve = resolve;

		} );
		const texture = loader.load( url, ( texture ) => {

			textureResolve( texture );

		} );
		return {
			texture,
			promise,
		};

	}

	const filterTextureInfo = loadTextureAndPromise( '/manual/resources/images/mip-example.png' );
	const filterTexture = filterTextureInfo.texture;
	const filterTexturePromise = filterTextureInfo.promise;

	function filterCube( scale, texture ) {

		const size = 8;
		const geometry = new THREE.BoxGeometry( size, size, size );
		const material = new THREE.MeshBasicMaterial( {
			map: texture || filterTexture,
		} );
		const mesh = new THREE.Mesh( geometry, material );
		mesh.scale.set( scale, scale, scale );
		return mesh;

	}

	function lowResCube( scale, pixelSize = 16 ) {

		const mesh = filterCube( scale );
		const renderTarget = new THREE.WebGLRenderTarget( 1, 1, {
			magFilter: THREE.NearestFilter,
			minFilter: THREE.NearestFilter,
		} );

		const planeScene = new THREE.Scene();

		const plane = new THREE.PlaneGeometry( 1, 1 );
		const planeMaterial = new THREE.MeshBasicMaterial( {
			map: renderTarget.texture,
		} );
		const planeMesh = new THREE.Mesh( plane, planeMaterial );
		planeScene.add( planeMesh );

		const planeCamera = new THREE.OrthographicCamera( 0, 1, 0, 1, - 1, 1 );
		planeCamera.position.z = 1;

		return {
			obj3D: mesh,
			update( time, renderInfo ) {

				const { width, height, scene, camera, renderer, pixelRatio } = renderInfo;
				const rtWidth = Math.ceil( width / pixelRatio / pixelSize );
				const rtHeight = Math.ceil( height / pixelRatio / pixelSize );
				renderTarget.setSize( rtWidth, rtHeight );

				camera.aspect = rtWidth / rtHeight;
				camera.updateProjectionMatrix();

				renderer.setRenderTarget( renderTarget );

				renderer.render( scene, camera );
				renderer.setRenderTarget( null );

			},
			render( renderInfo ) {

				const { width, height, renderer, pixelRatio } = renderInfo;
				const viewWidth = width / pixelRatio / pixelSize;
				const viewHeight = height / pixelRatio / pixelSize;
				planeCamera.left = - viewWidth / 2;
				planeCamera.right = viewWidth / 2;
				planeCamera.top = viewHeight / 2;
				planeCamera.bottom = - viewHeight / 2;
				planeCamera.updateProjectionMatrix();

				// compute the difference between our renderTarget size
				// and the view size. The renderTarget is a multiple pixels magnified pixels
				// so for example if the view is 15 pixels wide and the magnified pixel size is 10
				// the renderTarget will be 20 pixels wide. We only want to display 15 of those 20
				// pixels so

				planeMesh.scale.set( renderTarget.width, renderTarget.height, 1 );

				renderer.render( planeScene, planeCamera );

			},
		};

	}

	function createMip( level, numLevels, scale ) {

		const u = level / numLevels;
		const size = 2 ** ( numLevels - level - 1 );
		const halfSize = Math.ceil( size / 2 );
		const ctx = document.createElement( 'canvas' ).getContext( '2d' );
		ctx.canvas.width = size * scale;
		ctx.canvas.height = size * scale;
		ctx.scale( scale, scale );
		ctx.fillStyle = `hsl(${180 + u * 360 | 0},100%,20%)`;
		ctx.fillRect( 0, 0, size, size );
		ctx.fillStyle = `hsl(${u * 360 | 0},100%,50%)`;
		ctx.fillRect( 0, 0, halfSize, halfSize );
		ctx.fillRect( halfSize, halfSize, halfSize, halfSize );
		return ctx.canvas;

	}

	threejsLessonUtils.init( {
		threejsOptions: { antialias: false },
	} );
	threejsLessonUtils.addDiagrams( {
		filterCube: {
			create() {

				return filterCube( 1 );

			},
		},
		filterCubeSmall: {
			create( info ) {

				return lowResCube( .1, info.renderInfo.pixelRatio );

			},
		},
		filterCubeSmallLowRes: {
			create() {

				return lowResCube( 1 );

			},
		},
		filterCubeMagNearest: {
			async create() {

				const texture = await filterTexturePromise;
				const newTexture = texture.clone();
				newTexture.magFilter = THREE.NearestFilter;
				newTexture.needsUpdate = true;
				return filterCube( 1, newTexture );

			},
		},
		filterCubeMagLinear: {
			async create() {

				const texture = await filterTexturePromise;
				const newTexture = texture.clone();
				newTexture.magFilter = THREE.LinearFilter;
				newTexture.needsUpdate = true;
				return filterCube( 1, newTexture );

			},
		},
		filterModes: {
			async create( props ) {

				const { scene, camera, renderInfo } = props;
				scene.background = new THREE.Color( 'black' );
				camera.far = 150;
				const texture = await filterTexturePromise;
				const root = new THREE.Object3D();
				const depth = 50;
				const plane = new THREE.PlaneGeometry( 1, depth );
				const mipmap = [];
				const numMips = 7;
				for ( let i = 0; i < numMips; ++ i ) {

					mipmap.push( createMip( i, numMips, 1 ) );

				}

				// Is this a design flaw in three.js?
				// AFAIK there's no way to clone a texture really
				// Textures can share an image and I guess deep down
				// if the image is the same they might share a WebGLTexture
				// but no checks for mipmaps I'm guessing. It seems like
				// they shouldn't be checking for same image, the should be
				// checking for same WebGLTexture. Given there is more than
				// WebGL to support maybe they need to abtract WebGLTexture to
				// PlatformTexture or something?

				const meshInfos = [
					{ x: - 1, y: 1, minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter },
					{ x: 0, y: 1, minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter },
					{ x: 1, y: 1, minFilter: THREE.NearestMipmapNearestFilter, magFilter: THREE.LinearFilter },
					{ x: - 1, y: - 1, minFilter: THREE.NearestMipmapLinearFilter, magFilter: THREE.LinearFilter },
					{ x: 0, y: - 1, minFilter: THREE.LinearMipmapNearestFilter, magFilter: THREE.LinearFilter },
					{ x: 1, y: - 1, minFilter: THREE.LinearMipmapLinearFilter, magFilter: THREE.LinearFilter },
				].map( ( info ) => {

					const copyTexture = texture.clone();
					copyTexture.minFilter = info.minFilter;
					copyTexture.magFilter = info.magFilter;
					copyTexture.wrapT = THREE.RepeatWrapping;
					copyTexture.repeat.y = depth;
					copyTexture.needsUpdate = true;

					const mipTexture = new THREE.CanvasTexture( mipmap[ 0 ] );
					mipTexture.mipmaps = mipmap;
					mipTexture.minFilter = info.minFilter;
					mipTexture.magFilter = info.magFilter;
					mipTexture.wrapT = THREE.RepeatWrapping;
					mipTexture.repeat.y = depth;

					const material = new THREE.MeshBasicMaterial( {
						map: copyTexture,
					} );

					const mesh = new THREE.Mesh( plane, material );
					mesh.rotation.x = Math.PI * .5 * info.y;
					mesh.position.x = info.x * 1.5;
					mesh.position.y = info.y;
					root.add( mesh );
					return {
						material,
						copyTexture,
						mipTexture,
					};

				} );
				scene.add( root );

				renderInfo.elem.addEventListener( 'click', () => {

					for ( const meshInfo of meshInfos ) {

						const { material, copyTexture, mipTexture } = meshInfo;
						material.map = material.map === copyTexture ? mipTexture : copyTexture;

					}

				} );

				return {
					update( time, renderInfo ) {

						const { camera } = renderInfo;
						camera.position.y = Math.sin( time * .2 ) * .5;

					},
					trackball: false,
				};

			},
		},
	} );

	const textureDiagrams = {
		differentColoredMips( parent ) {

			const numMips = 7;
			for ( let i = 0; i < numMips; ++ i ) {

				const elem = createMip( i, numMips, 4 );
				elem.className = 'border';
				elem.style.margin = '1px';
				parent.appendChild( elem );

			}

		},
	};

	function createTextureDiagram( elem ) {

		const name = elem.dataset.textureDiagram;
		const info = textureDiagrams[ name ];
		info( elem );

	}

	[ ...document.querySelectorAll( '[data-texture-diagram]' ) ].forEach( createTextureDiagram );

}