From 8f9f29943401891593ee5da18feaad8152a6a797 Mon Sep 17 00:00:00 2001
From: aardgoose <angus.sawyer@email.com>
Date: Thu, 2 May 2024 20:26:21 +0100
Subject: [PATCH 1/2] add MaterialMatcapNodesMaterial

---
 examples/files.json                           |   1 +
 examples/jsm/nodes/materials/Materials.js     |   1 +
 .../nodes/materials/MeshMatcapNodeMaterial.js |  56 ++++
 .../screenshots/webgpu_materials_matcap.jpg   | Bin 0 -> 12538 bytes
 examples/webgpu_materials_matcap.html         | 274 ++++++++++++++++++
 5 files changed, 332 insertions(+)
 create mode 100644 examples/jsm/nodes/materials/MeshMatcapNodeMaterial.js
 create mode 100644 examples/screenshots/webgpu_materials_matcap.jpg
 create mode 100644 examples/webgpu_materials_matcap.html

diff --git a/examples/files.json b/examples/files.json
index 14a8ae11c2209e..241a529bdd6e61 100644
--- a/examples/files.json
+++ b/examples/files.json
@@ -344,6 +344,7 @@
 		"webgpu_materials",
 		"webgpu_materials_displacementmap",
 		"webgpu_materials_lightmap",
+		"webgpu_materials_matcap",
 		"webgpu_materials_sss",
 		"webgpu_materials_transmission",
 		"webgpu_materials_video",
diff --git a/examples/jsm/nodes/materials/Materials.js b/examples/jsm/nodes/materials/Materials.js
index 2577ca75eb36b2..62a57c36e7a985 100644
--- a/examples/jsm/nodes/materials/Materials.js
+++ b/examples/jsm/nodes/materials/Materials.js
@@ -12,6 +12,7 @@ export { default as MeshPhongNodeMaterial } from './MeshPhongNodeMaterial.js';
 export { default as MeshStandardNodeMaterial } from './MeshStandardNodeMaterial.js';
 export { default as MeshPhysicalNodeMaterial } from './MeshPhysicalNodeMaterial.js';
 export { default as MeshSSSNodeMaterial } from './MeshSSSNodeMaterial.js';
+export { default as MeshMatcapNodeMaterial } from './MeshMatcapNodeMaterial.js';
 export { default as PointsNodeMaterial } from './PointsNodeMaterial.js';
 export { default as SpriteNodeMaterial } from './SpriteNodeMaterial.js';
 export { default as ShadowNodeMaterial } from './ShadowNodeMaterial.js';
diff --git a/examples/jsm/nodes/materials/MeshMatcapNodeMaterial.js b/examples/jsm/nodes/materials/MeshMatcapNodeMaterial.js
new file mode 100644
index 00000000000000..a697d45c310698
--- /dev/null
+++ b/examples/jsm/nodes/materials/MeshMatcapNodeMaterial.js
@@ -0,0 +1,56 @@
+import NodeMaterial, { addNodeMaterial } from './NodeMaterial.js';
+import { materialReference } from '../accessors/MaterialReferenceNode.js';
+import { diffuseColor } from '../core/PropertyNode.js';
+import { vec2, vec3 } from '../shadernode/ShaderNode.js';
+import { positionViewDirection } from '../accessors/PositionNode.js';
+import { MeshMatcapMaterial } from 'three';
+import { transformedNormalView } from '../accessors/NormalNode.js';
+import { mix } from '../math/MathNode.js';
+
+const defaultValues = new MeshMatcapMaterial();
+
+class MeshMatcapNodeMaterial extends NodeMaterial {
+
+	constructor( parameters ) {
+
+		super();
+
+		this.isMeshMatcapNodeMaterial = true;
+
+		this.lights = false;
+
+		this.setDefaultValues( defaultValues );
+
+		this.setValues( parameters );
+
+	}
+
+	setupVariants( builder ) {
+
+		const x = vec3( positionViewDirection.z, 0.0, positionViewDirection.x.negate() ).normalize();
+		const y = positionViewDirection.cross( x );
+
+		const uv = vec2( x.dot( transformedNormalView ), y.dot( transformedNormalView ) ).mul( 0.495 ).add( 0.5 ) ; // 0.495 to remove artifacts caused by undersized matcap disks
+
+		let matcapColor;
+
+		if ( builder.material.matcap ) {
+
+			matcapColor = materialReference( 'matcap', 'texture' ).context( { getUV: () => uv } );
+
+		} else {
+
+			matcapColor = vec3( mix( 0.2, 0.8, uv.y ) ); // default if matcap is missing
+
+		}
+
+		diffuseColor.rgb.mulAssign( matcapColor.rgb );
+
+	}
+
+}
+
+
+export default MeshMatcapNodeMaterial;
+
+addNodeMaterial( 'MeshMatcapNodeMaterial', MeshMatcapNodeMaterial );
diff --git a/examples/screenshots/webgpu_materials_matcap.jpg b/examples/screenshots/webgpu_materials_matcap.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..088a1f0f091d5d15e9f8fc3f9379f6b49af6a961
GIT binary patch
literal 12538
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

