fix: glUniformMatrix4fv

node/binding/Canvas.cc

@@ -103,6 +103,7 @@ namespace NodeBinding
             ContextWebGL *ctx = Napi::ObjectWrap<ContextWebGL>::Unwrap(obj);
             ctx->setRenderContext(this->mRenderContext);
             this->mRenderContext->setType(type);
+            obj.Set("canvas",  this->Value());
             return obj;
         }
         else

node/binding/CanvasRenderingContextWebGL.cc

@@ -515,7 +515,6 @@ namespace NodeBinding
                             InstanceAccessor("drawBufferHeight", &ContextWebGL::getDrawingBufferHeight, nullptr),
                             InstanceAccessor("UNPACK_FLIP_Y_WEBGL", &ContextWebGL::getUNPACK_FLIP_Y_WEBGL, nullptr),
                             InstanceAccessor("UNPACK_PREMULTIPLY_ALPHA_WEBGL", &ContextWebGL::getUNPACK_PREMULTIPLY_ALPHA_WEBGL, nullptr),
-                            InstanceAccessor("UNPACK", &ContextWebGL::getUNPACK, nullptr),
                         });
         constructor = Napi::Persistent(func);
     }
@@ -840,6 +839,9 @@ CHECK_PARAM_LEGNTH(2)
 WebGLProgram *program = Napi::ObjectWrap<WebGLProgram>::Unwrap(info[0].As<Napi::Object>());
 std::string shaderStr = info[1].As<Napi::String>().Utf8Value();
 GLuint index = glGetUniformLocation(program->getId(), shaderStr.c_str());
+
+printf("getUniformationLocation(%d, %s)=%d\n", program->getId(), shaderStr.c_str(), index);
+
 Napi::Object obj = WebGLUniformLocation::NewInstance(info.Env(), index);
 RECORD_TIME_END
 return obj;
@@ -931,68 +933,68 @@ RECORD_TIME_END
 
 DEFINE_VOID_METHOD(uniform1fv)
 CHECK_PARAM_LEGNTH(2)
-parseTypeArrayAndCallUniformFunc(info, glUniform1fv);
+parseTypeArrayAndCallUniformFloatFunc(info, glUniform1fv);
 RECORD_TIME_END
 }
 
 DEFINE_VOID_METHOD(uniform2fv)
 CHECK_PARAM_LEGNTH(3)
-parseTypeArrayAndCallUniformFunc(info, glUniform2fv);
+parseTypeArrayAndCallUniformFloatFunc(info, glUniform2fv);
 RECORD_TIME_END
 }
 
 DEFINE_VOID_METHOD(uniform3fv)
 CHECK_PARAM_LEGNTH(4)
-parseTypeArrayAndCallUniformFunc(info, glUniform3fv);
+parseTypeArrayAndCallUniformFloatFunc(info, glUniform3fv);
 RECORD_TIME_END
 }
 
 DEFINE_VOID_METHOD(uniform4fv)
 CHECK_PARAM_LEGNTH(5)
-parseTypeArrayAndCallUniformFunc(info, glUniform4fv);
+parseTypeArrayAndCallUniformFloatFunc(info, glUniform4fv);
 RECORD_TIME_END
 }
 
 DEFINE_VOID_METHOD(uniform1iv)
 CHECK_PARAM_LEGNTH(2)
-parseTypeArrayAndCallUniformFunc(info, glUniform1iv);
+parseTypeArrayAndCallUniformIntFunc(info, glUniform1iv);
 RECORD_TIME_END
 }
 DEFINE_VOID_METHOD(uniform2iv)
 CHECK_PARAM_LEGNTH(2)
-parseTypeArrayAndCallUniformFunc(info, glUniform2iv);
+parseTypeArrayAndCallUniformIntFunc(info, glUniform2iv);
 RECORD_TIME_END
 }
 DEFINE_VOID_METHOD(uniform3iv)
 CHECK_PARAM_LEGNTH(2)
-parseTypeArrayAndCallUniformFunc(info, glUniform3iv);
+parseTypeArrayAndCallUniformIntFunc(info, glUniform3iv);
 RECORD_TIME_END
 }
 DEFINE_VOID_METHOD(uniform4iv)
 CHECK_PARAM_LEGNTH(2)
-parseTypeArrayAndCallUniformFunc(info, glUniform4iv);
+parseTypeArrayAndCallUniformIntFunc(info, glUniform4iv);
 RECORD_TIME_END
 }
 
 DEFINE_VOID_METHOD(uniformMatrix2fv)
 CHECK_PARAM_LEGNTH(3)
