Texture and MipMap types

Author: capnmidnight

.all-contributorsrc

@@ -349,10 +349,8 @@
       "profile": "https://github.com/atulrnt",
       "contributions": [
         "code",
-      ],
-        "code"
       ]
-    },
+    }
   ],
   "skipCi": true,
   "contributorsPerLine": 7

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

@@ -1,7 +1,7 @@
 import { LoadingManager, CompressedTextureLoader, PixelFormat, CompressedPixelFormat } from '../../../src/Three';
 
 export interface DDS {
-    mipmaps: object[];
+    mipmaps: ImageData[];
     width: number;
     height: number;
     format: PixelFormat | CompressedPixelFormat;

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

@@ -1,7 +1,7 @@
 import { LoadingManager, CompressedTextureLoader, PixelFormat, CompressedPixelFormat } from '../../../src/Three';
 
 export interface KTX {
-    mipmaps: object[];
+    mipmaps: ImageData[];
     width: number;
     height: number;
     format: PixelFormat | CompressedPixelFormat;

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

@@ -1,7 +1,7 @@
 import { LoadingManager, CompressedTextureLoader, CompressedPixelFormat } from '../../../src/Three';
 
 export interface PVR {
-    mipmaps: object[];
+    mipmaps: ImageData[];
     width: number;
     height: number;
     format: CompressedPixelFormat;

types/three/src/renderers/WebGL3DRenderTarget.d.ts

@@ -1,10 +1,11 @@
 import { Data3DTexture } from '../textures/Data3DTexture';
+import { DataDimensions3D } from '../textures/Texture';
 import { WebGLRenderTarget } from './WebGLRenderTarget';
 
 /**
  * Represents a three-dimensional render target.
  */
-export class WebGL3DRenderTarget extends WebGLRenderTarget {
+export class WebGL3DRenderTarget extends WebGLRenderTarget<DataDimensions3D, DataDimensions3D, Data3DTexture> {
     /**
      * Creates a new WebGL3DRenderTarget.
      *
@@ -19,10 +20,5 @@ export class WebGL3DRenderTarget extends WebGLRenderTarget {
      */
     depth: number;
 
-    /**
-     * The texture property is overwritten with an instance of {@link Data3DTexture}.
-     */
-    texture: Data3DTexture;
-
     readonly isWebGL3DRenderTarget: true;
 }

types/three/src/renderers/WebGLArrayRenderTarget.d.ts

@@ -1,10 +1,11 @@
 import { DataArrayTexture } from '../textures/DataArrayTexture';
+import { DataDimensions3D } from '../textures/Texture';
 import { WebGLRenderTarget } from './WebGLRenderTarget';
 
 /**
  * This type of render target represents an array of textures.
  */
-export class WebGLArrayRenderTarget extends WebGLRenderTarget {
+export class WebGLArrayRenderTarget extends WebGLRenderTarget<DataDimensions3D, DataDimensions3D, DataArrayTexture> {
     /**
      * Creates a new WebGLArrayRenderTarget.
      *
@@ -19,10 +20,5 @@ export class WebGLArrayRenderTarget extends WebGLRenderTarget {
      */
     depth: number;
 
-    /**
-     * The texture property is overwritten with an instance of {@link DataArrayTexture}.
-     */
-    texture: DataArrayTexture;
-
     readonly isWebGLArrayRenderTarget: true;
 }

types/three/src/renderers/WebGLCubeRenderTarget.d.ts

@@ -1,13 +1,11 @@
 import { WebGLRenderTargetOptions, WebGLRenderTarget } from './WebGLRenderTarget';
 import { WebGLRenderer } from './WebGLRenderer';
-import { Texture } from './../textures/Texture';
+import { BaseTextureImageType, Texture } from './../textures/Texture';
 import { CubeTexture } from './../textures/CubeTexture';
 
-export class WebGLCubeRenderTarget extends WebGLRenderTarget {
+export class WebGLCubeRenderTarget extends WebGLRenderTarget<BaseTextureImageType[], CubeTexture, CubeTexture> {
     constructor(size: number, options?: WebGLRenderTargetOptions);
 
-    texture: CubeTexture;
-
     fromEquirectangularTexture(renderer: WebGLRenderer, texture: Texture): this;
 
     clear(renderer: WebGLRenderer, color: boolean, depth: boolean, stencil: boolean): void;

types/three/src/renderers/WebGLRenderTarget.d.ts

@@ -1,5 +1,5 @@
 import { Vector4 } from './../math/Vector4';
-import { Texture } from './../textures/Texture';
+import { MipMapType, Texture, TextureImageTypes } from './../textures/Texture';
 import { DepthTexture } from './../textures/DepthTexture';
 import { EventDispatcher } from './../core/EventDispatcher';
 import { Wrapping, TextureFilter, TextureDataType, TextureEncoding } from '../constants';
@@ -25,7 +25,11 @@ export interface WebGLRenderTargetOptions {
     samples?: number;
 }
 
-export class WebGLRenderTarget extends EventDispatcher {
+export class WebGLRenderTarget<
+    ImageT extends TextureImageTypes = TextureImageTypes,
+    MipMapT extends MipMapType = MipMapType,
+    TextureT extends Texture<ImageT, MipMapT> = Texture<ImageT, MipMapT>,
+> extends EventDispatcher {
     constructor(width: number, height: number, options?: WebGLRenderTargetOptions);
 
     width: number;
@@ -38,7 +42,7 @@ export class WebGLRenderTarget extends EventDispatcher {
      */
     scissorTest: boolean;
     viewport: Vector4;
-    texture: Texture;
+    texture: TextureT;
 
     /**
      * @default true

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

@@ -1,7 +1,8 @@
 import { Texture } from './Texture';
 import { Mapping, Wrapping, TextureFilter, PixelFormat, TextureDataType } from '../constants';
+import { OffscreenCanvas } from '../renderers/WebGLRenderer';
 
-export class CanvasTexture extends Texture {
+export class CanvasTexture extends Texture<HTMLCanvasElement> {
     /**
      * @param canvas
      * @param [format=THREE.RGBAFormat]
@@ -15,7 +16,7 @@ export class CanvasTexture extends Texture {
      * @param [encoding=THREE.LinearEncoding]
      */
     constructor(
-        canvas: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap,
+        canvas: HTMLCanvasElement | OffscreenCanvas,
         mapping?: Mapping,
         wrapS?: Wrapping,
         wrapT?: Wrapping,

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

@@ -1,4 +1,4 @@
-import { Texture } from './Texture';
+import { Dimensions2D, Texture } from './Texture';
 import {
     Mapping,
     Wrapping,
@@ -8,7 +8,7 @@ import {
     TextureEncoding,
 } from '../constants';
 
-export class CompressedTexture extends Texture {
+export class CompressedTexture extends Texture<Dimensions2D> {
     /**
      * @param mipmaps
      * @param width
@@ -38,9 +38,6 @@ export class CompressedTexture extends Texture {
         encoding?: TextureEncoding,
     );
 
-    get image(): { width: number; height: number };
-    set image(value: { width: number; height: number });
-
     mipmaps: ImageData[];
 
     /**

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

@@ -1,7 +1,7 @@
-import { Texture } from './Texture';
+import { BaseTextureImageType, Texture } from './Texture';
 import { Mapping, Wrapping, TextureFilter, PixelFormat, TextureDataType, TextureEncoding } from '../constants';
 
-export class CubeTexture extends Texture {
+export class CubeTexture extends Texture<BaseTextureImageType[], CubeTexture> {
     /**
      * @param [images=[]]
      * @param [mapping=THREE.CubeReflectionMapping]
@@ -15,7 +15,7 @@ export class CubeTexture extends Texture {
      * @param [encoding=THREE.LinearEncoding]
      */
     constructor(
-        images?: any[], // HTMLImageElement or HTMLCanvasElement
+        images?: BaseTextureImageType[],
         mapping?: Mapping,
         wrapS?: Wrapping,
         wrapT?: Wrapping,

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

@@ -1,7 +1,7 @@
-import { Texture } from './Texture';
+import { DataDimensions3D, Texture } from './Texture';
 import { TextureFilter } from '../constants';
 
-export class Data3DTexture extends Texture {
+export class Data3DTexture extends Texture<DataDimensions3D, DataDimensions3D> {
     constructor(data: BufferSource, width: number, height: number, depth: number);
 
     /**

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

@@ -1,7 +1,7 @@
-import { Texture } from './Texture';
+import { DataDimensions3D, Texture } from './Texture';
 import { TextureFilter } from '../constants';
 
-export class DataArrayTexture extends Texture {
+export class DataArrayTexture extends Texture<DataDimensions3D, DataDimensions3D> {
     constructor(data?: BufferSource, width?: number, height?: number, depth?: number);
 
     /**

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

@@ -1,7 +1,7 @@
 import { Texture } from './Texture';
 import { Mapping, Wrapping, TextureFilter, PixelFormat, TextureDataType, TextureEncoding } from '../constants';
 
-export class DataTexture extends Texture {
+export class DataTexture extends Texture<ImageData> {
     /**
      * @param data
      * @param width

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

@@ -1,7 +1,7 @@
-import { Texture } from './Texture';
+import { Dimensions2D, Texture } from './Texture';
 import { Mapping, Wrapping, TextureFilter, TextureDataType } from '../constants';
 
-export class DepthTexture extends Texture {
+export class DepthTexture extends Texture<Dimensions2D> {
     /**
      * @param width
      * @param height
@@ -25,9 +25,6 @@ export class DepthTexture extends Texture {
         anisotropy?: number,
     );
 
-    get image(): { width: number; height: number };
-    set image(value: { width: number; height: number });
-
     /**
      * @default false
      */

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

@@ -1,7 +1,7 @@
-import { Texture } from './Texture';
+import { Dimensions2D, Texture } from './Texture';
 import { PixelFormat } from '../constants';
 
-export class FramebufferTexture extends Texture {
+export class FramebufferTexture extends Texture<Dimensions2D> {
     readonly isFramebufferTexture: true;
 
     constructor(width: number, height: number, format: PixelFormat);

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

@@ -11,8 +11,32 @@ import {
     TextureDataType,
     TextureEncoding,
 } from '../constants';
+import { CubeTexture } from './CubeTexture';
+import { OffscreenCanvas } from '../renderers/WebGLRenderer';
 
-export class Texture extends EventDispatcher {
+export interface Dimensions2D {
+    width: number;
+    height: number;
+}
+
+export interface DataDimensions3D extends ImageData {
+    depth: number;
+}
+
+export type BaseTextureImageType = TexImageSource | OffscreenCanvas | DataDimensions3D | Dimensions2D;
+
+export type TextureImageTypes = BaseTextureImageType | BaseTextureImageType[];
+
+export interface ManualMipMapType<ImageSource extends TexImageSource = TexImageSource> extends Dimensions2D {
+    data: ImageSource;
+}
+
+export type MipMapType = ImageData | ManualMipMapType | CubeTexture;
+
+export class Texture<
+    ImageT extends TextureImageTypes = TextureImageTypes,
+    MipMapT extends MipMapType = MipMapType,
+> extends EventDispatcher {
     /**
      * @param [image]
      * @param [mapping=THREE.Texture.DEFAULT_MAPPING]
@@ -26,7 +50,7 @@ export class Texture extends EventDispatcher {
      * @param [encoding=THREE.LinearEncoding]
      */
     constructor(
-        image?: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement,
+        image?: ImageT,
         mapping?: Mapping,
         wrapS?: Wrapping,
         wrapT?: Wrapping,
@@ -61,7 +85,7 @@ export class Texture extends EventDispatcher {
      * video element as a source for your texture image and continuously update this texture
      * as long as video is playing - the {@link VideoTexture} class handles this automatically.
      */
-    get image(): any;
+    get image(): ImageT;
 
     /**
      * An image object, typically created using the {@link TextureLoader.load} method.
@@ -71,12 +95,12 @@ export class Texture extends EventDispatcher {
      * video element as a source for your texture image and continuously update this texture
      * as long as video is playing - the {@link VideoTexture} class handles this automatically.
      */
-    set image(data: any);
+    set image(data: ImageT);
 
     /**
      * @default []
      */
-    mipmaps: any[]; // ImageData[] for 2D textures and CubeTexture[] for cube textures;
+    mipmaps: MipMapT[]; // ImageData[] for 2D textures and CubeTexture[] for cube textures;
 
     /**
      * @default THREE.Texture.DEFAULT_MAPPING

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

@@ -1,7 +1,7 @@
 import { Texture } from './Texture';
 import { Mapping, Wrapping, TextureFilter, PixelFormat, TextureDataType } from '../constants';
 
-export class VideoTexture extends Texture {
+export class VideoTexture extends Texture<HTMLVideoElement> {
     /**
      * @param video
      * @param [mapping=THREE.Texture.DEFAULT_MAPPING]

types/three/test/postprocessing/postprocessing-savepass.ts

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import { SavePass } from 'three/examples/jsm/postprocessing/SavePass';
 
 let pass = new SavePass(); // $ExpectType SavePass
-let rt = pass.renderTarget; // $ExpectType WebGLRenderTarget
+let rt = pass.renderTarget; // $ExpectType WebGLRenderTarget<TextureImageTypes, MipMapType, Texture<TextureImageTypes, MipMapType>>
 
 pass = new SavePass(new THREE.WebGLRenderTarget(128, 128)); // $ExpectType SavePass
-rt = pass.renderTarget; // $ExpectType WebGLRenderTarget
+rt = pass.renderTarget; // $ExpectType WebGLRenderTarget<TextureImageTypes, MipMapType, Texture<TextureImageTypes, MipMapType>>

types/three/test/textures/textures-source.ts

@@ -11,3 +11,57 @@ imageLoader.load('/path/to/image.png', image => {
     material.map.source = source;
     material.map.offset.x = 0.5;
 });
+
+function assertNever(_: never): void {
+    throw new Error('Assertion failed');
+}
+
+(function testTextureFromImage() {
+    const image = document.createElement('img');
+    const imageTex = new THREE.Texture(image);
+    const img = imageTex.image; // $ExpectType HTMLImageElement
+    if (!(img instanceof HTMLImageElement)) {
+        assertNever(img);
+    }
+})();
+
+(function testTextureFromCanvas() {
+    const canvas = document.createElement('canvas');
+    const canvasTex = new THREE.Texture(canvas);
+    const canv = canvasTex.image; // $ExpectType HTMLCanvasElement
+    if (!(canv instanceof HTMLCanvasElement)) {
+        assertNever(canv);
+    }
+})();
+
+(function testTextureFromVideo() {
+    const video = document.createElement('video');
+    const videoTex = new THREE.VideoTexture(video);
+    const vid = videoTex.image; // $ExpectType HTMLVideoElement
+    if (!(vid instanceof HTMLVideoElement)) {
+        assertNever(vid);
+    }
+})();
+
+(function testCanvasTexture() {
+    const canvas = makeCanvas();
+    const canvTex = new THREE.CanvasTexture(canvas);
+    const img = canvTex.image; // $ExpectType HTMLCanvasElement
+    if (!(img instanceof HTMLCanvasElement)) {
+        assertNever(img);
+    }
+})();
+
+function makeCanvas() {
+    const canvas = document.createElement('canvas');
+    canvas.width = 1024;
+    canvas.height = 1024;
+    const g = canvas.getContext('2d');
+    if (g) {
+        g.fillStyle = 'red';
+        g.fillRect(0, 0, 512, 512);
+        g.fillStyle = 'blue';
+        g.fillRect(512, 512, 512, 512);
+    }
+    return canvas;
+}