webgl-plot - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/WbglScatterAcc.d.ts

@@ -15,2 +15,4 @@ import { ColorRGBA } from "./ColorRGBA";
     private squareIndices;
+    private colorsBuffer;
+    private positionBuffer;
     constructor(canvas: HTMLCanvasElement, maxSquare: number);
@@ -21,5 +23,5 @@ setColor(color: ColorRGBA): void;
     setOffset(offsetX: number, offsetY: number): void;
-    addSquare(pos: Float32Array): void;
+    addSquare(pos: Float32Array, color: Uint8Array): void;
     update(): void;
 }
 //# sourceMappingURL=WbglScatterAcc.d.ts.map

dist/WbglScatterAcc.js

@@ -12,3 +12,3 @@ import { ColorRGBA } from "./ColorRGBA";
         //this.numPoints = numPoints;
-        this.gl = canvas.getContext("webgl2");
+        this.gl = canvas.getContext("webgl2", { premultipliedAlpha: false });
         this.color = new ColorRGBA(1, 1, 1, 1);
@@ -33,6 +33,14 @@ this.squareSize = 0.1;
         gl.enableVertexAttribArray(1);
+        // Create the color buffer
+        const colors = new Uint8Array(Array.from({ length: this.maxSquare * 3 }, (_, i) => 255));
+        this.colorsBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.colorsBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, colors, gl.DYNAMIC_DRAW);
+        gl.vertexAttribPointer(2, 3, gl.UNSIGNED_BYTE, false, 0, 0);
+        gl.vertexAttribDivisor(2, 1);
+        gl.enableVertexAttribArray(2);
         // Create the square positions buffer
-        const squarePositions = new Float32Array(Array.from({ length: this.maxSquare * 2 }, (_, i) => Math.random() * 2 - 1));
-        const positionBuffer = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+        const squarePositions = new Float32Array(Array.from({ length: this.maxSquare * 2 }, (_, i) => 0));
+        this.positionBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
         gl.bufferData(gl.ARRAY_BUFFER, squarePositions, gl.DYNAMIC_DRAW);
@@ -48,7 +56,11 @@ gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
     layout(location = 1) in float a_instanceID;
+    layout(location = 2) in vec3 sColor;
     uniform float u_size;
     uniform vec2 u_offset;
     uniform mat2 u_scale;