-parseTypeArrayAndCallUniformFunc(info, glUniformMatrix2fv);
+parseTypeArrayAndCallUniformMatrixFunc(info, 4, glUniformMatrix2fv);
 RECORD_TIME_END
 }
 
 DEFINE_VOID_METHOD(uniformMatrix3fv)
 CHECK_PARAM_LEGNTH(3)
-parseTypeArrayAndCallUniformFunc(info, glUniformMatrix3fv);
+parseTypeArrayAndCallUniformMatrixFunc(info, 9,  glUniformMatrix3fv);
 RECORD_TIME_END
 }
 
 DEFINE_VOID_METHOD(uniformMatrix4fv)
 CHECK_PARAM_LEGNTH(3)
-parseTypeArrayAndCallUniformFunc(info, glUniformMatrix4fv);
+parseTypeArrayAndCallUniformMatrixFunc(info, 16, glUniformMatrix4fv);
 RECORD_TIME_END
 }
 
-void ContextWebGL::parseTypeArrayAndCallUniformFunc(const Napi::CallbackInfo &info, glUniformFloatPtr func)
+void ContextWebGL::parseTypeArrayAndCallUniformFloatFunc(const Napi::CallbackInfo &info, glUniformFloatPtr func)
 {
     WebGLUniformLocation *location = Napi::ObjectWrap<WebGLUniformLocation>::Unwrap(info[0].As<Napi::Object>());
     if (info[1].IsTypedArray())
@@ -1007,9 +1009,19 @@ void ContextWebGL::parseTypeArrayAndCallUniformFunc(const Napi::CallbackInfo &in
         Napi::Float32Array buffer = array.As<Napi::Float32Array>();
         func(location->getIndex(), buffer.ElementLength(), buffer.Data());
     }
+    else if( info[1].IsArray() )
+    {
+        Napi::Array array  = info[2].As<Napi::Array>();
+        float floatArray[array.Length()];
+        for (size_t i = 0; i < array.Length(); i++)
+        {
+            floatArray[i] =  array.Get(i).ToNumber();
+        }
+        func(location->getIndex(), array.Length(), floatArray);
+    }
 }
 
-void ContextWebGL::parseTypeArrayAndCallUniformFunc(const Napi::CallbackInfo &info, glUniformIntPtr func)
+void ContextWebGL::parseTypeArrayAndCallUniformIntFunc(const Napi::CallbackInfo &info, glUniformIntPtr func)
 {
     WebGLUniformLocation *location = Napi::ObjectWrap<WebGLUniformLocation>::Unwrap(info[0].As<Napi::Object>());
     if (info[1].IsTypedArray())
@@ -1024,23 +1036,45 @@ void ContextWebGL::parseTypeArrayAndCallUniformFunc(const Napi::CallbackInfo &in
         Napi::Int32Array buffer = array.As<Napi::Int32Array>();
         func(location->getIndex(), buffer.ElementLength(), buffer.Data());
     }
+    else if( info[1].IsArray() )
+    {
+        Napi::Array array  = info[2].As<Napi::Array>();
+        int intArray[array.Length()];
+        for (size_t i = 0; i < array.Length(); i++)
+        {
+            intArray[i] =  array.Get(i).ToNumber();
+        }
+        func(location->getIndex(), array.Length(), intArray);
+    }
 }
 
-void ContextWebGL::parseTypeArrayAndCallUniformFunc(const Napi::CallbackInfo &info, glUniformMatrixPtr func)
+void ContextWebGL::parseTypeArrayAndCallUniformMatrixFunc(const Napi::CallbackInfo &info, int size, glUniformMatrixPtr func)
 {
     WebGLUniformLocation *location = Napi::ObjectWrap<WebGLUniformLocation>::Unwrap(info[0].As<Napi::Object>());
     GLboolean transpose = info[1].As<Napi::Boolean>().Value();
+
     if (info[2].IsTypedArray())
     { /* constant-expression */
         Napi::TypedArray array = info[2].As<Napi::TypedArray>();
         Napi::Float32Array buffer = array.As<Napi::Float32Array>();
-        func(location->getIndex(), buffer.ElementLength(), transpose, buffer.Data());
+        func(location->getIndex(), buffer.ElementLength()/size, transpose, buffer.Data());
     }
     else if (info[2].IsArrayBuffer())
     {
         Napi::ArrayBuffer array = info[2].As<Napi::ArrayBuffer>();
         Napi::Float32Array buffer = array.As<Napi::Float32Array>();
-        func(location->getIndex(), buffer.ElementLength(), transpose, buffer.Data());
+        func(location->getIndex(), buffer.ElementLength()/size, transpose, buffer.Data());
+    }
+    else if( info[2].IsArray() )
+    {
+        Napi::Array array  = info[2].As<Napi::Array>();
+        float floatArray[array.Length()];
+        for (size_t i = 0; i < array.Length(); i++)
+        {
+            floatArray[i] =  array.Get(i).ToNumber();
+        }
+    
+        func(location->getIndex(), array.Length()/size, transpose, floatArray);
     }
 }
 
