In OpenGL, I use C++ vectors for buffers that hold the triangle data. How does one replace the trusty vector in WebGL? I am familiar with Javascript and the DOM, but not WebGL.

It's just using js arrays. :-)

It's quite easy to get started with too.

I have some local ts with a bunch of scaffolding, webpack stuff and convenience modules I'll never use,
but perhaps @8observer8 has some good examples that are more to the point (or know of some good resources)

Until then, check out gl.bufferData in this example on MDN.

Thanks for your guidance. ?

P.S. That MDN example is PERFECT.

I like that we have a question about WebGL here. Make more topics about it.

See my examples how to draw a triangle:

• Triangle. WebGL 1.0, JavaScript (ES5)
• Triangle. glMatrix, WebGL, TypeScript

As you can see I use Float32Array to store vertex data like vertex positions:

      var vertexPositions = new Float32Array([
        -0.5, -0.5, 0.0,
        0.5, -0.5, 0.0,
        0.0, 0.5, 0.0
      ]);

      var vertexPosBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, vertexPositions, gl.STATIC_DRAW);

Second example (in TypeScript) shows how to use glMatrix library for matrices, vectors and so on for scale, rotation and movement of objects.

WebGL is awesome. It allows to run games in one click on any platform and allows to embed games into Facebook, Vk (Russian Facebook) and so on. WebGL and JavaScript (or TypeScript) are not difficult for beginners. I want to create a mini game with cooperative (or multiplayer) using WebSockets that based on extracted models and animations from original Resident Evil game. Let's create more topics about WebGL, study, and practice with it together.

I extracted the original Jill's model and the animations for that model using the RE2MV program. You can run it in your browser: https://8observer8.github.io/webgl10-ts/jill-parts/index.html​

I give you some useful examples for the future:

• Textured Rectangle with Transforms using ES5, WebGL 1.0, glMatrix
• Textured Rectangle with Transforms. WebGL 1.0, TypeScript
• Texture Movement. WebGL 1.0, TypeScript

My favorite book is WebGL Programming Guide. You can run examples from the book in JSFiddle: https://gist.github.com/8Observer8/444fb31157fb99ca0a99eb13f2652341

Thanks so much for the links and the discussion!

By the way, for the record: when I want to add to a vector in C++ I use the push_back function. What’s the equivalent when using JavaScript?

i won’t really be delving into WebGL in the foreseeable future, so I won’t be making topics about it. :( I am just curious.

taby said:

Thanks so much for the links and the discussion!

By the way, for the record: when I want to add to a vector in C++ I use the push_back function. What’s the equivalent when using JavaScript?

It's .push()