r137 (#162)

* feat: autodetect sRGB compression

* feat: remove inline sRGB decode

* chore: remove roughness mipmapper

* feat: added constant SRGB8

* feat: WebGLCubeUVMaps: Add support for render targets

* chore: Remove RGBFormat (#159)

* change: Remove RGBFormat

See: mrdoob/three.js#23223
See: mrdoob/three.js#23228

* change: Remove .format from Material

See: mrdoob/three.js#23219

It will be replaced with .alphaWrite later

See: mrdoob/three.js#23166

* test: remove use of RGBFormat from a test case

* feat: add LDrawUtils

* chore: make ConvexGeometry points optional

* chore: remove RGBIntegerFormat

* feat: Box3 now supports computing minimal bounds for setFromObject

* feat(Material): Add a new property .alphaWrite (#161)

Since it's undocumented I could not fill the doc comment properly,,,

See: mrdoob/three.js#23166

* chore: remove UnsignedShort565Type

* chore: remove RoomEnvironment from OTHER_FILES

* chore: remove LDrawLoader from OTHER_FILES

* chore: fix linting

* chore: fix linting

Co-authored-by: 0b5vr <[email protected]>

types/three/OTHER_FILES.txt

@@ -14,7 +14,6 @@ examples/jsm/effects/AsciiEffect.d.ts
 examples/jsm/effects/ParallaxBarrierEffect.d.ts
 examples/jsm/effects/PeppersGhostEffect.d.ts
 examples/jsm/effects/StereoEffect.d.ts
-examples/jsm/environments/RoomEnvironment.d.ts
 examples/jsm/exporters/ColladaExporter.d.ts
 examples/jsm/exporters/DRACOExporter.d.ts
 examples/jsm/exporters/GLTFExporter.d.ts
@@ -52,7 +51,6 @@ examples/jsm/loaders/FBXLoader.d.ts
 examples/jsm/loaders/GCodeLoader.d.ts
 examples/jsm/loaders/KMZLoader.d.ts
 examples/jsm/loaders/KTXLoader.d.ts
-examples/jsm/loaders/LDrawLoader.d.ts
 examples/jsm/loaders/LogLuvLoader.d.ts
 examples/jsm/loaders/LottieLoader.d.ts
 examples/jsm/loaders/LUT3dlLoader.d.ts
@@ -258,7 +256,6 @@ examples/jsm/shaders/VolumeShader.d.ts
 examples/jsm/shaders/WaterRefractionShader.d.ts
 examples/jsm/utils/BufferGeometryUtils.d.ts
 examples/jsm/utils/GeometryCompressionUtils.d.ts
-examples/jsm/utils/RoughnessMipmapper.d.ts
 examples/jsm/utils/SceneUtils.d.ts
 examples/jsm/utils/ShadowMapViewer.d.ts
 examples/jsm/utils/SkeletonUtils.d.ts

types/three/examples/jsm/geometries/ConvexGeometry.d.ts

@@ -1,5 +1,5 @@
 import { BufferGeometry, Vector3 } from '../../../src/Three';
 
 export class ConvexGeometry extends BufferGeometry {
-    constructor(points: Vector3[]);
+    constructor(points?: Vector3[]);
 }

types/three/examples/jsm/loaders/LDrawLoader.d.ts

@@ -1,6 +1,11 @@
 import { Loader, LoadingManager, Group, Material } from '../../../src/Three';
 
 export class LDrawLoader extends Loader {
+    materials: Material[];
+    materialsLibrary: Record<string, Material>;
+    fileMap: Record<string, string>;
+    smoothNormals: boolean;
+
     constructor(manager?: LoadingManager);
 
     load(
@@ -10,6 +15,7 @@ export class LDrawLoader extends Loader {
         onError?: (event: ErrorEvent) => void,
     ): void;
     loadAsync(url: string, onProgress?: (event: ProgressEvent) => void): Promise<Group>;
+    preloadMaterials(url: string): Promise<void>;
     setFileMap(fileMap: Record<string, string>): void;
     setMaterials(materials: Material[]): void;
 

types/three/examples/jsm/nodes/utils/ColorSpaceNode.d.ts

@@ -10,7 +10,7 @@ export class ColorSpaceNode extends TempNode {
     nodeType: string;
 
     fromEncoding(encoding: number): void;
-    fromDecoding(encoding: number): void;
+    fromDecoding(): void;
     copy(source: ColorSpaceNode): this;
 
     static Nodes: {

types/three/examples/jsm/utils/LDrawUtils.d.ts

@@ -0,0 +1,5 @@
+import { Group, Object3D } from '../../../src/Three';
+
+export namespace LDrawUtils {
+    function mergeObject(object: Object3D): Group;
+}

types/three/src/constants.d.ts

@@ -148,13 +148,11 @@ export const FloatType: TextureDataType;
 export const HalfFloatType: TextureDataType;
 export const UnsignedShort4444Type: TextureDataType;
 export const UnsignedShort5551Type: TextureDataType;
-export const UnsignedShort565Type: TextureDataType;
 export const UnsignedInt248Type: TextureDataType;
 
 // Pixel formats
 export enum PixelFormat {}
 export const AlphaFormat: PixelFormat;
-export const RGBFormat: PixelFormat;
 export const RGBAFormat: PixelFormat;
 export const LuminanceFormat: PixelFormat;
 export const LuminanceAlphaFormat: PixelFormat;
@@ -164,8 +162,9 @@ export const RedFormat: PixelFormat;
 export const RedIntegerFormat: PixelFormat;
 export const RGFormat: PixelFormat;
 export const RGIntegerFormat: PixelFormat;
-export const RGBIntegerFormat: PixelFormat;
 export const RGBAIntegerFormat: PixelFormat;
+export const _SRGBFormat: PixelFormat; // fallback for WebGL 1
+export const _SRGBAFormat: PixelFormat; // fallback for WebGL 1
 
 // Internal Pixel Formats
 export type PixelFormatGPU =
@@ -224,6 +223,7 @@ export type PixelFormatGPU =
     | 'RGB10_A2'
     | 'RGB10_A2UI'
     | 'SRGB8_ALPHA8'
+    | 'SRGB8'
     | 'DEPTH_COMPONENT16'
     | 'DEPTH_COMPONENT24'
     | 'DEPTH_COMPONENT32F'
@@ -264,20 +264,6 @@ export const RGBA_ASTC_10x8_Format: CompressedPixelFormat;
 export const RGBA_ASTC_10x10_Format: CompressedPixelFormat;
 export const RGBA_ASTC_12x10_Format: CompressedPixelFormat;
 export const RGBA_ASTC_12x12_Format: CompressedPixelFormat;
-export const SRGB8_ALPHA8_ASTC_4x4_Format: CompressedPixelFormat;
-export const SRGB8_ALPHA8_ASTC_5x4_Format: CompressedPixelFormat;
-export const SRGB8_ALPHA8_ASTC_5x5_Format: CompressedPixelFormat;
-export const SRGB8_ALPHA8_ASTC_6x5_Format: CompressedPixelFormat;
-export const SRGB8_ALPHA8_ASTC_6x6_Format: CompressedPixelFormat;
-export const SRGB8_ALPHA8_ASTC_8x5_Format: CompressedPixelFormat;
-export const SRGB8_ALPHA8_ASTC_8x6_Format: CompressedPixelFormat;
-export const SRGB8_ALPHA8_ASTC_8x8_Format: CompressedPixelFormat;
-export const SRGB8_ALPHA8_ASTC_10x5_Format: CompressedPixelFormat;
-export const SRGB8_ALPHA8_ASTC_10x6_Format: CompressedPixelFormat;
-export const SRGB8_ALPHA8_ASTC_10x8_Format: CompressedPixelFormat;
-export const SRGB8_ALPHA8_ASTC_10x10_Format: CompressedPixelFormat;
-export const SRGB8_ALPHA8_ASTC_12x10_Format: CompressedPixelFormat;
-export const SRGB8_ALPHA8_ASTC_12x12_Format: CompressedPixelFormat;
 
 // BPTC compressed texture formats
 export const RGBA_BPTC_Format: CompressedPixelFormat;

types/three/src/extras/ImageUtils.d.ts

@@ -28,4 +28,6 @@ export namespace ImageUtils {
         onLoad?: (texture: Texture) => void,
         onError?: (message: string) => void,
     ): Texture;
+
+    function sRGBToLinear(image: any): HTMLCanvasElement | { data: number[]; width: number; height: number };
 }

types/three/src/extras/PMREMGenerator.d.ts

@@ -7,8 +7,8 @@ import { Scene } from '../scenes/Scene';
 export class PMREMGenerator {
     constructor(renderer: WebGLRenderer);
     fromScene(scene: Scene, sigma?: number, near?: number, far?: number): WebGLRenderTarget;
-    fromEquirectangular(equirectangular: Texture): WebGLRenderTarget;
-    fromCubemap(cubemap: CubeTexture): WebGLRenderTarget;
+    fromEquirectangular(equirectangular: Texture, renderTarget?: WebGLRenderTarget | null): WebGLRenderTarget;
+    fromCubemap(cubemap: CubeTexture, renderTarget?: WebGLRenderTarget | null): WebGLRenderTarget;
     compileCubemapShader(): void;
     compileEquirectangularShader(): void;
     dispose(): void;

types/three/src/materials/Material.d.ts

@@ -80,6 +80,11 @@ export class Material extends EventDispatcher {
      */
     alphaToCoverage: boolean;
 
+    /**
+     * @default false
+     */
+    alphaWrite: boolean;
+
     /**
      * Blending destination. It's one of the blending mode constants defined in Three.js. Default is {@link OneMinusSrcAlphaFactor}.
      * @default THREE.OneMinusSrcAlphaFactor
@@ -181,12 +186,6 @@ export class Material extends EventDispatcher {
      */
     fog: boolean;
 
-    /**
-     * When this property is set to THREE.RGBFormat, the material is considered to be opaque and alpha values are ignored.
-     * @default THREE.RGBAFormat
-     */
-    format: PixelFormat;
-
     /**
      * Unique number of this material instance.
      */

types/three/src/math/Box3.d.ts

@@ -25,7 +25,7 @@ export class Box3 {
     setFromBufferAttribute(bufferAttribute: BufferAttribute): this;
     setFromPoints(points: Vector3[]): this;
     setFromCenterAndSize(center: Vector3, size: Vector3): this;
-    setFromObject(object: Object3D): this;
+    setFromObject(object: Object3D, precise?: boolean): this;
     clone(): this;
     copy(box: Box3): this;
     makeEmpty(): this;
@@ -35,7 +35,7 @@ export class Box3 {
     expandByPoint(point: Vector3): this;
     expandByVector(vector: Vector3): this;
     expandByScalar(scalar: number): this;
-    expandByObject(object: Object3D): this;
+    expandByObject(object: Object3D, precise?: boolean): this;
     containsPoint(point: Vector3): boolean;
     containsBox(box: Box3): boolean;
     getParameter(point: Vector3, target: Vector3): Vector3;

types/three/src/math/Color.d.ts

@@ -7,6 +7,8 @@ export interface HSL {
     l: number;
 }
 
+export function SRGBToLinear(c: number): number;
+
 /**
  * Represents a color. See also {@link ColorUtils}.
  *

types/three/src/renderers/webgl/WebGLUtils.d.ts

@@ -1,5 +1,7 @@
+import { CompressedPixelFormat, TextureEncoding } from '../../constants';
+
 export class WebGLUtils {
     constructor(gl: WebGLRenderingContext | WebGL2RenderingContext, extensions: any, capabilities: any);
 
-    convert(p: any): void;
+    convert(p: CompressedPixelFormat, encoding?: TextureEncoding | null): void;
 }

types/three/src/textures/CubeTexture.d.ts

@@ -9,7 +9,7 @@ export class CubeTexture extends Texture {
      * @param [wrapT=THREE.ClampToEdgeWrapping]
      * @param [magFilter=THREE.LinearFilter]
      * @param [minFilter=THREE.LinearMipmapLinearFilter]
-     * @param [format=THREE.RGBFormat]
+     * @param [format=THREE.RGBAFormat]
      * @param [type=THREE.UnsignedByteType]
      * @param [anisotropy=1]
      * @param [encoding=THREE.LinearEncoding]

types/three/src/textures/VideoTexture.d.ts

@@ -9,7 +9,7 @@ export class VideoTexture extends Texture {
      * @param [wrapT=THREE.ClampToEdgeWrapping]
      * @param [magFilter=THREE.LinearFilter]
      * @param [minFilter=THREE.LinearFilter]
-     * @param [format=THREE.RGBFormat]
+     * @param [format=THREE.RGBAFormat]
      * @param [type=THREE.UnsignedByteType]
      * @param [anisotropy=1]
      */

types/three/test/loaders/loaders-gltfloader.ts

@@ -0,0 +1,72 @@
+import * as THREE from 'three';
+
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+
+let camera: THREE.PerspectiveCamera;
+let scene: THREE.Scene;
+let renderer: THREE.WebGLRenderer;
+
+init();
+render();
+
+function init() {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 20);
+    camera.position.set(-1.8, 0.6, 2.7);
+
+    scene = new THREE.Scene();
+
+    new RGBELoader().setPath('textures/equirectangular/').load('royal_esplanade_1k.hdr', texture => {
+        texture.mapping = THREE.EquirectangularReflectionMapping;
+
+        scene.background = texture;
+        scene.environment = texture;
+
+        render();
+
+        // model
+
+        const loader = new GLTFLoader().setPath('models/gltf/DamagedHelmet/glTF/');
+        loader.load('DamagedHelmet.gltf', gltf => {
+            scene.add(gltf.scene);
+
+            render();
+        });
+    });
+
+    renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    renderer.toneMappingExposure = 1;
+    renderer.outputEncoding = THREE.sRGBEncoding;
+    container.appendChild(renderer.domElement);
+
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.addEventListener('change', render); // use if there is no animation loop
+    controls.minDistance = 2;
+    controls.maxDistance = 10;
+    controls.target.set(0, 0, -0.2);
+    controls.update();
+
+    window.addEventListener('resize', onWindowResize);
+}
+
+function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+
+    renderer.setSize(window.innerWidth, window.innerHeight);
+
+    render();
+}
+
+//
+
+function render() {
+    renderer.render(scene, camera);
+}