@@ -1449,8 +1483,8 @@ return Napi::Number::New(info.Env(), glIsProgram(program->getId()));
 
 DEFINE_VOID_METHOD(clearDepth)
 CHECK_PARAM_LEGNTH(1)
-GLclampd depth = info[0].As<Napi::Number>().DoubleValue();
-glClearDepth(depth);
+GLfloat depth = info[0].As<Napi::Number>().FloatValue();
+glClearDepthf(depth);
 RECORD_TIME_END
 }
 

node/binding/CanvasRenderingContextWebGL.h

@@ -179,9 +179,10 @@ namespace NodeBinding
 
         void colorMask(const Napi::CallbackInfo &info);
         Napi::Value getShaderSource(const Napi::CallbackInfo &info);
-        void parseTypeArrayAndCallUniformFunc(const Napi::CallbackInfo &info, glUniformFloatPtr func);
-        void parseTypeArrayAndCallUniformFunc(const Napi::CallbackInfo &info, glUniformIntPtr func);
-        void parseTypeArrayAndCallUniformFunc(const Napi::CallbackInfo &info, glUniformMatrixPtr func);
+
+        void parseTypeArrayAndCallUniformFloatFunc(const Napi::CallbackInfo &info, glUniformFloatPtr func);
+        void parseTypeArrayAndCallUniformIntFunc(const Napi::CallbackInfo &info, glUniformIntPtr func);
+        void parseTypeArrayAndCallUniformMatrixFunc(const Napi::CallbackInfo &info, int size, glUniformMatrixPtr func);
         void parseTypeArrayAndCallVertexFunc(const Napi::CallbackInfo &info, glVeterxFloatPtr func);
 
         static Napi::FunctionReference constructor;

node/examples/webgl/glclearColor.js

@@ -0,0 +1,16 @@
+const { createCanvas, Image } = require('../../export')
+const fs = require('fs')
+const path = require('path');
+const out = fs.createWriteStream(path.join(__dirname, "..","..")+ '/clearcolor.png');
+
+const canvas = createCanvas(400, 400);
+var gl = canvas.getContext("webgl");
+
+gl.viewport(0,0,canvas.width,canvas.height);
+gl.clearColor(1.0,  0.5, 0.5, 1.0);
+gl.clear(gl.COLOR_BUFFER_BIT);
+
+var stream = canvas.createPNGStream();
+stream.on('data', function (chunk) {
+    out.write(chunk);
+});

node/examples/webgl/glcube.js

@@ -1,227 +1,204 @@
 const { createCanvas, Image } = require('../../export')
-const canvas = createCanvas(400, 400);
 const fs = require('fs')
 const path = require('path');
-const out = fs.createWriteStream(path.join(__dirname, "..","..")+ '/cubeWebGL.png');
-
-
-var globalCanvas = canvas;
+const out = fs.createWriteStream(path.join(__dirname, "..","..")+ '/cube.png');
 
+const canvas = createCanvas(400, 400);
 var gl = canvas.getContext("webgl");
-console.log("canvas=" + canvas);
-console.log("gl=" + gl);
 
+var width = canvas.width;
+var height = canvas.height;
 
