refactor(webgl): add/rename types, add/move checks, update deps

packages/webgl-shadertoy/package.json

@@ -25,11 +25,11 @@
     },
     "devDependencies": {
         "@types/mocha": "^5.2.6",
-        "@types/node": "^12.0.8",
+        "@types/node": "^12.6.3",
         "mocha": "^6.1.4",
         "nyc": "^14.0.0",
         "typedoc": "^0.14.2",
-        "typescript": "^3.5.2"
+        "typescript": "^3.5.3"
     },
     "dependencies": {
         "@thi.ng/shader-ast": "^0.2.0",

packages/webgl/src/api/ext.ts

@@ -34,3 +34,11 @@ export interface WebGLExtensionMap {
     OES_element_index_uint: OES_element_index_uint;
     ANGLE_instanced_arrays: ANGLE_instanced_arrays;
 }
+
+export type ExtensionName = keyof WebGLExtensionMap;
+
+export type ExtensionBehavior = "require" | "warn" | boolean;
+
+export type ExtensionBehaviors = Partial<
+    Record<keyof WebGLExtensionMap, ExtensionBehavior>
+>;

packages/webgl/src/api/glsl.ts

@@ -58,5 +58,3 @@ export type GLSLArrayType =
     | "sampler2D[]"
     | "sampler3D[]"
     | "samplerCube[]";
-
-export type GLSLExtensionBehavior = "require" | "warn" | boolean;

packages/webgl/src/api/shader.ts

@@ -13,6 +13,7 @@ import { Func, Sym } from "@thi.ng/shader-ast";
 import { GLSLTarget } from "@thi.ng/shader-ast-glsl";
 import { ReadonlyVec } from "@thi.ng/vectors";
 import { BlendEquation, BlendFunc } from "./blend";
+import { ExtensionBehaviors } from "./ext";
 import {
     GLIntVec,
     GLIntVec2,
@@ -23,7 +24,6 @@ import {
     GLMat4,
     GLSL,
     GLSLArrayType,
-    GLSLExtensionBehavior,
     GLSLScalarType,
     GLUintVec,
     GLVec,
@@ -236,7 +236,7 @@ export interface ShaderSpec {
      * behavior. Boolean values will be translated in "enable" /
      * "disable".
      */
-    ext?: IObjectOf<GLSLExtensionBehavior>;
+    ext?: ExtensionBehaviors;
 }
 
 export interface ShaderState {

packages/webgl/src/api/texture.ts

@@ -617,4 +617,8 @@ export interface ITexture
         IConfigure<Partial<TextureOpts>>,
         IRelease {
     tex: WebGLTexture;
+    target: TextureTarget;
+    format: TextureFormat;
+    type: TextureType;
+    size: number[];
 }

packages/webgl/src/buffer.ts

@@ -2,8 +2,8 @@ import { TypedArray } from "@thi.ng/api";
 import { AttribPool } from "@thi.ng/vector-pools";
 import { IndexBufferSpec, IWebGLBuffer } from "./api/buffers";
 import { ModelAttributeSpecs, ModelSpec } from "./api/model";
+import { isGL2Context } from "./checks";
 import { error } from "./error";
-import { isGL2Context } from "./utils";
 
 export class WebGLArrayBuffer<T extends TypedArray> implements IWebGLBuffer<T> {
     gl: WebGLRenderingContext;

packages/webgl/src/checks.ts

@@ -0,0 +1,13 @@
+import { ITexture, TextureType } from "./api/texture";
+
+export const isGL2Context = (
+    gl: WebGLRenderingContext
+): gl is WebGL2RenderingContext =>
+    typeof WebGL2RenderingContext !== "undefined" &&
+    gl instanceof WebGL2RenderingContext;
+
+export const isFloatTexture = (tex: ITexture) =>
+    tex.type === TextureType.FLOAT ||
+    tex.type === TextureType.HALF_FLOAT ||
+    tex.type === TextureType.HALF_FLOAT_OES ||
+    tex.type === TextureType.FLOAT_32_UNSIGNED_INT_24_8_REV;

packages/webgl/src/draw.ts

@@ -1,8 +1,8 @@
 import { isArray } from "@thi.ng/checks";
 import { ModelSpec } from "./api/model";
+import { isGL2Context } from "./checks";
 import { error } from "./error";
 import { bindTextures } from "./texture";
-import { isGL2Context } from "./utils";
 
 export const draw = (specs: ModelSpec | ModelSpec[]) => {
     const _specs = isArray(specs) ? specs : [specs];

packages/webgl/src/fbo.ts

@@ -1,9 +1,9 @@
 import { assert } from "@thi.ng/api";
 import { FboOpts, IFbo } from "./api/buffers";
 import { ITexture } from "./api/texture";
+import { isGL2Context } from "./checks";
 import { error } from "./error";
 import { RBO } from "./rbo";
-import { isGL2Context } from "./utils";
 
 const GL_COLOR_ATTACHMENT0_WEBGL = 0x8ce0;
 const GL_MAX_COLOR_ATTACHMENTS_WEBGL = 0x8cdf;

packages/webgl/src/gpgpu.ts

@@ -20,13 +20,13 @@ import { ShaderSpec } from "./api/shader";
 import { ITexture, TextureFormat } from "./api/texture";
 import { compileModel } from "./buffer";
 import { getExtensions, glCanvas } from "./canvas";
+import { isGL2Context } from "./checks";
 import { draw } from "./draw";
 import { FBO } from "./fbo";
 import { quad } from "./geo/quad";
-import { FX_SHADER_SPEC } from "./pipeline";
+import { FX_SHADER_SPEC_UV } from "./pipeline";
 import { shader } from "./shader";
 import { floatTexture, texture } from "./texture";
-import { isGL2Context } from "./utils";
 
 export const gpgpu = (opts: GPGPUOpts) => new GPGPU(opts);
 
@@ -249,7 +249,7 @@ export class GPGPUJob implements IRelease {
         let shaderSpec: ShaderSpec;
         if (opts.src) {
             shaderSpec = {
-                ...FX_SHADER_SPEC,
+                ...FX_SHADER_SPEC_UV,
                 pre: `#define WIDTH (${ctx.width})\n#define SIZE (ivec2(${
                     ctx.width
                 }))`,

packages/webgl/src/index.ts

@@ -11,6 +11,7 @@ export * from "./api/texture";
 
 export * from "./buffer";
 export * from "./canvas";
+export * from "./checks";
 export * from "./draw";
 export * from "./error";
 export * from "./fbo";

packages/webgl/src/pipeline.ts

@@ -1,69 +1,50 @@
-import { IObjectOf } from "@thi.ng/api";
 import {
+    $xy,
     assign,
     defMain,
     FLOAT0,
     FLOAT1,
     texture,
     vec4
 } from "@thi.ng/shader-ast";
-import { ShaderFn, ShaderSpec, ShaderUniformSpecs } from "./api/shader";
-import { TextureOpts } from "./api/texture";
+import { ShaderFn, ShaderSpec } from "./api/shader";
 import { texture as _texture } from "./texture";
 
-export const PASSTHROUGH_VS: ShaderFn = (gl, _, ins, outs) => [
+export const PASSTHROUGH_VS: ShaderFn = (gl, _, ins) => [
+    defMain(() => [assign(gl.gl_Position, vec4(ins.position, FLOAT0, FLOAT1))])
+];
+
+export const PASSTHROUGH_VS_UV: ShaderFn = (gl, _, ins, outs) => [
     defMain(() => [
         assign(outs.v_uv, ins.uv),
         assign(gl.gl_Position, vec4(ins.position, FLOAT0, FLOAT1))
     ])
 ];
 
-export const PASSTHROUGH_FS: ShaderFn = (_, unis, ins, outs) => [
+export const PASSTHROUGH_FS: ShaderFn = (gl, _, __, outs) => [
+    defMain(() => [assign(outs.fragColor, $xy(gl.gl_FragCoord))])
+];
+
+export const PASSTHROUGH_FS_UV: ShaderFn = (_, unis, ins, outs) => [
     defMain(() => [assign(outs.fragColor, texture(unis.tex, ins.v_uv))])
 ];
 
 export const FX_SHADER_SPEC: ShaderSpec = {
     vs: PASSTHROUGH_VS,
     fs: PASSTHROUGH_FS,
+    attribs: { position: "vec2" },
+    varying: {},
+    uniforms: {},
+    state: { depth: false },
+    ext: {}
+};
+
+export const FX_SHADER_SPEC_UV: ShaderSpec = {
+    vs: PASSTHROUGH_VS_UV,
+    fs: PASSTHROUGH_FS_UV,
     attribs: { position: "vec2", uv: "vec2" },
     varying: { v_uv: "vec2" },
     uniforms: { tex: "sampler2D" },
     state: { depth: false },
     ext: {}
 };
-
-export type GPGPUSize = number | [number, number];
-export interface ShaderPipelineOpts {
-    size: GPGPUSize;
-    gl: WebGLRenderingContext | WebGL2RenderingContext;
-    // canvas?: HTMLCanvasElement;
-    version?: 1 | 2;
-    textures: IObjectOf<TextureOpts>;
-    passes: ShaderPass;
-}
-
-export interface ShaderPass {
-    inputs: string[];
-    outputs: string[];
-    size?: [number, number];
-    uniforms?: ShaderUniformSpecs;
-    fn: ShaderFn;
-}
-
-// export const shaderPipeline = (opts: ShaderPipelineOpts) => {
-//     let width: number, height: number;
-//     const gl = opts.gl;
-//     if (isNumber(opts.size)) {
-//         width = height = ceilPow2(Math.ceil(Math.sqrt(opts.size / 4)));
-//     } else {
-//         [width, height] = opts.size;
-//     }
-//     const textures = Object.keys(opts.textures).reduce((acc, id) => {
-//         const tex = opts.textures[id];
-//         const format = TEX_FORMATS[tex.format];
-//         acc[id] = _texture(gl, {
-//             width,
-//             height
-//         });
-//     }, {});
-// };

packages/webgl/src/shader.ts

@@ -17,8 +17,13 @@ import {
 } from "@thi.ng/shader-ast";
 import { GLSLVersion, targetGLSL } from "@thi.ng/shader-ast-glsl";
 import { vals } from "@thi.ng/transducers";
-import { GL_EXT_INFO } from "./api/ext";
-import { GLSL, GLSLExtensionBehavior } from "./api/glsl";
+import {
+    ExtensionBehavior,
+    ExtensionBehaviors,
+    ExtensionName,
+    GL_EXT_INFO
+} from "./api/ext";
+import { GLSL } from "./api/glsl";
 import { ModelAttributeSpecs, ModelSpec } from "./api/model";
 import {
     DEFAULT_OUTPUT,
@@ -37,10 +42,10 @@ import {
     UniformValues
 } from "./api/shader";
 import { getExtensions } from "./canvas";
+import { isGL2Context } from "./checks";
 import { error } from "./error";
 import { GLSL_HEADER, NO_PREFIXES, SYNTAX } from "./syntax";
 import { UNIFORM_SETTERS } from "./uniforms";
-import { isGL2Context } from "./utils";
 
 const ERROR_REGEXP = /ERROR: \d+:(\d+): (.*)/;
 
@@ -231,7 +236,7 @@ const compileVars = (
 
 const compileExtensionPragma = (
     id: string,
-    behavior: GLSLExtensionBehavior,
+    behavior: ExtensionBehavior,
     version: GLSLVersion
 ) => {
     const ext = (<any>GL_EXT_INFO)[id];
@@ -245,11 +250,11 @@ const compileExtensionPragma = (
 
 const initShaderExtensions = (
     gl: WebGLRenderingContext,
-    exts: IObjectOf<GLSLExtensionBehavior> | undefined
+    exts: ExtensionBehaviors | undefined
 ) => {
     if (exts) {
         for (let id in exts) {
-            const state = exts[id];
+            const state = exts[<ExtensionName>id];
             if (state === true || state === "require") {
                 getExtensions(gl, <any>[id], state === "require");
             }
@@ -270,7 +275,11 @@ export const shaderSourceFromAST = (
         : GLSL_HEADER;
     if (spec.ext) {
         for (let id in spec.ext) {
-            prelude += compileExtensionPragma(id, spec.ext[id], version);
+            prelude += compileExtensionPragma(
+                id,
+                spec.ext[<ExtensionName>id]!,
+                version
+            );
         }
     }
     const inputs: IObjectOf<Sym<any>> = {};
@@ -368,7 +377,11 @@ export const prepareShaderSource = (
         : GLSL_HEADER;
     if (spec.ext) {
         for (let id in spec.ext) {
-            src += compileExtensionPragma(id, spec.ext[id], version);
+            src += compileExtensionPragma(
+                id,
+                spec.ext[<ExtensionName>id]!,
+                version
+            );
         }
     }
     if (spec.generateDecls !== false) {

packages/webgl/src/texture.ts

@@ -8,8 +8,8 @@ import {
     TextureTarget,
     TextureType
 } from "./api/texture";
+import { isGL2Context } from "./checks";
 import { error } from "./error";
-import { isGL2Context } from "./utils";
 
 export const bindTextures = (textures: ITexture[]) => {
     if (!textures) return;

packages/webgl/src/utils.ts

@@ -7,12 +7,6 @@ import {
 } from "@thi.ng/shader-ast";
 import { ShaderOpts } from "./api/shader";
 
-export const isGL2Context = (
-    gl: WebGLRenderingContext
-): gl is WebGL2RenderingContext =>
-    typeof WebGL2RenderingContext !== "undefined" &&
-    gl instanceof WebGL2RenderingContext;
-
 export const positionAttrib = (
     opts: Partial<ShaderOpts<any>>,
     attribs: IObjectOf<Sym<any>>,