literal 0
HcmV?d00001

diff --git a/examples/webgpu_materials_matcap.html b/examples/webgpu_materials_matcap.html
new file mode 100644
index 00000000000000..e3676b60003c88
--- /dev/null
+++ b/examples/webgpu_materials_matcap.html
@@ -0,0 +1,274 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgpu - materials - matcap</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
+	</head>
+
+	<body>
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgpu materials matcap<br />
+			Drag-and-drop JPG, PNG, WebP, AVIF, or EXR MatCap image files<br/>
+		</div>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/",
+					"three/nodes": "./jsm/nodes/Nodes.js"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three';
+
+			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+			import { EXRLoader } from 'three/addons/loaders/EXRLoader.js';
+
+			import { MeshMatcapNodeMaterial } from 'three/nodes';
+
+			let mesh, renderer, scene, camera;
+
+			const API = {
+				color: 0xffffff, // sRGB
+				exposure: 1.0
+			};
+
+			init();
+
+			function init() {
+
+				// renderer
+				renderer = new WebGPURenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				document.body.appendChild( renderer.domElement );
+
+				// tone mapping
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
+			 	renderer.toneMappingExposure = API.exposure;
+
+				// scene
+				scene = new THREE.Scene();
+
+				// camera
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
+				camera.position.set( 0, 0, 13 );
+
+				// controls
+				const controls = new OrbitControls( camera, renderer.domElement );
+				controls.addEventListener( 'change', render );
+				controls.enableZoom = false;
+				controls.enablePan = false;
+
+				// manager
+				const manager = new THREE.LoadingManager( render );
+
+				// matcap
+				const loaderEXR = new EXRLoader( manager );
+				const matcap = loaderEXR.load( 'textures/matcaps/040full.exr' );
+
+				// normalmap
+				const loader = new THREE.TextureLoader( manager );
+
+				const normalmap = loader.load( 'models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg' );
+
+				// model
+				new GLTFLoader( manager ).load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
+
+					mesh = gltf.scene.children[ 0 ];
+					mesh.position.y = - 0.25;
+
+					mesh.material = new THREE.MeshMatcapMaterial( {
+
+						color: new THREE.Color().setHex( API.color ).convertSRGBToLinear(),
+						matcap: matcap,
+						normalMap: normalmap
+
+					} );
+
+					scene.add( mesh );
+
+				} );
+
+				// gui
+				const gui = new GUI();
+
+				gui.addColor( API, 'color' )
+					.listen()
+					.onChange( function () {
+
+						mesh.material.color.set( API.color ).convertSRGBToLinear();
+						render();
+
+					} );
+
+				gui.add( API, 'exposure', 0, 2 )
+					.onChange( function () {
+
+						renderer.toneMappingExposure = API.exposure;
+						render();
+
+					} );
+
+				gui.domElement.style.webkitUserSelect = 'none';
+
+				// drag 'n drop
+				initDragAndDrop();
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function onWindowResize() {
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				render();
+
+			}
+
+			function render() {
+
+				renderer.renderAsync( scene, camera );
+
+			}
+
+			//
+			// drag and drop anywhere in document
+			//
+
+			function updateMatcap( texture ) {
+
+				if ( mesh.material.matcap ) {
+
+					mesh.material.matcap.dispose();
+
+				}
+
+				mesh.material.matcap = texture;
+
+				texture.needsUpdate = true;
+
+				mesh.material.needsUpdate = true; // because the color space can change
+
+				render();
+
+			}
+
+			function handleJPG( event ) { // PNG, WebP, AVIF, too
+
+				function imgCallback( event ) {
+
+					const texture = new THREE.Texture( event.target );
+
+					texture.colorSpace = THREE.SRGBColorSpace;
+
+					updateMatcap( texture );
+
+				}
+
+				const img = new Image();
+
+				img.onload = imgCallback;
+
+				img.src = event.target.result;
+
+			}
+
+			function handleEXR( event ) {
+
+				const contents = event.target.result;
+
+				const loader = new EXRLoader();
+
+				loader.setDataType( THREE.HalfFloatType );
+
+				const texData = loader.parse( contents );
+
+				const texture = new THREE.DataTexture();
+
+				texture.image.width = texData.width;
+				texture.image.height = texData.height;
+				texture.image.data = texData.data;
+
+				texture.format = texData.format;
+				texture.type = texData.type;
+				texture.colorSpace = THREE.LinearSRGBColorSpace;
+				texture.minFilter = THREE.LinearFilter;
+				texture.magFilter = THREE.LinearFilter;
+				texture.generateMipmaps = false;
+				texture.flipY = false;
+
+				updateMatcap( texture );
+
+			}
+
+			function loadFile( file ) {
+
+				const filename = file.name;
+				const extension = filename.split( '.' ).pop().toLowerCase();
+
+				if ( extension === 'exr' ) {
+
+					const reader = new FileReader();
+
+					reader.addEventListener( 'load', function ( event ) {
+
+						handleEXR( event );
+
+					} );
+
+					reader.readAsArrayBuffer( file );
+
+				} else { // 'jpg', 'png'
+
+					const reader = new FileReader();
+
+					reader.addEventListener( 'load', function ( event ) {
+
+						handleJPG( event );
+
+					} );
+
+					reader.readAsDataURL( file );
+
+				}
+
+			}
+
+			function initDragAndDrop() {
+
+				document.addEventListener( 'dragover', function ( event ) {
+
+					event.preventDefault();
+					event.dataTransfer.dropEffect = 'copy';
+
+				} );
+
+				document.addEventListener( 'drop', function ( event ) {
+
+					event.preventDefault();
+
+					loadFile( event.dataTransfer.files[ 0 ] );
+
+				} );
+
+			}
+
+		</script>
+
+	</body>
+</html>

From 9ada0c1956fa013c9f916ac4eafaf3fdd21a9421 Mon Sep 17 00:00:00 2001
From: aardgoose <angus.sawyer@email.com>
Date: Thu, 2 May 2024 21:07:08 +0100
Subject: [PATCH 2/2] use node material directly

---
 examples/webgpu_materials_matcap.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/webgpu_materials_matcap.html b/examples/webgpu_materials_matcap.html
index e3676b60003c88..9b99156be3dd26 100644
--- a/examples/webgpu_materials_matcap.html
+++ b/examples/webgpu_materials_matcap.html
@@ -88,7 +88,7 @@
 					mesh = gltf.scene.children[ 0 ];
 					mesh.position.y = - 0.25;
 
-					mesh.material = new THREE.MeshMatcapMaterial( {
+					mesh.material = new MeshMatcapNodeMaterial( {
 
 						color: new THREE.Color().setHex( API.color ).convertSRGBToLinear(),
 						matcap: matcap,