+/*========== Defining and storing the geometry ==========*/
 var vertices = [
-    -1, -1, -1, 1, -1, -1, 1, 1, -1, -1, 1, -1,
-    -1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1, 1,
-    -1, -1, -1, -1, 1, -1, -1, 1, 1, -1, -1, 1,
-    1, -1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1,
-    -1, -1, -1, -1, -1, 1, 1, -1, 1, 1, -1, -1,
-    -1, 1, -1, -1, 1, 1, 1, 1, 1, 1, 1, -1,
-];
+                -1,-1,-1, 1,-1,-1, 1, 1,-1, -1, 1,-1,
+                -1,-1, 1, 1,-1, 1, 1, 1, 1, -1, 1, 1,
+                -1,-1,-1, -1, 1,-1, -1, 1, 1, -1,-1, 1,
+                1,-1,-1, 1, 1,-1, 1, 1, 1, 1,-1, 1,
+                -1,-1,-1, -1,-1, 1, 1,-1, 1, 1,-1,-1,
+                -1, 1,-1, -1, 1, 1, 1, 1, 1, 1, 1,-1,
+                ];
 
 var colors = [
-    5, 3, 7, 5, 3, 7, 5, 3, 7, 5, 3, 7,
-    1, 1, 3, 1, 1, 3, 1, 1, 3, 1, 1, 3,
-    0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,
-    1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
-    1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0,
-    0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0
-];
+              5,3,7, 5,3,7, 5,3,7, 5,3,7,
+              1,1,3, 1,1,3, 1,1,3, 1,1,3,
+              0,0,1, 0,0,1, 0,0,1, 0,0,1,
+              1,0,0, 1,0,0, 1,0,0, 1,0,0,
+              1,1,0, 1,1,0, 1,1,0, 1,1,0,
+              0,1,0, 0,1,0, 0,1,0, 0,1,0
+              ];
 
 var indices = [
-    0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7,
-    8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15,
-    16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23
-];
+               0,1,2, 0,2,3, 4,5,6, 4,6,7,
+               8,9,10, 8,10,11, 12,13,14, 12,14,15,
+               16,17,18, 16,18,19, 20,21,22, 20,22,23
+               ];
 
-console.log("start create vertex buffer >>> ");
-var vertex_buffer = gl.createBuffer();
-console.log(vertex_buffer);
-
-console.log("after createBuffer=" + vertex_buffer);
+// Create and store data into vertex buffer
+var vertex_buffer = gl.createBuffer ();
 gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
-console.log("bufferData vertices: ");
-
 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
 
-var color_buffer = gl.createBuffer();
+// Create and store data into color buffer
+var color_buffer = gl.createBuffer ();
 gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
-
-console.log("bufferData colors");
 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
 
-var index_buffer = gl.createBuffer();
+// Create and store data into index buffer
+var index_buffer = gl.createBuffer ();
 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
-console.log("bufferData index_buffer");
 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
 
+/*=================== Shaders =========================*/
 
-var vertCode = 'attribute vec3 position;' +
-    'uniform mat4 Pmatrix;' +
-    'uniform mat4 Vmatrix;' +
-    'uniform mat4 Mmatrix;' +
-    'attribute vec3 color;' +
-    'varying vec3 vColor;' +
+var vertCode = 'attribute vec3 position;'+
+'uniform mat4 Pmatrix;'+
+'uniform mat4 Vmatrix;'+
+'uniform mat4 Mmatrix;'+
+'attribute vec3 color;'+//the color of the point
+'varying vec3 vColor;'+
 
-    'void main(void) { ' +
-    'gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position, 1.);' +
-    'vColor = color;' +
-    '}';
+'void main(void) { '+//pre-built function
+'gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position, 1.);'+
+'vColor = color;'+
+'}';
 
-var fragCode = 'precision mediump float;' +
-    'varying vec3 vColor;' +
-    'void main(void) {' +
-    'gl_FragColor = vec4(vColor, 1.);' +
-    '}';
+var fragCode = 'precision mediump float;'+
+'varying vec3 vColor;'+
+'void main(void) {'+
+'gl_FragColor = vec4(vColor, 1.);'+
+'}';
 
 var vertShader = gl.createShader(gl.VERTEX_SHADER);
-console.log("createShader:" + vertShader);
 gl.shaderSource(vertShader, vertCode);
 gl.compileShader(vertShader);
 
 var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
 gl.shaderSource(fragShader, fragCode);
 gl.compileShader(fragShader);
-console.log("createFragShader:" + fragShader);
-
 
 var shaderProgram = gl.createProgram();
 gl.attachShader(shaderProgram, vertShader);
 gl.attachShader(shaderProgram, fragShader);
 gl.linkProgram(shaderProgram);
-console.log("linkProgram:" + shaderProgram);
-
 
+/* ====== Associating attributes to vertex shader =====*/
 var Pmatrix = gl.getUniformLocation(shaderProgram, "Pmatrix");
 var Vmatrix = gl.getUniformLocation(shaderProgram, "Vmatrix");
 var Mmatrix = gl.getUniformLocation(shaderProgram, "Mmatrix");
 
