feat: Add ShaderMaterial uniforms typing and autocompletion (+ ShaderPass)

.all-contributorsrc

@@ -286,6 +286,15 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "Lutymane",
+      "name": "Lutymane",
+      "avatar_url": "https://avatars.githubusercontent.com/u/22231294?v=4",
+      "profile": "https://zeokku.com/",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "skipCi": true,

README.md

@@ -64,6 +64,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
   </tr>
   <tr>
     <td align="center"><a href="https://xk.io/"><img src="https://avatars.githubusercontent.com/u/1046448?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Max Kaye</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=XertroV" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://zeokku.com/"><img src="https://avatars.githubusercontent.com/u/22231294?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Lutymane</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=Lutymane" title="Code">💻</a></td>
   </tr>
 </table>
 

types/three/examples/jsm/postprocessing/ShaderPass.d.ts

@@ -1,11 +1,23 @@
-import { ShaderMaterial } from '../../../src/Three';
+import {
+    AvoidNullUniforms,
+    ExtractUniforms,
+    ShaderMaterial,
+    ShaderMaterialParameters,
+    TUniforms,
+} from '../../../src/Three';
 
-import { Pass } from './Pass';
+import { FullScreenQuad, Pass } from './Pass';
 
-export class ShaderPass extends Pass {
-    constructor(shader: object, textureID?: string);
+export type ShaderLike<Uniforms extends TUniforms> = {
+    fragmentShader: ShaderMaterial['fragmentShader'];
+    vertexShader?: ShaderMaterial['vertexShader'];
+    defines?: ShaderMaterial['defines'];
+} & (Exclude<keyof Uniforms, string> extends never ? { uniforms: Uniforms } : { uniforms?: Uniforms });
+
+export class ShaderPass<T extends {} = TUniforms, Uniforms extends TUniforms = ExtractUniforms<T>> extends Pass {
+    constructor(shader: ShaderLike<Uniforms>, textureID?: string);
     textureID: string;
-    uniforms: { [name: string]: { value: any } };
-    material: ShaderMaterial;
-    fsQuad: object;
+    uniforms: AvoidNullUniforms<Uniforms>;
+    material: ShaderMaterial<Uniforms>;
+    fsQuad: FullScreenQuad;
 }

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

@@ -1,5 +1,13 @@
-import { ShaderMaterialParameters, ShaderMaterial } from './ShaderMaterial';
+import { ShaderMaterialParameters, ShaderMaterial, TUniforms, ExtractUniforms } from './ShaderMaterial';
 
-export class RawShaderMaterial extends ShaderMaterial {
-    constructor(parameters?: ShaderMaterialParameters);
+export type RawShaderMaterialParameters<Uniforms extends TUniforms> = ShaderMaterialParameters<Uniforms> & {
+    vertexShader: string;
+    fragmentShader: string;
+};
+
+export class RawShaderMaterial<
+    T extends {} = TUniforms,
+    Uniforms extends TUniforms = ExtractUniforms<T>,
+> extends ShaderMaterial<T, Uniforms> {
+    constructor(parameters?: RawShaderMaterialParameters<Uniforms>);
 }

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

@@ -2,29 +2,56 @@ import { IUniform } from '../renderers/shaders/UniformsLib';
 import { MaterialParameters, Material } from './Material';
 import { GLSLVersion } from '../constants';
 
-export interface ShaderMaterialParameters extends MaterialParameters {
-    uniforms?: { [uniform: string]: IUniform } | undefined;
-    vertexShader?: string | undefined;
-    fragmentShader?: string | undefined;
-    linewidth?: number | undefined;
-    wireframe?: boolean | undefined;
-    wireframeLinewidth?: number | undefined;
-    lights?: boolean | undefined;
-    clipping?: boolean | undefined;
-
-    extensions?:
-        | {
-              derivatives?: boolean | undefined;
-              fragDepth?: boolean | undefined;
-              drawBuffers?: boolean | undefined;
-              shaderTextureLOD?: boolean | undefined;
-          }
-        | undefined;
-    glslVersion?: GLSLVersion | undefined;
+export interface TUniforms {
+    [uniform: string]: IUniform;
 }
 
-export class ShaderMaterial extends Material {
-    constructor(parameters?: ShaderMaterialParameters);
+// transform { uniform1: type1, uniform2: type2 } to { uniform1: { value: type1 }, ...}
+export type WrapUniforms<T extends { [uniform: string]: any }> = {
+    [U in keyof T]: T[U] extends IUniform ? T[U] : IUniform<T[U]>;
+};
+
+// replace null types by any (typically used by textures)
+export type AvoidNullUniforms<T extends TUniforms> = {
+    [U in keyof T]: IUniform<T[U]['value'] extends null ? any : T[U]['value']>;
+};
+
+export type ExtractUniforms<T> = AvoidNullUniforms<
+    WrapUniforms<T extends ShaderMaterialParametersLike<infer U> ? U : T>
+>;
+
+export interface ShaderMaterialParametersLike<Uniforms extends TUniforms> {
+    uniforms: Uniforms;
+}
+
+export type ShaderMaterialParameters<Uniforms extends TUniforms> = MaterialParameters &
+    // if we have uniforms type defined in var declaration then this paramater is required
+    // keyof { [string] } will result in string | number, since uniform names can't be numbers we can safely determine the type
+    // check for extends never instead of extends number because never always extends everything
+    // uniforms: Type | undefined !== uniforms?: Type
+    (Exclude<keyof Uniforms, string> extends never ? { uniforms: Uniforms } : { uniforms?: Uniforms }) & {
+        vertexShader?: string;
+        fragmentShader?: string;
+        linewidth?: number;
+        wireframe?: boolean;
+        wireframeLinewidth?: number;
+        lights?: boolean;
+        clipping?: boolean;
+
+        extensions?: {
+            derivatives?: boolean;
+            fragDepth?: boolean;
+            drawBuffers?: boolean;
+            shaderTextureLOD?: boolean;
+        };
+        glslVersion?: GLSLVersion;
+    };
+
+export class ShaderMaterial<
+    T extends {} = TUniforms,
+    Uniforms extends TUniforms = ExtractUniforms<T>,
+> extends Material {
+    constructor(parameters?: ShaderMaterialParameters<Uniforms>);
 
     /**
      * @default 'ShaderMaterial'
@@ -39,7 +66,10 @@ export class ShaderMaterial extends Material {
     /**
      * @default {}
      */
-    uniforms: { [uniform: string]: IUniform };
+    uniforms: AvoidNullUniforms<Uniforms>;
+    // uniforms: Exclude<keyof Uniforms, string> extends never
+    //     ? AvoidNullUniforms<Uniforms>
+    //     : Partial<AvoidNullUniforms<Uniforms>>;
     vertexShader: string;
     fragmentShader: string;
 
@@ -96,7 +126,7 @@ export class ShaderMaterial extends Material {
     /**
      * @default undefined
      */
-    index0AttributeName: string | undefined;
+    index0AttributeName?: string;
 
     /**
      * @default false
@@ -110,6 +140,6 @@ export class ShaderMaterial extends Material {
 
     isShaderMaterial: boolean;
 
-    setValues(parameters: ShaderMaterialParameters): void;
+    setValues(parameters: ShaderMaterialParameters<Uniforms>): void;
     toJSON(meta: any): any;
 }