Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

WebGLPrograms: Optimize program cache key generation. (#22960)

* add perfrmance shader example

* add webglprograms

* seperate booleans

* add to files.sjon

* add more deteministic example

* use layers

* remove composer

* Update webgl_performance_shader.html

* update screenshot of webgl_performance_shader

Co-authored-by: Michael Herzog <[email protected]>
gero3 3 years ago
parent
9f6d206bfe
commit
5f55efb705
4 changed files with 395 additions and 26 deletions
Unified View Show Diff Stats
  1. 1 0
      examples/files.json
  2. BIN
      examples/screenshots/webgl_performance_shader.jpg
  3. 235 0
      examples/webgl_performance_shader.html
  4. 159 26
      src/renderers/webgl/WebGLPrograms.js

+ 1 - 0
examples/files.json
View File 

@@ -190,6 +190,7 @@
 
 		"webgl_panorama_equirectangular",
 
 		"webgl_panorama_equirectangular",
 
 		"webgl_performance",
 
 		"webgl_performance",
 
 		"webgl_performance_static",
 
 		"webgl_performance_static",
 
+		"webgl_performance_shader",
 
 		"webgl_points_billboards",
 
 		"webgl_points_billboards",
 
 		"webgl_points_dynamic",
 
 		"webgl_points_dynamic",
 
 		"webgl_points_sprites",
 
 		"webgl_points_sprites",

BIN
examples/screenshots/webgl_performance_shader.jpg
View File


+ 235 - 0
examples/webgl_performance_shader.html
View File 

@@ -0,0 +1,235 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl - materials - shaders [lava]</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="container"></div>
 
+		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - shader material demo. featuring lava shader by <a href="http://irrlicht.sourceforge.net/phpBB2/viewtopic.php?t=21057" target="_blank" rel="noopener">TheGameMaker</a></div>
 
+
 
+		<script id="fragmentShader" type="x-shader/x-fragment">
 
+
 
+			uniform float time;
 
+
 
+			uniform float fogDensity;
 
+			uniform vec3 fogColor;
 
+
 
+			uniform sampler2D texture1;
 
+			uniform sampler2D texture2;
 
+
 
+			varying vec2 vUv;
 
+
 
+			void main( void ) {
 
+
 
+				vec2 position = - 1.0 + 2.0 * vUv;
 
+
 
+				vec4 noise = texture2D( texture1, vUv );
 
+				vec2 T1 = vUv + vec2( 1.5, - 1.5 ) * time * 0.02;
 
+				vec2 T2 = vUv + vec2( - 0.5, 2.0 ) * time * 0.01;
 
+
 
+				T1.x += noise.x * 2.0;
 
+				T1.y += noise.y * 2.0;
 
+				T2.x -= noise.y * 0.2;
 
+				T2.y += noise.z * 0.2;
 
+
 
+				float p = texture2D( texture1, T1 * 2.0 ).a;
 
+
 
+				vec4 color = texture2D( texture2, T2 * 2.0 );
 
+				vec4 temp = color * ( vec4( p, p, p, p ) * 2.0 ) + ( color * color - 0.1 );
 
+
 
+				if( temp.r > 1.0 ) { temp.bg += clamp( temp.r - 2.0, 0.0, 100.0 ); }
 
+				if( temp.g > 1.0 ) { temp.rb += temp.g - 1.0; }
 
+				if( temp.b > 1.0 ) { temp.rg += temp.b - 1.0; }
 
+
 
+				gl_FragColor = temp;
 
+
 
+				float depth = gl_FragCoord.z / gl_FragCoord.w;
 
+				const float LOG2 = 1.442695;
 
+				float fogFactor = exp2( - fogDensity * fogDensity * depth * depth * LOG2 );
 
+				fogFactor = 1.0 - clamp( fogFactor, 0.0, 1.0 );
 
+
 
+				gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
 
+
 
+			}
 
+
 
+		</script>
 
+
 
+		<script id="vertexShader" type="x-shader/x-vertex">
 
+
 
+			uniform vec2 uvScale;
 
+			varying vec2 vUv;
 
+
 
+			void main()
 
+			{
 
+
 
+				vUv = uvScale * uv;
 
+				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
 
+				gl_Position = projectionMatrix * mvPosition;
 
+
 
+			}
 
+
 
+		</script>
 
+
 
+		<script type="module">
 
+
 
+			import * as THREE from '../build/three.module.js';
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			let camera, renderer, clock, scene;
 
+
 
+			let uniforms, stats;
 
+			const materials = [];
 
+
 
+			init();
 
+			animate();
 
+
 
+			function init() {
 
+
 
+				const container = document.getElementById( 'container' );
 
+
 
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 3000 );
 
+				camera.position.z = 7;
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				clock = new THREE.Clock();
 
+
 
+				const textureLoader = new THREE.TextureLoader();
 
+
 
+				uniforms = {
 
+
 
+					'fogDensity': { value: 0.001 },
 
+					'fogColor': { value: new THREE.Vector3( 0, 0, 0 ) },
 
+					'time': { value: 1.0 },
 
+					'uvScale': { value: new THREE.Vector2( 3.0, 1.0 ) },
 
+					'texture1': { value: textureLoader.load( 'textures/lava/cloud.png' ) },
 
+					'texture2': { value: textureLoader.load( 'textures/lava/lavatile.jpg' ) }
 
+
 
+				};
 
+
 
+				uniforms[ 'texture1' ].value.wrapS = uniforms[ 'texture1' ].value.wrapT = THREE.RepeatWrapping;
 
+				uniforms[ 'texture2' ].value.wrapS = uniforms[ 'texture2' ].value.wrapT = THREE.RepeatWrapping;
 
+
 
+
 
+				//
 
+
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				container.appendChild( renderer.domElement );
 
+			
+				//
 
+
 
+				stats = new Stats();
 
+				container.appendChild( stats.dom );
 
+
 
+				onWindowResize();
 
+
 
+
 
+				window.addEventListener( 'resize', onWindowResize );
 
+
 
+			}
 