-
-console.log("getUniformLocation:Pmatrix=" + Pmatrix);
-console.log("getUniformLocation:Vmatrix=" + Vmatrix);
-console.log("getUniformLocation:Mmatrix=" + Mmatrix);
-
-
 gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
 var position = gl.getAttribLocation(shaderProgram, "position");
-gl.vertexAttribPointer(position, 3, gl.FLOAT, false, 0, 0);
-console.log("getAttribLocation:position=" + position);
+gl.vertexAttribPointer(position, 3, gl.FLOAT, false,0,0) ;
 
+// Position
 gl.enableVertexAttribArray(position);
 gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
 var color = gl.getAttribLocation(shaderProgram, "color");
-gl.vertexAttribPointer(color, 3, gl.FLOAT, false, 0, 0);
-console.log("getAttribLocation:color=" + color);
+gl.vertexAttribPointer(color, 3, gl.FLOAT, false,0,0) ;
 
+// Color
 gl.enableVertexAttribArray(color);
 gl.useProgram(shaderProgram);
 
+/*==================== MATRIX =====================*/
 
 function get_projection(angle, a, zMin, zMax) {
-    var ang = Math.tan((angle * .5) * Math.PI / 180);
+    var ang = Math.tan((angle*.5)*Math.PI/180);//angle*.5
     return [
-        0.5 / ang, 0, 0, 0,
-        0, 0.5 * a / ang, 0, 0,
-        0, 0, -(zMax + zMin) / (zMax - zMin), -1,
-        0, 0, (-2 * zMax * zMin) / (zMax - zMin), 0
-    ];
+            0.5/ang, 0 , 0, 0,
+            0, 0.5*a/ang, 0, 0,
+            0, 0, -(zMax+zMin)/(zMax-zMin), -1,
+            0, 0, (-2*zMax*zMin)/(zMax-zMin), 0
+            ];
 }
 
-var wbyh = 1;
-var proj_matrix = get_projection(40, wbyh, 1, 100);
 
-var mov_matrix = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
-var view_matrix = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+var proj_matrix = get_projection(40, width/height, 1, 100);
 
-view_matrix[14] = view_matrix[14] - 6;
+var mov_matrix = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1];
+var view_matrix = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1];
 
+// translating z
+view_matrix[14] = view_matrix[14]-6;//zoom
 
+/*==================== Rotation ====================*/
 
 function rotateZ(m, angle) {
     var c = Math.cos(angle);
     var s = Math.sin(angle);
     var mv0 = m[0], mv4 = m[4], mv8 = m[8];
-
-    m[0] = c * m[0] - s * m[1];
-    m[4] = c * m[4] - s * m[5];
-    m[8] = c * m[8] - s * m[9];
-
-    m[1] = c * m[1] + s * mv0;
-    m[5] = c * m[5] + s * mv4;
-    m[9] = c * m[9] + s * mv8;
+    
+    m[0] = c*m[0]-s*m[1];
+    m[4] = c*m[4]-s*m[5];
+    m[8] = c*m[8]-s*m[9];
+    
+    m[1]=c*m[1]+s*mv0;
+    m[5]=c*m[5]+s*mv4;
+    m[9]=c*m[9]+s*mv8;
 }
 
 function rotateX(m, angle) {
     var c = Math.cos(angle);
     var s = Math.sin(angle);
     var mv1 = m[1], mv5 = m[5], mv9 = m[9];
-
-    m[1] = m[1] * c - m[2] * s;
-    m[5] = m[5] * c - m[6] * s;
-    m[9] = m[9] * c - m[10] * s;
-
-    m[2] = m[2] * c + mv1 * s;
-    m[6] = m[6] * c + mv5 * s;
-    m[10] = m[10] * c + mv9 * s;
+    
+    m[1] = m[1]*c-m[2]*s;
+    m[5] = m[5]*c-m[6]*s;
+    m[9] = m[9]*c-m[10]*s;
+    
+    m[2] = m[2]*c+mv1*s;
+    m[6] = m[6]*c+mv5*s;
+    m[10] = m[10]*c+mv9*s;
 }
 
-
 function rotateY(m, angle) {
     var c = Math.cos(angle);
     var s = Math.sin(angle);
     var mv0 = m[0], mv4 = m[4], mv8 = m[8];
-
-    m[0] = c * m[0] + s * m[2];
-    m[4] = c * m[4] + s * m[6];
-    m[8] = c * m[8] + s * m[10];
-
-    m[2] = c * m[2] - s * mv0;
-    m[6] = c * m[6] - s * mv4;
-    m[10] = c * m[10] - s * mv8;
+    
+    m[0] = c*m[0]+s*m[2];
+    m[4] = c*m[4]+s*m[6];
+    m[8] = c*m[8]+s*m[10];
+    
+    m[2] = c*m[2]-s*mv0;
+    m[6] = c*m[6]-s*mv4;
+    m[10] = c*m[10]-s*mv8;
 }
 