+
+    out vec3 vColor;
     
     void main() {
+      vColor = sColor / vec3(255.0, 255.0, 255.0);
       vec2 squareVertices[4] = vec2[4](vec2(-1.0, 1.0), vec2(1.0, 1.0), vec2(-1.0, -1.0), vec2(1.0, -1.0));
@@ -70,7 +82,8 @@ vec2 pos = u_size * squareVertices[gl_VertexID] + position + vec2(0,0) * a_instanceID;
 
-    uniform vec4 u_color;
+    //uniform vec4 u_color;
+    in vec3 vColor;
     out vec4 outColor;
 
     void main() {
-      outColor = u_color;
+      outColor = vec4(vColor, 0.7);
     }
@@ -91,9 +104,10 @@ `);
         // Set viewport and clear color
+        //gl.enable(gl.DEPTH_TEST);
         gl.viewport(0, 0, canvas.width, canvas.height);
         //https://learnopengl.com/Advanced-OpenGL/Blending
         gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        //gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_DST_ALPHA);
         gl.clearColor(0, 0, 0, 1);
-        gl.enable(gl.DEPTH_TEST);
-        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        gl.clear(gl.COLOR_BUFFER_BIT);
     }
@@ -118,4 +132,10 @@ setColor(color) {
     }
-    addSquare(pos) {
-        this.gl.bufferSubData(this.gl.ARRAY_BUFFER, this.headIndex * 2 * 4, pos);
+    addSquare(pos, color) {
+        const gl = this.gl;
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
+        gl.bufferSubData(this.gl.ARRAY_BUFFER, this.headIndex * 2 * 4, pos, 0, pos.length);
+        gl.enableVertexAttribArray(0);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.colorsBuffer);
+        gl.bufferSubData(this.gl.ARRAY_BUFFER, this.headIndex * 3 * 1, color, 0, color.length);
+        gl.enableVertexAttribArray(2);
         this.headIndex = (this.headIndex + pos.length / 2) % this.maxSquare;
@@ -125,3 +145,3 @@ //console.log(this.headIndex);
     update() {
-        this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+        this.gl.clear(this.gl.COLOR_BUFFER_BIT);
         this.gl.drawElementsInstanced(this.gl.TRIANGLES, this.squareIndices.length, this.gl.UNSIGNED_SHORT, 0, this.maxSquare);
@@ -128,0 +148,0 @@ }

dist/webglplot.esm.d.ts

@@ -329,2 +329,4 @@ declare class ColorRGBA {
     private squareIndices;
+    private colorsBuffer;
+    private positionBuffer;
     constructor(canvas: HTMLCanvasElement, maxSquare: number);
@@ -335,3 +337,3 @@ setColor(color: ColorRGBA): void;
     setOffset(offsetX: number, offsetY: number): void;
-    addSquare(pos: Float32Array): void;
+    addSquare(pos: Float32Array, color: Uint8Array): void;
     update(): void;
@@ -338,0 +340,0 @@ }

dist/webglplot.esm.js

@@ -583,3 +583,3 @@ class ColorRGBA {
         //this.numPoints = numPoints;
-        this.gl = canvas.getContext("webgl2");
+        this.gl = canvas.getContext("webgl2", { premultipliedAlpha: false });
         this.color = new ColorRGBA(1, 1, 1, 1);
@@ -604,6 +604,14 @@ this.squareSize = 0.1;
         gl.enableVertexAttribArray(1);
+        // Create the color buffer
+        const colors = new Uint8Array(Array.from({ length: this.maxSquare * 3 }, (_, i) => 255));
+        this.colorsBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.colorsBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, colors, gl.DYNAMIC_DRAW);
+        gl.vertexAttribPointer(2, 3, gl.UNSIGNED_BYTE, false, 0, 0);
+        gl.vertexAttribDivisor(2, 1);
+        gl.enableVertexAttribArray(2);
         // Create the square positions buffer
-        const squarePositions = new Float32Array(Array.from({ length: this.maxSquare * 2 }, (_, i) => Math.random() * 2 - 1));
-        const positionBuffer = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+        const squarePositions = new Float32Array(Array.from({ length: this.maxSquare * 2 }, (_, i) => 0));
+        this.positionBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
         gl.bufferData(gl.ARRAY_BUFFER, squarePositions, gl.DYNAMIC_DRAW);
@@ -619,7 +627,11 @@ gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
     layout(location = 1) in float a_instanceID;
+    layout(location = 2) in vec3 sColor;
     uniform float u_size;
     uniform vec2 u_offset;
     uniform mat2 u_scale;
+
+    out vec3 vColor;
     
     void main() {
+      vColor = sColor / vec3(255.0, 255.0, 255.0);
       vec2 squareVertices[4] = vec2[4](vec2(-1.0, 1.0), vec2(1.0, 1.0), vec2(-1.0, -1.0), vec2(1.0, -1.0));
@@ -641,7 +653,8 @@ vec2 pos = u_size * squareVertices[gl_VertexID] + position + vec2(0,0) * a_instanceID;
 
-    uniform vec4 u_color;
+    //uniform vec4 u_color;
+    in vec3 vColor;
     out vec4 outColor;
 
     void main() {
-      outColor = u_color;
+      outColor = vec4(vColor, 0.7);
     }
@@ -662,9 +675,10 @@ `);
         // Set viewport and clear color
+        //gl.enable(gl.DEPTH_TEST);
         gl.viewport(0, 0, canvas.width, canvas.height);
         //https://learnopengl.com/Advanced-OpenGL/Blending
         gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        //gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_DST_ALPHA);
         gl.clearColor(0, 0, 0, 1);
-        gl.enable(gl.DEPTH_TEST);
-        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        gl.clear(gl.COLOR_BUFFER_BIT);
     }
@@ -689,4 +703,10 @@ setColor(color) {
     }