+
 
+			function onWindowResize() {
 
+
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				addMeshes();
 
+
 
+			}
 
+
 
+			function removeAllMeshes() {
 
+
 
+				for ( var i = scene.children.length - 1; i >= 0; i -- ) {
 
+
 
+					const obj = scene.children[ i ];
 
+					scene.remove( obj );
 
+
 
+				}
 
+
 
+			}
 
+
 
+			function addMeshes() {
 
+			
+				removeAllMeshes();
 
+				//reset pseudorandom number
 
+				THREE.MathUtils.seededRandom( 1 );
 
+			
+				const projScreenMatrix = new THREE.Matrix4();
 
+				const frustum = new THREE.Frustum();
 
+				camera.updateMatrixWorld();
 
+				projScreenMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
 
+				frustum.setFromProjectionMatrix( projScreenMatrix );
 
+			
+				const size = 0.65;
 
+				let meshesCount = 0;
 
+				while ( meshesCount < 2500 ) {
 
+
 
+					const material = new THREE.ShaderMaterial( {
 
+
 
+						uniforms: uniforms,
 
+						vertexShader: document.getElementById( 'vertexShader' ).textContent,
 
+						fragmentShader: document.getElementById( 'fragmentShader' ).textContent
 
+
 
+					} );
 
+
 
+
 
+					const mesh = new THREE.Mesh( new THREE.TorusGeometry( size, 0.3, 30, 30 ), material );
 
+
 
+					mesh.position.x = THREE.MathUtils.seededRandom() * 20 - 10;
 
+					mesh.position.y = THREE.MathUtils.seededRandom() * 20 - 10;
 
+					mesh.position.z = THREE.MathUtils.seededRandom() * 20 - 10;
 
+					mesh.rotation.x = THREE.MathUtils.seededRandom() * 2 * Math.PI;
 
+					mesh.rotation.y = THREE.MathUtils.seededRandom() * 2 * Math.PI;
 
+					mesh.scale.x = mesh.scale.y = mesh.scale.z = THREE.MathUtils.seededRandom() * .2 + 0.1;
 
+
 
+					mesh.updateMatrixWorld();
 
+
 
+					if ( frustum.intersectsObject( mesh ) ) {
 
+
 
+						// mesh.rotation.x = 0.3;
 
+						materials.push( material );
 
+						scene.add( mesh );
 
+						meshesCount ++;
 
+
 
+					}
 
+			
+				}
 
+
 
+			}
 
+
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				materials.forEach( ( material ) => {
 
+
 
+					material.needsUpdate = true;
 
+
 
+				} );
 
+
 
+				const delta = 5 * clock.getDelta();
 