+/*=================Drawing===========================*/
+
 var time_old = 0;
+//var time = 0;
+var time = 250;
 
-var count = 0;
-var dt = 3.5;
-var count = 5;
-var index = 0;
-var animate = function (time) {
-    rotateZ(mov_matrix, dt * 0.005);
-    rotateY(mov_matrix, dt * 0.002);
-    rotateX(mov_matrix, dt * 0.003);
-
+var draw = function() {
+    var dt = time-time_old;
+    rotateZ(mov_matrix, dt*0.005);//time
+    rotateY(mov_matrix, dt*0.002);
+    rotateX(mov_matrix, dt*0.003);
+    time_old = time;
+    time += 16;
+    
+    gl.enable(gl.DEPTH_TEST);
+    gl.depthFunc(gl.LEQUAL);
+    gl.clearColor(0.5, 0.5, 0.5, 0.9);
+    gl.clearDepth(1.0);
+    
+    gl.viewport(0.0, 0.0, width, height);
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
     gl.uniformMatrix4fv(Pmatrix, false, proj_matrix);
     gl.uniformMatrix4fv(Vmatrix, false, view_matrix);
     gl.uniformMatrix4fv(Mmatrix, false, mov_matrix);
-
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
     gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
-
-    //    globalCanvas.requestAnimationFrame(animate);
-    index++;
-
-    //    console.log("animate run----------------------");
+    
+    //requestAnimationFrame(draw);
+    
 }
 
+draw();
 
-gl.enable(gl.DEPTH_TEST);
-gl.depthFunc(gl.LEQUAL);
-gl.clearColor(0.5, 0.5, 0.5, 0.9);
-gl.clearDepth(1.0);
-
-gl.viewport(0.0, 0.0, canvas.width, canvas.height);
-gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-for (let i = 0; i < 60; i++) {
-    animate(0);
-}
-
-// canvas.createPNG("cube")
-// console.log("js run over");
 
 var stream = canvas.createPNGStream();
 stream.on('data', function (chunk) {

node/examples/webgl/glrectangle.js

@@ -0,0 +1,124 @@
+const { createCanvas, Image } = require('../../export')
+const fs = require('fs')
+const path = require('path');
+const out = fs.createWriteStream(path.join(__dirname, "..","..")+ '/rectangle.png');
+
+const canvas = createCanvas(1000, 1000);
+var gl = canvas.getContext("webgl");
+
+var vertexSource = `
+attribute vec2 a_position;
+uniform vec2 u_resolution;
+void main() {
+    // convert the rectangle from pixels to 0.0 to 1.0
+    vec2 zeroToOne = a_position / u_resolution;
+    // convert from 0->1 to 0->2
+    vec2 zeroToTwo = zeroToOne * 2.0;
+    // convert from 0->2 to -1->+1 (clipspace)
+    vec2 clipSpace = zeroToTwo - 1.0;
+    gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
+}
+`;
+var fragmentSource = `
+precision mediump float;
+uniform vec4 u_color;
+void main() {
+    gl_FragColor = u_color;
+}
+`;
+
+// setup program
+var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(vertexShader, vertexSource);
+gl.compileShader(vertexShader);
+if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+    console.log("failed to load shader", " ", gl.getShaderInfoLog(vertexShader));
+}
+var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+gl.shaderSource(fragmentShader, fragmentSource);
+gl.compileShader(fragmentShader);
+if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+    console.log("failed to load shader", " ", gl.getShaderInfoLog(fragmentShader));
+}
+var program = gl.createProgram();
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+gl.linkProgram(program);
+
+if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    console.log("linker failed", " ", gl.getProgramInfoLog(program));
+}
+
+// look up where the vertex data needs to go.
+var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
+// look up uniform locations
+var resolutionUniformLocation = gl.getUniformLocation(program, "u_resolution");
+var colorUniformLocation = gl.getUniformLocation(program, "u_color");
+// Create a buffer to put three 2d clip space points in
+var positionBuffer = gl.createBuffer();
+// Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
+gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+
+// Tell WebGL how to convert from clip space to pixels
+gl.viewport(0, 0, canvas.width, canvas.height);
+// Clear the canvas
+gl.clearColor(0, 0, 0, 0);
+gl.clear(gl.COLOR_BUFFER_BIT);
+// Tell it to use our program (pair of shaders)
+gl.useProgram(program);
+// Turn on the attribute
+gl.enableVertexAttribArray(positionAttributeLocation);
+// Bind the position buffer.
+gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+// Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
+var size = 2;          // 2 components per iteration
+var type = gl.FLOAT;   // the data is 32bit floats
+var normalize = false; // don't normalize the data
+var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
+var offset = 0;        // start at the beginning of the buffer
+gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset)
+// set the resolution
+gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
+// draw 50 random rectangles in random colors
+for (var ii = 0; ii < 50; ++ii) {
+    // Setup a random rectangle
+    // This will write to positionBuffer because
+    // its the last thing we bound on the ARRAY_BUFFER
+    // bind point
+//    setRectangle(gl, randomInt(300), randomInt(300), randomInt(300), randomInt(300));
+    setRectangle(gl, ii%10*100+10, ii/10*100+10, 100, 100);
+    // Set a random color.
+//    gl.uniform4f(colorUniformLocation, Math.random(), Math.random(), Math.random(), 1);
+    gl.uniform4f(colorUniformLocation, (ii/10)*0.1+(ii%10)*0.01, (ii/10)*0.1+(ii%10)*0.2, (ii%10)*0.1, 1);
+    // Draw the rectangle.
+    var primitiveType = gl.TRIANGLES;
+    var offset = 0;
+    var count = 6;
+    gl.drawArrays(primitiveType, offset, count);
+}
+
+// Returns a random integer from 0 to range - 1.
+function randomInt(range) {
+    return Math.floor(Math.random() * range);
+}
+// Fill the buffer with the values that define a rectangle.
+function setRectangle(gl, x, y, width, height) {
+    var x1 = x;
+    var x2 = x + width;
+    var y1 = y;
+    var y2 = y + height;
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+                                                     x1, y1,
+                                                     x2, y1,
+                                                     x1, y2,
+                                                     x1, y2,
+                                                     x2, y1,
+                                                     x2, y2,
+                                                     ]), gl.STATIC_DRAW);
+ }
+
+
+var stream = canvas.createPNGStream();
+stream.on('data', function (chunk) {
+    out.write(chunk);
+});