-    addSquare(pos) {
-        this.gl.bufferSubData(this.gl.ARRAY_BUFFER, this.headIndex * 2 * 4, pos);
+    addSquare(pos, color) {
+        const gl = this.gl;
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
+        gl.bufferSubData(this.gl.ARRAY_BUFFER, this.headIndex * 2 * 4, pos, 0, pos.length);
+        gl.enableVertexAttribArray(0);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.colorsBuffer);
+        gl.bufferSubData(this.gl.ARRAY_BUFFER, this.headIndex * 3 * 1, color, 0, color.length);
+        gl.enableVertexAttribArray(2);
         this.headIndex = (this.headIndex + pos.length / 2) % this.maxSquare;
@@ -696,3 +716,3 @@ //console.log(this.headIndex);
     update() {
-        this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+        this.gl.clear(this.gl.COLOR_BUFFER_BIT);
         this.gl.drawElementsInstanced(this.gl.TRIANGLES, this.squareIndices.length, this.gl.UNSIGNED_SHORT, 0, this.maxSquare);
@@ -699,0 +719,0 @@ }

dist/webglplot.umd.js

@@ -589,3 +589,3 @@ (function (global, factory) {
             //this.numPoints = numPoints;
-            this.gl = canvas.getContext("webgl2");
+            this.gl = canvas.getContext("webgl2", { premultipliedAlpha: false });
             this.color = new ColorRGBA(1, 1, 1, 1);
@@ -610,6 +610,14 @@ this.squareSize = 0.1;
             gl.enableVertexAttribArray(1);
+            // Create the color buffer
+            const colors = new Uint8Array(Array.from({ length: this.maxSquare * 3 }, (_, i) => 255));
+            this.colorsBuffer = gl.createBuffer();
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.colorsBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, colors, gl.DYNAMIC_DRAW);
+            gl.vertexAttribPointer(2, 3, gl.UNSIGNED_BYTE, false, 0, 0);
+            gl.vertexAttribDivisor(2, 1);
+            gl.enableVertexAttribArray(2);
             // Create the square positions buffer
-            const squarePositions = new Float32Array(Array.from({ length: this.maxSquare * 2 }, (_, i) => Math.random() * 2 - 1));
-            const positionBuffer = gl.createBuffer();
-            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+            const squarePositions = new Float32Array(Array.from({ length: this.maxSquare * 2 }, (_, i) => 0));
+            this.positionBuffer = gl.createBuffer();
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
             gl.bufferData(gl.ARRAY_BUFFER, squarePositions, gl.DYNAMIC_DRAW);
@@ -625,7 +633,11 @@ gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
     layout(location = 1) in float a_instanceID;
+    layout(location = 2) in vec3 sColor;
     uniform float u_size;
     uniform vec2 u_offset;
     uniform mat2 u_scale;
+
+    out vec3 vColor;
     
     void main() {
+      vColor = sColor / vec3(255.0, 255.0, 255.0);
       vec2 squareVertices[4] = vec2[4](vec2(-1.0, 1.0), vec2(1.0, 1.0), vec2(-1.0, -1.0), vec2(1.0, -1.0));
@@ -647,7 +659,8 @@ vec2 pos = u_size * squareVertices[gl_VertexID] + position + vec2(0,0) * a_instanceID;
 
-    uniform vec4 u_color;
+    //uniform vec4 u_color;
+    in vec3 vColor;
     out vec4 outColor;
 
     void main() {
-      outColor = u_color;
+      outColor = vec4(vColor, 0.7);
     }
@@ -668,9 +681,10 @@ `);
             // Set viewport and clear color
+            //gl.enable(gl.DEPTH_TEST);
             gl.viewport(0, 0, canvas.width, canvas.height);
             //https://learnopengl.com/Advanced-OpenGL/Blending
             gl.enable(gl.BLEND);
-            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+            //gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_DST_ALPHA);
             gl.clearColor(0, 0, 0, 1);
-            gl.enable(gl.DEPTH_TEST);
-            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+            gl.clear(gl.COLOR_BUFFER_BIT);
         }
@@ -695,4 +709,10 @@ setColor(color) {
         }
-        addSquare(pos) {
-            this.gl.bufferSubData(this.gl.ARRAY_BUFFER, this.headIndex * 2 * 4, pos);
+        addSquare(pos, color) {
+            const gl = this.gl;
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
+            gl.bufferSubData(this.gl.ARRAY_BUFFER, this.headIndex * 2 * 4, pos, 0, pos.length);
+            gl.enableVertexAttribArray(0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.colorsBuffer);
+            gl.bufferSubData(this.gl.ARRAY_BUFFER, this.headIndex * 3 * 1, color, 0, color.length);
+            gl.enableVertexAttribArray(2);
             this.headIndex = (this.headIndex + pos.length / 2) % this.maxSquare;
@@ -702,3 +722,3 @@ //console.log(this.headIndex);
         update() {
-            this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+            this.gl.clear(this.gl.COLOR_BUFFER_BIT);
             this.gl.drawElementsInstanced(this.gl.TRIANGLES, this.squareIndices.length, this.gl.UNSIGNED_SHORT, 0, this.maxSquare);
@@ -705,0 +725,0 @@ }

package.json

 {
   "name": "webgl-plot",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "High-performance 2D plotting library based on native WebGL",
@@ -5,0 +5,0 @@ "main": "./dist/webglplot.umd.js",

src/WbglScatterAcc.ts

@@ -16,2 +16,4 @@ import { ColorRGBA } from "./ColorRGBA";
   private squareIndices = new Uint16Array([0, 1, 2, 2, 1, 3]);
+  private colorsBuffer: WebGLBuffer;
+  private positionBuffer: WebGLBuffer;
 
@@ -22,3 +24,3 @@ constructor(canvas: HTMLCanvasElement, maxSquare: number) {
     //this.numPoints = numPoints;
-    this.gl = canvas.getContext("webgl2") as WebGL2RenderingContext;
+    this.gl = canvas.getContext("webgl2", { premultipliedAlpha: false }) as WebGL2RenderingContext;
     this.color = new ColorRGBA(1, 1, 1, 1);
@@ -47,8 +49,17 @@ this.squareSize = 0.1;
 
+    // Create the color buffer
+    const colors = new Uint8Array(Array.from({ length: this.maxSquare * 3 }, (_, i) => 255));
+    this.colorsBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.colorsBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.DYNAMIC_DRAW);
+    gl.vertexAttribPointer(2, 3, gl.UNSIGNED_BYTE, false, 0, 0);
+    gl.vertexAttribDivisor(2, 1);
+    gl.enableVertexAttribArray(2);
+
     // Create the square positions buffer
     const squarePositions = new Float32Array(
-      Array.from({ length: this.maxSquare * 2 }, (_, i) => Math.random() * 2 - 1)
+      Array.from({ length: this.maxSquare * 2 }, (_, i) => 0)
     );
-    const positionBuffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    this.positionBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, squarePositions, gl.DYNAMIC_DRAW);
@@ -67,7 +78,11 @@ gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
     layout(location = 1) in float a_instanceID;
+    layout(location = 2) in vec3 sColor;
     uniform float u_size;
     uniform vec2 u_offset;
     uniform mat2 u_scale;
+
+    out vec3 vColor;
     
     void main() {
+      vColor = sColor / vec3(255.0, 255.0, 255.0);
       vec2 squareVertices[4] = vec2[4](vec2(-1.0, 1.0), vec2(1.0, 1.0), vec2(-1.0, -1.0), vec2(1.0, -1.0));
@@ -94,7 +109,8 @@ vec2 pos = u_size * squareVertices[gl_VertexID] + position + vec2(0,0) * a_instanceID;
 
-    uniform vec4 u_color;
+    //uniform vec4 u_color;
+    in vec3 vColor;
     out vec4 outColor;
 
     void main() {
-      outColor = u_color;
+      outColor = vec4(vColor, 0.7);
     }
@@ -119,9 +135,10 @@ `
     // Set viewport and clear color
+    //gl.enable(gl.DEPTH_TEST);
     gl.viewport(0, 0, canvas.width, canvas.height);
     //https://learnopengl.com/Advanced-OpenGL/Blending
     gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    //gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_DST_ALPHA);
     gl.clearColor(0, 0, 0, 1);
-    gl.enable(gl.DEPTH_TEST);
-    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    gl.clear(gl.COLOR_BUFFER_BIT);
   }
@@ -151,4 +168,12 @@
 
-  public addSquare(pos: Float32Array): void {
-    this.gl.bufferSubData(this.gl.ARRAY_BUFFER, this.headIndex * 2 * 4, pos);
+  public addSquare(pos: Float32Array, color: Uint8Array): void {
+    const gl = this.gl;
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
+    gl.bufferSubData(this.gl.ARRAY_BUFFER, this.headIndex * 2 * 4, pos, 0, pos.length);
+    gl.enableVertexAttribArray(0);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.colorsBuffer);
+    gl.bufferSubData(this.gl.ARRAY_BUFFER, this.headIndex * 3 * 1, color, 0, color.length);
+    gl.enableVertexAttribArray(2);
+
     this.headIndex = (this.headIndex + pos.length / 2) % this.maxSquare;
@@ -159,3 +184,3 @@ //console.log(this.headIndex);
   public update(): void {
-    this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
     this.gl.drawElementsInstanced(
@@ -162,0 +187,0 @@ this.gl.TRIANGLES,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

327817

increased by2.24%

Lines of code

8063

increased by1.51%

No dependency changes