+				uniforms[ 'time' ].value += 0.2 * delta;
 
+
 
+				renderer.render( scene, camera );
 
+
 
+			}
 
+
 
+		</script>
 
+
 
+	</body>
 
+</html>

+ 159 - 26
src/renderers/webgl/WebGLPrograms.js
View File 

@@ -1,4 +1,5 @@
 
 import { BackSide, DoubleSide, CubeUVRefractionMapping, CubeUVReflectionMapping, LinearEncoding, sRGBEncoding, ObjectSpaceNormalMap, TangentSpaceNormalMap, NoToneMapping, RGBAFormat, UnsignedByteType } from '../../constants.js';
 
 import { BackSide, DoubleSide, CubeUVRefractionMapping, CubeUVReflectionMapping, LinearEncoding, sRGBEncoding, ObjectSpaceNormalMap, TangentSpaceNormalMap, NoToneMapping, RGBAFormat, UnsignedByteType } from '../../constants.js';
 
+import { Layers } from '../../core/Layers.js';
 
 import { WebGLProgram } from './WebGLProgram.js';
 
 import { WebGLProgram } from './WebGLProgram.js';
 
 import { ShaderLib } from '../shaders/ShaderLib.js';
 
 import { ShaderLib } from '../shaders/ShaderLib.js';
 
 import { UniformsUtils } from '../shaders/UniformsUtils.js';
 
 import { UniformsUtils } from '../shaders/UniformsUtils.js';
 