node/examples/webgl/glscissor.js

@@ -1,35 +1,25 @@
-//var stats;
-
-var that;
-var width;
-var height;
 const { createCanvas, Image } = require('../../export')
+const fs = require('fs')
+const path = require('path');
+const out = fs.createWriteStream(path.join(__dirname, "..","..")+ '/scissor.png');
+
 const canvas = createCanvas(400, 400);
 var gl = canvas.getContext("webgl");
 
-width = canvas.width;
-height =canvas.height;
 
-
-var color = [0.0,0.5,0.0,1.0];
-var position;
-
-// Variables to hold the size and velocity of the square.
-var size = [60, 60];
-var velocity = 9.0;
-
-function draw() {
-  gl.scissor(0, 0, width, height);
-  gl.clearColor(1.0, 0.5, 0.5, 1.0);
-  gl.clear(gl.COLOR_BUFFER_BIT);
-
-  gl.scissor(60, 60, 60, 60);
-  gl.clearColor(color[0], color[1], color[2], 1.0);
-  gl.clear(gl.COLOR_BUFFER_BIT);
-}
-
-gl.viewport(0,0,width,height);
 gl.enable(gl.SCISSOR_TEST);
-position = [0, height];
-draw();
-canvas.createPNG("sissor")
+gl.scissor(0, 0, canvas.width, canvas.height);
+gl.clearColor(1.0,  0.5, 0.5, 1.0);
+gl.clear(gl.COLOR_BUFFER_BIT);
+gl.finish();
+
+
+gl.scissor(60, 60, 60, 60);
+var color = [0.0,0.5,0.0,1.0];
+gl.clearColor(color[0], color[1], color[2], color[3]);
+gl.clear(gl.COLOR_BUFFER_BIT);
+
+var stream = canvas.createPNGStream();
+stream.on('data', function (chunk) {
+    out.write(chunk);
+});

node/examples/webgl/glstencil.js

@@ -1,11 +1,12 @@
-var that;
-
-var canvas;
-var gl;
+const { createCanvas, Image } = require('../../export')
+const fs = require('fs')
+const path = require('path');
 
+const out = fs.createWriteStream(path.join(__dirname, "..","..")+ '/stencil.png');
+const canvas = createCanvas(600, 600);
+var gl = canvas.getContext("webgl");
 var width;
 var height;
