fixed cubemap dynamic example and small PMREMs (#23428)

examples/webgl_materials_cubemap_dynamic.html

@@ -73,11 +73,15 @@
 
 				//
 
-				cubeRenderTarget1 = new THREE.WebGLCubeRenderTarget( 256 );
+				const envSize = 64; // minimum size for roughness >= 0.1
+
+				cubeRenderTarget1 = new THREE.WebGLCubeRenderTarget( envSize );
+				cubeRenderTarget1.texture.image[0] = {width: envSize, height: envSize};
 
 				cubeCamera1 = new THREE.CubeCamera( 1, 1000, cubeRenderTarget1 );
 
-				cubeRenderTarget2 = new THREE.WebGLCubeRenderTarget( 256 );
+				cubeRenderTarget2 = new THREE.WebGLCubeRenderTarget( envSize );
+				cubeRenderTarget2.texture.image[0] = {width: envSize, height: envSize};
 
 				cubeCamera2 = new THREE.CubeCamera( 1, 1000, cubeRenderTarget2 );
 
@@ -85,7 +89,7 @@
 
 				material = new THREE.MeshStandardMaterial( {
 					envMap: cubeRenderTarget2.texture,
-					roughness: 0.2,
+					roughness: 0.1,
 					metalness: 1
 				} );
 

src/renderers/webgl/WebGLProgram.js

@@ -373,7 +373,7 @@ function generateCubeUVSize( parameters ) {
 
 	const texelHeight = 1.0 / imageHeight;
 
-	const texelWidth = 1.0 / ( 3 * Math.max( Math.pow( 2, maxMip ), 7 ) );
+	const texelWidth = 1.0 / ( 3 * Math.max( Math.pow( 2, maxMip ), 7 * 16 ) );
 
 	return { texelWidth, texelHeight, maxMip };