Home/ Questions/Q 8681847
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T21:36:52+00:00

I’m reading here . The initBuffers function is used to store the vertices of

  • 0

I’m reading here.
The initBuffers function is used to store the vertices of the object we need to draw into the Buffer.

var triangleVertexPositionBuffer;
var triangleVertexColorBuffer;
function initBuffers() {
    triangleVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
    var vertices = [
         0.0, 1.0, 0.0,
        -1.0, -1.0, 0.0,
         1.0, -1.0, 0.0
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    triangleVertexPositionBuffer.itemSize = 3;
    triangleVertexPositionBuffer.numItems = 3;

    triangleVertexColorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
    var colors = [
        1.0, 0.0, 0.0, 1.0,
        0.0, 1.0, 0.0, 1.0,
        0.0, 0.0, 1.0, 1.0,
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
    triangleVertexColorBuffer.itemSize = 4;
    triangleVertexColorBuffer.numItems = 3;
}

Now this is some kind of a “shape” defined for a triangle. Now, if I want shapes of all types and sizes I would have to keep a buffer like triangleVertexPositionBuffer for each shape ,right? And it has to be initialized right?

Is new buffer object for every new shape is a must?

I plan to create a system, where all kinds of shapes can be created during runtime say by using a button.
So is there a solution to this issue?
How do I create new Buffers during runtime? Is there a common already existing solution?

Will it hinder performance if I create an array of buffer objects?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    WebGl doesn’t care if you call initBuffers every frame. Well, the performance might.

    As javascript is interpreted language, the concept of runtime vs. compile time doesn’t really exist. One advanced thing however is that the shaders required by webgl can be generated from “literal” strings, generated at runtime as well as from external files and html elements.

    There are webgl-infrastructures available e.g. three.js, but I think Javascript itself is the answer.

    EDIT: About your additional question in the comment. OpenGL and WebGL works that essentially how you described, but with matrices, which are more flexible than just giving an offset to the object. Also there are ‘index-buffers’, that help sharing vertices between triangles. 

    CubeCorners = [0,0,0,   0,0,1,  0,1,0,  0,1,1,  1,0,0,  1,0,1,  1,1,0,  1,1,1 ]; 
// There are 8 corners in a cube
//              0----1  <-- vertices (aka corners, with x=0)
//             /|   /|
//            4-+--5 |
//            | 2--|-3
//            |/   |/
//            6----7 
Triangles = [0,1,2, 1,3,2, 6,4,2, 2,4,0, 5,4,7, 4,6,7,  ... + 6 other triangles ];
//
TransScaleMatrix = [X,0,0,0, 0,Y,0,0, 0,0,Z,0, ox,oy,oz,1];
// scales the object and sets an internal origin (around which object is rotated)
RotMatrix = [rx,ry,rz, 0, ux,uy,yz,0, tx,ty,tz, 0, Ox,Oy,Oz,1];
// aligns the objects orthogonal up,right,toward vectors to r,u,t, (i.e. rotates it)
// and translates it to new origin O.
CameraOrientationMatrix = [  ... ... ];
// sets cameras lookat, up and right vector + position
PerspectiveMatrix = [ ... ...];
// transforms viewing frustums 6 planes left,right,top,bottom,near and far planes
// to unit cube. (objects outside this cube are clipped away)

    With these arrays one typically renders a hierarchical scene, where vertices and objects are reused. On can place the cube not only in two different positions, but to different scale and different orientation. Then once the scene is modeled in “World coordinates”, one places the camera to some place and some orientation and applies also a perspective matrix to transform the coordinates to “clip space” that models screen coordinates x,y and depth z.

    The beauty of these matrices is that one can premultiply each of these into a single matrixthat performs everything mentioned. Or one can split this chain of operation into the best possible amount of operations, that are either calculated on the fly in shaders, or are precalculated in the vertex buffers. One should think carefully an optimal balance of reusing objects, as the bottleneck in rendering is typically the amount of drawElements/drawArray -calls and state changes (gl.useProgram) instead of the number of vertices per object.

    • 0