@@ -6,6 +7,7 @@ import { hashString } from '../../utils.js';
 
 
 
 function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities, bindingStates, clipping ) {
 
 function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities, bindingStates, clipping ) {
 
 
 
+	const _programLayers = new Layers();
 
 	const programs = [];
 
 	const programs = [];
 
 
 
 	const isWebGL2 = capabilities.isWebGL2;
 
 	const isWebGL2 = capabilities.isWebGL2;
 
@@ -13,7 +15,6 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 
 	const floatVertexTextures = capabilities.floatVertexTextures;
 
 	const floatVertexTextures = capabilities.floatVertexTextures;
 
 	const maxVertexUniforms = capabilities.maxVertexUniforms;
 
 	const maxVertexUniforms = capabilities.maxVertexUniforms;
 
 	const vertexTextures = capabilities.vertexTextures;
 
 	const vertexTextures = capabilities.vertexTextures;
 
-
 
 	let precision = capabilities.precision;
 
 	let precision = capabilities.precision;
 
 
 
 	const shaderIDs = {
 
 	const shaderIDs = {
 
@@ -34,25 +35,6 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 
 		SpriteMaterial: 'sprite'
 
 		SpriteMaterial: 'sprite'
 
 	};
 
 	};
 
 
 
-	const parameterNames = [
 
-		'precision', 'isWebGL2', 'supportsVertexTextures', 'outputEncoding', 'instancing', 'instancingColor',
 
-		'map', 'mapEncoding', 'matcap', 'matcapEncoding', 'envMap', 'envMapMode', 'envMapEncoding', 'envMapCubeUV',
 
-		'lightMap', 'lightMapEncoding', 'aoMap', 'emissiveMap', 'emissiveMapEncoding', 'bumpMap', 'normalMap',
 
-		'objectSpaceNormalMap', 'tangentSpaceNormalMap',
 
-		'clearcoat', 'clearcoatMap', 'clearcoatRoughnessMap', 'clearcoatNormalMap',
 
-		'displacementMap', 'specularMap', 'roughnessMap', 'metalnessMap', 'gradientMap',
 
-		'alphaMap', 'alphaTest', 'combine', 'vertexColors', 'vertexAlphas', 'vertexTangents', 'vertexUvs', 'uvsVertexOnly', 'fog', 'useFog', 'fogExp2',
 
-		'flatShading', 'sizeAttenuation', 'logarithmicDepthBuffer', 'skinning',
 
-		'maxBones', 'useVertexTexture', 'morphTargets', 'morphNormals', 'morphTargetsCount', 'premultipliedAlpha',
 
-		'numDirLights', 'numPointLights', 'numSpotLights', 'numHemiLights', 'numRectAreaLights',
 
-		'numDirLightShadows', 'numPointLightShadows', 'numSpotLightShadows',
 
-		'shadowMapEnabled', 'shadowMapType', 'toneMapping', 'physicallyCorrectLights',
 
-		'doubleSided', 'flipSided', 'numClippingPlanes', 'numClipIntersection', 'depthPacking', 'dithering', 'format',
 
-		'specularIntensityMap', 'specularColorMap', 'specularColorMapEncoding',
 
-		'transmission', 'transmissionMap', 'thicknessMap',
 
-		'sheen', 'sheenColorMap', 'sheenColorMapEncoding', 'sheenRoughnessMap'
 
-	];
 
-
 
 	function getMaxBones( object ) {
 
 	function getMaxBones( object ) {
 
 
 
 		const skeleton = object.skeleton;
 
 		const skeleton = object.skeleton;
 
@@ -332,12 +314,8 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 
 
 
 		if ( parameters.isRawShaderMaterial === false ) {
 
 		if ( parameters.isRawShaderMaterial === false ) {
 
 
 
-			for ( let i = 0; i < parameterNames.length; i ++ ) {
 
-
 
-				array.push( parameters[ parameterNames[ i ] ] );
 
-
 
-			}
 
-
 
+			getProgramCacheKeyParameters( array, parameters );
 
+			getProgramCacheKeyBooleans( array, parameters );
 
 			array.push( renderer.outputEncoding );
 
 			array.push( renderer.outputEncoding );
 
 			array.push( renderer.gammaFactor );
 
 			array.push( renderer.gammaFactor );
 
 
 
@@ -349,6 +327,161 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 
 
 
 	}
 
 	}
 
 
 
+	function getProgramCacheKeyParameters( array, parameters ) {
 
+
 
+		array.push( parameters.precision );
 
+		array.push( parameters.outputEncoding );
 
+		array.push( parameters.mapEncoding );
 
+		array.push( parameters.matcapEncoding );
 
+		array.push( parameters.envMapMode );
 
+		array.push( parameters.envMapEncoding );
 
+		array.push( parameters.lightMapEncoding );
 
+		array.push( parameters.emissiveMapEncoding );
 
+		array.push( parameters.combine );
 
+		array.push( parameters.vertexUvs );
 
+		array.push( parameters.fogExp2 );
 
+		array.push( parameters.sizeAttenuation );
 
+		array.push( parameters.maxBones );
 
+		array.push( parameters.morphTargetsCount );
 
+		array.push( parameters.numDirLights );
 
+		array.push( parameters.numPointLights );
 
+		array.push( parameters.numSpotLights );
 
+		array.push( parameters.numHemiLights );
 
+		array.push( parameters.numRectAreaLights );
 
+		array.push( parameters.numDirLightShadows );
 
+		array.push( parameters.numPointLightShadows );
 
+		array.push( parameters.numSpotLightShadows );
 
+		array.push( parameters.shadowMapType );
 
+		array.push( parameters.toneMapping );
 
+		array.push( parameters.numClippingPlanes );
 
+		array.push( parameters.numClipIntersection );
 
+		array.push( parameters.format );
 
+		array.push( parameters.specularColorMapEncoding );
 
+		array.push( parameters.sheenColorMapEncoding );
 
+
 
+	}
 
+
 
+	function getProgramCacheKeyBooleans( array, parameters ) {
 
+
 
+		_programLayers.disableAll();
 
+
 
+		if ( parameters.isWebGL2 )
 
+			_programLayers.enable( 0 );
 
+		if ( parameters.supportsVertexTextures )
 
+			_programLayers.enable( 1 );
 
+		if ( parameters.instancing )
 
+			_programLayers.enable( 2 );
 
+		if ( parameters.instancingColor )
 
+			_programLayers.enable( 3 );
 
+		if ( parameters.map )
 
+			_programLayers.enable( 4 );
 
+		if ( parameters.matcap )
 
+			_programLayers.enable( 5 );
 
+		if ( parameters.envMap )
 
+			_programLayers.enable( 6 );
 
+		if ( parameters.envMapCubeUV )
 
+			_programLayers.enable( 7 );
 
+		if ( parameters.lightMap )
 
+			_programLayers.enable( 8 );
 
+		if ( parameters.aoMap )
 
+			_programLayers.enable( 9 );
 
+		if ( parameters.emissiveMap )
 
+			_programLayers.enable( 10 );
 
+		if ( parameters.bumpMap )
 
+			_programLayers.enable( 11 );
 
+		if ( parameters.normalMap )
 
+			_programLayers.enable( 12 );
 
+		if ( parameters.objectSpaceNormalMap )
 
+			_programLayers.enable( 13 );
 
+		if ( parameters.tangentSpaceNormalMap )
 
+			_programLayers.enable( 14 );
 
+		if ( parameters.clearcoat )
 
+			_programLayers.enable( 15 );
 
+		if ( parameters.clearcoatMap )
 
+			_programLayers.enable( 16 );
 
+		if ( parameters.clearcoatRoughnessMap )
 
+			_programLayers.enable( 17 );
 
+		if ( parameters.clearcoatNormalMap )
 
+			_programLayers.enable( 18 );
 
+		if ( parameters.displacementMap )
 
+			_programLayers.enable( 19 );
 
+		if ( parameters.specularMap )
 
+			_programLayers.enable( 20 );
 
+		if ( parameters.roughnessMap )
 
+			_programLayers.enable( 21 );
 
+		if ( parameters.metalnessMap )
 
+			_programLayers.enable( 22 );
 
+		if ( parameters.gradientMap )
 
+			_programLayers.enable( 23 );
 
+		if ( parameters.alphaMap )
 
+			_programLayers.enable( 24 );
 
+		if ( parameters.alphaTest )
 
+			_programLayers.enable( 25 );
 
+		if ( parameters.vertexColors )
 
+			_programLayers.enable( 26 );
 
+		if ( parameters.vertexAlphas )
 
+			_programLayers.enable( 27 );
 
+		if ( parameters.vertexUvs )
 
+			_programLayers.enable( 28 );
 
+		if ( parameters.vertexTangents )
 
+			_programLayers.enable( 29 );
 
+		if ( parameters.uvsVertexOnly )
 
+			_programLayers.enable( 30 );
 
+		if ( parameters.fog )
 
+			_programLayers.enable( 31 );
 
+
 
+		array.push( _programLayers.mask );
 
+		_programLayers.disableAll();
 
+
 
+		if ( parameters.useFog )
 
+			_programLayers.enable( 0 );
 
+		if ( parameters.flatShading )
 
+			_programLayers.enable( 1 );
 
+		if ( parameters.logarithmicDepthBuffer )
 
+			_programLayers.enable( 2 );
 
+		if ( parameters.skinning )
 
+			_programLayers.enable( 3 );
 
+		if ( parameters.useVertexTexture )
 
+			_programLayers.enable( 4 );
 
+		if ( parameters.morphTargets )
 
+			_programLayers.enable( 5 );
 
+		if ( parameters.morphNormals )
 
+			_programLayers.enable( 6 );
 
+		if ( parameters.premultipliedAlpha )
 
+			_programLayers.enable( 7 );
 
+		if ( parameters.shadowMapEnabled )
 
+			_programLayers.enable( 8 );
 
+		if ( parameters.physicallyCorrectLights )
 
+			_programLayers.enable( 9 );
 
+		if ( parameters.doubleSided )
 
+			_programLayers.enable( 10 );
 
+		if ( parameters.flipSided )
 
+			_programLayers.enable( 11 );
 
+		if ( parameters.depthPacking )
 
+			_programLayers.enable( 12 );
 
+		if ( parameters.dithering )
 
+			_programLayers.enable( 13 );
 
+		if ( parameters.specularIntensityMap )
 
+			_programLayers.enable( 14 );
 
+		if ( parameters.specularColorMap )
 
+			_programLayers.enable( 15 );
 
+		if ( parameters.transmission )
 
+			_programLayers.enable( 16 );
 
+		if ( parameters.transmissionMap )
 
+			_programLayers.enable( 17 );
 
+		if ( parameters.thicknessMap )
 
+			_programLayers.enable( 18 );
 
+		if ( parameters.sheen )
 
+			_programLayers.enable( 19 );
 
+		if ( parameters.sheenColorMap )
 
+			_programLayers.enable( 20 );
 
+		if ( parameters.sheenRoughnessMap )
 
+			_programLayers.enable( 21 );
 
+
 
+		array.push( _programLayers.mask );
 
+
 
+	}
 
+
 
 	function getUniforms( material ) {
 
 	function getUniforms( material ) {
 
 
 
 		const shaderID = shaderIDs[ material.type ];
 
 		const shaderID = shaderIDs[ material.type ];