Can gl.drawArrays work in babylon

Questions
1

to draw pointscloud 。mesh and material can do the job. but if I want to use gl.drawArrays directly. is there anyway to make it work

2

Welcome aboard!

You can access the gl context through engine._gl, but it’s not recommended. Maybe the PointCloudSystem or the SolidParticleSystem class can help you? There are plenty of references to these classes in the forum, if you want to see what they are able to do.

3

thanks for the answer, in babylon pointclouds works good.
Now I just want to try gl.drawArrays。

var canvas = document.getElementById(‘renderCanvas’);
gl = (canvas.getContext(“webgl2”) || canvas.getContext(“experimental-webgl2”));

gl=engine._gl;
I try both,but it did’t work.

         var vertexString = `
        attribute vec4 a_Position; // 定义一个从外部传进来的数据
        void main(){
            gl_Position = a_Position;
            gl_PointSize = 10.0;
        }
    `;
    // 片元着色器,告知用什么颜色来着色
    var fragmentString = `
        precision mediump float; // 必须设置精度否则无法通过编译
        uniform vec4 u_FragColor; // 外部的颜色数据
        void main(){
            gl_FragColor = u_FragColor;
        }
    `;
    
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
    
    gl.shaderSource(vertexShader,vertexString); 
    gl.shaderSource(fragShader,fragmentString);
    
    var e = gl.compileShader(vertexShader);
    e = gl.compileShader(fragShader);

    // 用来检查shader的错误
    // console.log(gl.getShaderInfoLog(fragShader));
  
    var program = gl.createProgram();
    gl.attachShader(program,vertexShader);
    gl.attachShader(program,fragShader);
    gl.linkProgram(program);
    gl.useProgram(program);
    
    // 创建三角形
    // 这里采用3组Vec2坐标来进行数据定义,这个Vec2的类型,由vertexAttribPointer方法的第二个参数来决定
    var vertices = new Float32Array([
        -0.5, 0,  
        0.5 , 0,   
        0, 0.5
    ]);
    // 创建一个缓冲区
    var vertexBuffer = gl.createBuffer();
    // 绑定缓冲区
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    // 为缓冲区注入数据
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    // 获取Shader的顶点变量
    var a_Position = gl.getAttribLocation(program, 'a_Position');
    // 将缓冲区的顶点数据传给Shader
    // vertexAttribPointer(index, size, type, normalized, stride, offset)
    gl.vertexAttribPointer(a_Position,2, gl.FLOAT, false, 0, 0);
    // 开启缓冲区链接
    gl.enableVertexAttribArray(a_Position);
    // 传入外部的颜色数据
    var u_FragColor = gl.getUniformLocation(program, 'u_FragColor');
    gl.uniform4f(u_FragColor, 1.0, 1.0, 0.0, 1.0);

    gl.viewport(0,0,canvas.offsetWidth,canvas.offsetHeight);
    gl.clearColor(0.1,0,0.2,0.5);
    gl.clear(gl.COLOR_BUFFER_BIT);
    // 使用 gl.TRIANGLES （独立三角形） 进行绘制
    gl.drawArrays(gl.TRIANGLES,0,vertices.length/2);

    const error = gl.getError();
    if (error !== gl.NO_ERROR) {
        console.error("WebGL error: " + error);
    } else {
        console.log("Draw successful.");
    }
    };
4

Here’s a working PG with your code:

3 Likes