@hscmap/gl-wrapper - npm Package Compare versions

Comparing version 0.0.0 to 0.1.0

example/main.ts

@@ -1,13 +0,15 @@
-import { canvasPool, Program, AttribList, Texture, utils } from '../src'
+import { canvasPool, Program, AttribList, Texture } from '../src'
 
 
-window.addEventListener('load', async e => {
+window.addEventListener('load', async () => {
     const { canvas, gl } = canvasPool.pull({ alpha: false })
-    const mp = document.querySelector('#mount-point')!.appendChild(canvas)
-    canvas.style.width = '100%'
-    canvas.style.height = '100%'
+    const mp = document.querySelector('#mount-point')!
+    mp.appendChild(canvas)
     resizeCanvasContext(canvas)
 
     const img = await loadImage(require<"file-loader">("file-loader!./texture/scene.jpg"))
-    draw(gl, img)
+
+    gl.clear(gl.COLOR_BUFFER_BIT)
+    drawRGBTriangle(gl)
+    drawTexture(gl, img)
 })
@@ -17,2 +19,4 @@
 function resizeCanvasContext(canvas: HTMLCanvasElement) {
+    canvas.style.width = '100%'
+    canvas.style.height = '100%'
     const gl = canvas.getContext('webgl')!
@@ -31,5 +35,3 @@ const r = devicePixelRatio
         const img = new Image()
-        img.onload = () => {
-            resolve(img)
-        }
+        img.onload = () => resolve(img)
         img.src = url
@@ -40,9 +42,2 @@ })
 
-function draw(gl: WebGLRenderingContext, img: HTMLImageElement) {
-    gl.clear(gl.COLOR_BUFFER_BIT)
-    drawRGBTriangle(gl)
-    drawTexture(gl, img)
-}
-
-
 function drawRGBTriangle(gl: WebGLRenderingContext) {
@@ -65,9 +60,8 @@ const program = Program.new(gl,
 
-    const start = performance.now()
-    attribList.enable(program, () => {
+    program.enableAttribList(attribList, () => {
         gl.drawArrays(gl.TRIANGLES, 0, attribList.vertexCount)
     })
 
+    attribList.release()
     program.release()
-    attribList.release()
 }
@@ -93,6 +87,6 @@
     texture.setImage(img)
+    program.uniform1i({ u_texture0: 0 })
 
-    program.uniform1i({ u_texture0: 0 })
-    attribList.enable(program, () => {
-        utils.bind([texture], () => {
+    program.enableAttribList(attribList, () => {
+        texture.bind(() => {
             gl.drawArrays(gl.TRIANGLE_STRIP, 0, attribList.vertexCount)
@@ -102,4 +96,5 @@ })
 
+    texture.release()
+    attribList.release()
     program.release()
-    attribList.release()
 }

example/tsconfig.json

 {
-    "extends": "../src/tsconfig"
+    "extends": "../src/tsconfig",
+    "compilerOptions": {
+        "noUnusedLocals": true
+    }
 }

lib/attrib_list.js

@@ -43,8 +43,8 @@ "use strict";
     AttribList.prototype.enable = function (program, f) {
-        program.use();
-        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.bufferName);
+        var gl = this.gl;
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.bufferName);
         for (var i in this.members) {
             var m = this.members[i];
-            this.gl.enableVertexAttribArray(program.attribLocation(m.name));
-            this.gl.vertexAttribPointer(program.attribLocation(m.name), m.nComponents, m.dataType, m.normalize, this.stride, this.offset[i]);
+            gl.enableVertexAttribArray(program.attribLocation(m.name));
+            gl.vertexAttribPointer(program.attribLocation(m.name), m.nComponents, m.dataType, m.normalize, this.stride, this.offset[i]);
         }
@@ -54,5 +54,5 @@ f();
             var m = _a[_i];
-            this.gl.disableVertexAttribArray(program.attribLocation(m.name));
+            gl.disableVertexAttribArray(program.attribLocation(m.name));
         }
-        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
     };
@@ -59,0 +59,0 @@ return AttribList;

lib/index_buffer.d.ts

@@ -1,2 +0,1 @@
-import * as glUtils from './utils';
 export interface DataOption {
@@ -6,3 +5,3 @@ usage?: number;
 }
-export declare class IndexBuffer implements glUtils.Bindable {
+export declare class IndexBuffer {
     private gl;
@@ -14,5 +13,4 @@ private name;
     release(): void;
-    bind(): void;
-    unbind(): void;
+    bind(cb: () => void): void;
     setData({usage, array}: DataOption): void;
 }

lib/index_buffer.js

@@ -14,6 +14,5 @@ "use strict";
     };
-    IndexBuffer.prototype.bind = function () {
+    IndexBuffer.prototype.bind = function (cb) {
         this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.name);
-    };
-    IndexBuffer.prototype.unbind = function () {
+        cb();
         this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, null);
@@ -20,0 +19,0 @@ };

lib/program.d.ts

@@ -1,4 +0,2 @@
-/// <reference types="gl-matrix" />
 import { AttribList } from './attrib_list';
-import { mat4 } from 'gl-matrix';
 export declare class Program {
@@ -22,7 +20,5 @@ private gl;
     uniformLocation(varName: string): WebGLUniformLocation;
-    enableAttribList(attribList: AttribList, callback: {
-        (): void;
-    }): void;
+    enableAttribList(attribList: AttribList, cb: () => void): void;
     uniformMatrix4fv(matrices: {
-        [name: string]: mat4;
+        [name: string]: Float32Array;
     }, transpose?: boolean): void;
@@ -29,0 +25,0 @@ uniform1f(vars: {

lib/program.js

@@ -67,4 +67,5 @@ "use strict";
     };
-    Program.prototype.enableAttribList = function (attribList, callback) {
-        attribList.enable(this, callback);
+    Program.prototype.enableAttribList = function (attribList, cb) {
+        this.use();
+        attribList.enable(this, cb);
     };
@@ -71,0 +72,0 @@ Program.prototype.uniformMatrix4fv = function (matrices, transpose) {

lib/texture.d.ts

@@ -1,4 +0,3 @@
-import * as glUtils from './utils';
 export declare type ImageLike = HTMLImageElement | HTMLCanvasElement | ImageData;
-export declare class Texture implements glUtils.Bindable {
+export declare class Texture {
     private gl;
@@ -8,5 +7,4 @@ private name;
     release(): void;
-    bind(): void;
-    unbind(): void;
+    bind(cb: () => void): void;
     setImage(img: ImageLike): void;
 }

lib/texture.js

@@ -9,3 +9,3 @@ "use strict";
         this.name = glUtils.nonNull(gl.createTexture());
-        glUtils.bind([this], function () {
+        this.bind(function () {
             gl.texParameteri(_this.gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
@@ -20,6 +20,5 @@ gl.texParameteri(_this.gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
     };
-    Texture.prototype.bind = function () {
+    Texture.prototype.bind = function (cb) {
         this.gl.bindTexture(this.gl.TEXTURE_2D, this.name);
-    };
-    Texture.prototype.unbind = function () {
+        cb();
         this.gl.bindTexture(this.gl.TEXTURE_2D, null);
@@ -29,3 +28,3 @@ };
         var _this = this;
-        glUtils.bind([this], function () {
+        this.bind(function () {
             _this.gl.texImage2D(_this.gl.TEXTURE_2D, 0, _this.gl.RGBA, _this.gl.RGBA, _this.gl.UNSIGNED_BYTE, img);
@@ -32,0 +31,0 @@ });

lib/utils.d.ts

 export declare function enable(gl: WebGLRenderingContext, fs: number[], callback: () => void): void;
-export declare function bind(bs: Bindable[], callback: () => void): void;
 export declare function addLineNumber(body: string): string;
 export declare function nonNull<T1, T2>(v: T1): T2;
-export interface Bindable {
-    bind(): void;
-    unbind(): void;
-}

lib/utils.js

@@ -16,14 +16,2 @@ "use strict";
 exports.enable = enable;
-function bind(bs, callback) {
-    for (var _i = 0, bs_1 = bs; _i < bs_1.length; _i++) {
-        var b = bs_1[_i];
-        b.bind();
-    }
-    callback();
-    for (var _a = 0, bs_2 = bs; _a < bs_2.length; _a++) {
-        var b = bs_2[_a];
-        b.unbind();
-    }
-}
-exports.bind = bind;
 function addLineNumber(body) {
@@ -30,0 +18,0 @@ return body.split("\n")

package.json

 {
   "name": "@hscmap/gl-wrapper",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "main": "./lib/index.js",
@@ -8,3 +8,3 @@ "types": "./lib/index.d.ts",
     "prepublish": "tsc",
-    "example": "webpack --context example --config ./example/webpack.config.js"
+    "example": "webpack-dev-server --context example --config ./example/webpack.config.js"
   },
@@ -11,0 +11,0 @@ "devDependencies": {

src/attrib_list.ts

@@ -59,14 +59,14 @@ import { Program } from './program'
     enable(program: Program, f: () => void) {
-        program.use()
-        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.bufferName)
+        const gl = this.gl
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.bufferName)
         for (let i in this.members) {
             let m = this.members[i]
-            this.gl.enableVertexAttribArray(program.attribLocation(m.name))
-            this.gl.vertexAttribPointer(program.attribLocation(m.name), m.nComponents, m.dataType!, m.normalize!, this.stride, this.offset[i])
+            gl.enableVertexAttribArray(program.attribLocation(m.name))
+            gl.vertexAttribPointer(program.attribLocation(m.name), m.nComponents, m.dataType!, m.normalize!, this.stride, this.offset[i])
         }
         f()
         for (let m of this.members) {
-            this.gl.disableVertexAttribArray(program.attribLocation(m.name))
+            gl.disableVertexAttribArray(program.attribLocation(m.name))
         }
-        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null)
+        gl.bindBuffer(gl.ARRAY_BUFFER, null)
     }
@@ -73,0 +73,0 @@

src/index_buffer.ts

@@ -8,3 +8,3 @@ import * as glUtils from './utils'
 
-export class IndexBuffer implements glUtils.Bindable {
+export class IndexBuffer {
     private name: WebGLBuffer
@@ -24,7 +24,5 @@ private usage: number
 
-    bind() {
+    bind(cb:()=>void) {
         this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.name)
-    }
-
-    unbind() {
+        cb()
         this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, null)
@@ -31,0 +29,0 @@ }

src/program.ts

 import { AttribList } from './attrib_list'
-import { mat4 } from 'gl-matrix'
 import * as glUtils from './utils'
@@ -79,7 +78,8 @@ import { TupleMap } from "@hscmap/tuple-map"
 
-    enableAttribList(attribList: AttribList, callback: { (): void }) {
-        attribList.enable(this, callback)
+    enableAttribList(attribList: AttribList, cb: () => void) {
+        this.use()
+        attribList.enable(this, cb)
     }
-
-    uniformMatrix4fv(matrices: { [name: string]: mat4; }, transpose: boolean = false) {
+    
+    uniformMatrix4fv(matrices: { [name: string]: Float32Array }, transpose: boolean = false) {
         for (let name in matrices) {
@@ -91,3 +91,3 @@ let matrix = matrices[name]
 
-    uniform1f(vars: { [name: string]: number; }) {
+    uniform1f(vars: { [name: string]: number }) {
         for (let name in vars) {
@@ -98,3 +98,3 @@ this.gl.uniform1f(this.uniformLocation(name), vars[name])
 
-    uniform1i(vars: { [name: string]: number; }) {
+    uniform1i(vars: { [name: string]: number }) {
         for (let name in vars) {
@@ -105,3 +105,3 @@ this.gl.uniform1i(this.uniformLocation(name), vars[name])
 
-    uniform3fv(vars: { [name: string]: number[]; }) {
+    uniform3fv(vars: { [name: string]: number[] }) {
         for (let name in vars) {
@@ -112,3 +112,3 @@ this.gl.uniform3fv(this.uniformLocation(name), vars[name])
 
-    uniform4fv(vars: { [name: string]: number[]; }) {
+    uniform4fv(vars: { [name: string]: number[] }) {
         for (let name in vars) {
@@ -115,0 +115,0 @@ this.gl.uniform4fv(this.uniformLocation(name), vars[name])

src/texture.ts

@@ -5,3 +5,3 @@ import * as glUtils from './utils'
 
-export class Texture implements glUtils.Bindable {
+export class Texture {
     private name: WebGLTexture
@@ -11,3 +11,3 @@
         this.name = glUtils.nonNull(gl.createTexture())
-        glUtils.bind([this], () => {
+        this.bind(() => {
             gl.texParameteri(this.gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
@@ -24,12 +24,11 @@ gl.texParameteri(this.gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
 
-    bind() {
+    bind(cb: () => void) {
         this.gl.bindTexture(this.gl.TEXTURE_2D, this.name)
-    }
+        cb()
+        this.gl.bindTexture(this.gl.TEXTURE_2D, null)
 
-    unbind() {
-        this.gl.bindTexture(this.gl.TEXTURE_2D, null)
     }
 
     setImage(img: ImageLike) {
-        glUtils.bind([this], () => {
+        this.bind(() => {
             this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, img)
@@ -36,0 +35,0 @@ })

src/utils.ts

@@ -13,11 +13,2 @@ import { sprintf } from 'sprintf-js'
 
-export function bind(bs: Bindable[], callback: () => void) {
-    for (let b of bs)
-        b.bind()
-    callback()
-    for (let b of bs)
-        b.unbind()
-}
-
-
 export function addLineNumber(body: string) {
@@ -34,8 +25,2 @@ return body.split("\n")
     return v as any as T2
-}
-
-
-export interface Bindable {
-    bind(): void
-    unbind(): void
 }

Fixed alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

57467

increased by3.51%

Number of medium quality alerts

1

decreased by-50%

Number of lines in readme file

119

increased byInfinity%

Worsened metrics

Lines of code

880

decreased by-4.35%

No dependency changes