-const { createCanvas, Image } = require('../../export')
 var program = null;
 var program2 = null;
 var samplerUniform = null;
@@ -189,11 +190,6 @@ function createTexture(source) {
   return texture;
 }
 
-
-canvas = createCanvas(600,600);
-gl = canvas.getContext('webgl');
-
-
 height = canvas.height;
 width = canvas.width;
 
@@ -206,7 +202,10 @@ var img = new Image();
 img.onload = function() {
   maskTexture = createTexture(img);
   setupBufferAndDraw();
-  canvas.createPNG("stencil")
+  var stream = canvas.createPNGStream();
+  stream.on('data', function (chunk) {
+      out.write(chunk);
+  });
 };
 img.crossOrigin = "";
 img.src = 'https://img.alicdn.com/tfs/TB1edrqL7Y2gK0jSZFgXXc5OFXa-128-128.png';

node/examples/webgl/gltexture.js

@@ -1,4 +1,12 @@
 const { createCanvas, Image } = require('../../export')
+const fs = require('fs')
+const path = require('path');
+
+const out = fs.createWriteStream(path.join(__dirname, "..","..")+ '/texture.png');
+const canvas = createCanvas(900, 900);
+var gl = canvas.getContext("webgl");
+
+
 function setRectangle(gl, x, y, width, height) {
     var x1 = x;
     var x2 = x + width;
@@ -136,15 +144,12 @@ function drawImage(gl, canvas, image) {
     gl.drawArrays(primitiveType, offset, count);
 }
 
-var canvas =createCanvas(900,900);
-var c = canvas;
-var gl = c.getContext('webgl')
-
-
 var image = new Image();
-
 image.onload = function () {
     drawImage(gl, canvas, image);
-    canvas.createPNG("gltexture")
+    var stream = canvas.createPNGStream();
+    stream.on('data', function (chunk) {
+        out.write(chunk);
+    });
 }
 image.src = "https://img.alicdn.com/tfs/TB1FQDkCEz1gK0jSZLeXXb9kVXa-1200-807.jpg";

node/examples/webgl/gltriangle.js

@@ -1,9 +1,10 @@
 const { createCanvas, Image } = require('../../export')
-const canvas = createCanvas(400, 400);
-const gl = canvas.getContext('webgl')
 const fs = require('fs')
 const path = require('path');
+
 const out = fs.createWriteStream(path.join(__dirname, "..","..")+ '/triangle1.png');
+const canvas = createCanvas(400, 400);
+const gl = canvas.getContext('webgl')
 
 function draw() {
 

node/examples/webgl/gltriangle2.js

@@ -1,13 +1,14 @@
 const { createCanvas, Image } = require('../../export')
-const canvas = createCanvas(400, 400);
-const gl = canvas.getContext('webgl')
 const fs = require('fs')
 const path = require('path');
 const out = fs.createWriteStream(path.join(__dirname, "..","..")+ '/triangle2.png');
 
+
+const canvas = createCanvas(400, 400);
+const gl = canvas.getContext('webgl')
+
 function draw() {
 
-    
     function initShaders(e, r, a) { var t = createProgram(e, r, a); return t ? (e.useProgram(t), e.program = t, !0) : (console.log("Failed to create program"), !1) } function createProgram(e, r, a) { var t = loadShader(e, e.VERTEX_SHADER, r), o = loadShader(e, e.FRAGMENT_SHADER, a); if (!t || !o) return null; var l = e.createProgram(); if (!l) return null; if (e.attachShader(l, t), e.attachShader(l, o), e.linkProgram(l), !e.getProgramParameter(l, e.LINK_STATUS)) { var n = e.getProgramInfoLog(l); return console.log("Failed to link program: " + n), e.deleteProgram(l), e.deleteShader(o), e.deleteShader(t), null } return l } function loadShader(e, r, a) { var t = e.createShader(r); if (null == t) return console.log("unable to create shader"), null; if (e.shaderSource(t, a), e.compileShader(t), !e.getShaderParameter(t, e.COMPILE_STATUS)) { var o = e.getShaderInfoLog(t); return console.log("Failed to compile shader: " + o), e.deleteShader(t), null } return t } function getWebGLContext(e, r) { var a = WebGLUtils.setupWebGL(e); return a ? ((arguments.length < 2 || r) && (a = WebGLDebugUtils.makeDebugContext(a)), a) : null }
     
     function init(VSHADER_SOURCE, FSHADER_SOURCE) {