Examples: Added FlakeTexture generator.

examples/jsm/textures/FlakeTexture.js

@@ -0,0 +1,44 @@
+/**
+ * @author mr.doob / http://mrdoob.com/
+ */
+
+class FlakeTexture {
+
+	constructor( width = 512, height = 512 ) {
+
+		var canvas = document.createElement( 'canvas' );
+		canvas.width = width;
+		canvas.height = height;
+
+		var context = canvas.getContext( '2d' );
+		context.fillStyle = 'rgb(127,127,255)';
+		context.fillRect( 0, 0, width, height );
+
+		for ( var i = 0; i < 4000; i ++ ) {
+
+			var x = Math.random() * width;
+			var y = Math.random() * height;
+			var r = Math.random() * 3 + 3;
+
+			var nx = Math.random() * 2 - 1;
+			var ny = Math.random() * 2 - 1;
+			var nz = 1.5;
+
+			var l = Math.sqrt( nx * nx + ny * ny + nz * nz );
+
+			nx /= l; ny /= l; nz /= l;
+
+			context.fillStyle = 'rgb(' + ( nx * 127 + 127 ) + ',' + ( ny * 127 + 127 ) + ',' + ( nz * 255 ) + ')';
+			context.beginPath();
+			context.arc( x, y, r, 0, Math.PI * 2 );
+			context.fill();
+
+		}
+
+		return canvas;
+
+	}
+
+}
+
+export { FlakeTexture };

examples/webgl_materials_physical_clearcoat.html

@@ -20,6 +20,8 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
 
+			import { FlakeTexture } from './jsm/textures/FlakeTexture.js';
+
 			var container, stats;
 
 			var camera, scene, renderer;
@@ -70,11 +72,11 @@
 
 							var normalMap2 = textureLoader.load( "textures/water/Water_1_M_Normal.jpg" );
 
-							var normalMap3 = textureLoader.load( "textures/flakes.png" );
+							var normalMap3 = new THREE.CanvasTexture( new FlakeTexture() );
 							normalMap3.wrapS = THREE.RepeatWrapping;
 							normalMap3.wrapT = THREE.RepeatWrapping;
 							normalMap3.repeat.x = 10;
-							normalMap3.repeat.y = 10;
+							normalMap3.repeat.y = 6;
 							normalMap3.anisotropy = 16;
 
 							var normalMap4 = textureLoader.load( "textures/golfball.jpg" );
@@ -122,7 +124,7 @@
 								clearcoatNormalMap: clearcoatNormaMap,
 
 								// y scale is negated to compensate for normal map handedness.
-								clearcoatNormalScale: new THREE.Vector2( 2.0, -2.0 )
+								clearcoatNormalScale: new THREE.Vector2( 2.0, - 2.0 )
 							} );
 							var mesh = new THREE.Mesh( geometry, material );
 							mesh.position.x = - 100;
@@ -140,7 +142,7 @@
 								clearcoatNormalMap: clearcoatNormaMap,
 
 								// y scale is negated to compensate for normal map handedness.
-								clearcoatNormalScale: new THREE.Vector2( 2.0, -2.0 )
+								clearcoatNormalScale: new THREE.Vector2( 2.0, - 2.0 )
 							} );
 							var mesh = new THREE.Mesh( geometry, material );
 							mesh.position.x = 100;