PRFilledPolygon in html-5

Hello,

I’m trying to convert PRKit to javascript, i have it almost done, but my class didn’t render anything, here’s my code of draw function and init function:

initWithPointsAndTexture: function(polygonPoints,fillTexture){
        this.vertexBuffer = gl.createBuffer();
        this.coordBuffer = gl.createBuffer();
        cc.NodeRGBA.prototype.init.call(this);
        this.setShaderProgram(
            cc.ShaderCache.getInstance().getProgram("ShaderPositionTexture")
        );
        this.setTexture(fillTexture);
        this.setPoints(polygonPoints);
    },
draw: function(){
        if (this.areaTrianglePointCount <= 1)
            return;

        this._shaderProgram.use();
        this._shaderProgram.setUniformForModelViewAndProjectionMatrixWithMat4();
        cc.glBindTexture2DN(0, this.texture);

        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);

        cc.glBlendFunc(cc.BLEND_SRC_ALPHA, cc.BLEND_DST_ALPHA);
        cc.glEnableVertexAttribs(cc.VERTEX_ATTRIB_FLAG_POSTEX);
        this.updateTransform();

        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.areaTrianglePoints), gl.STATIC_DRAW);
        this.vertexBuffer.itemSize = 2;
        this.vertexBuffer.numItems = this.areaTrianglePoints.length/2;
        gl.vertexAttribPointer(gl.VERTEX_ATTRIB_POS, this.vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);

        gl.bindBuffer(gl.ARRAY_BUFFER, this.coordBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.textureCoordinates), gl.STATIC_DRAW);
        this.coordBuffer.itemSize = 2;
        this.coordBuffer.numItems = this.textureCoordinates.length/2;
        gl.vertexAttribPointer(gl.VERTEX_ATTRIB_TEX, this.coordBuffer.itemSize, gl.FLOAT, false, 0, 0);

        gl.drawArrays(gl.Triangles, 0 , this.areaTrianglePointCount);

        cc.CHECK_GL_ERROR_DEBUG();
        cc.g_NumberOfDraws++;
}

‘this.areaTrianglePoints’ and ‘this.textureCoordinates’ are created as array’s of floats and computed correctly.
Used “ShaderPositionTexture” shader.

Hi Adrian Mrowiec,

Why did you call updateTransform in draw function?

and
gl.vertexAttribPointer(gl.VERTEX_ATTRIB_POS, this.vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.VERTEX_ATTRIB_POS => cc.VERTEX_ATTRIB_POSITION

gl.vertexAttribPointer(gl.VERTEX_ATTRIB_TEX, this.coordBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.VERTEX_ATTRIB_TEX => cc.VERTEX_ATTRIB_TEX_COORDS

gl.drawArrays(gl.Triangles, 0 , this.areaTrianglePointCount);
gl.Triangles => gl.TRIANGLE_STRIP