Question about simple triangle rendering

[CGenie]

Hello,

I have this line of code:

https://git.sr.ht/~cgenie/webgl-tests/tree/master/item/hello-world/src/index.js#L97

This works and renders 2 triangles. However I tried hard and couldn't render only 1 triangle with

 position: [0, 0,
                0, 0.5,
                0.7, 0]

I tried manipulating numComponents and the count parameter in twgl.drawBufferInfo here https://git.sr.ht/~cgenie/webgl-tests/tree/master/item/hello-world/src/index.js#L124.

[greggman]

Here's working code:

import * as twgl from 'https://twgljs.org/dist/5.x/twgl-full.module.js';

function renderTriangle(el) {
  const vs = `
attribute vec4 position;

void main() {
  gl_Position = position;
}
`;

  const fs = `
precision mediump float;

void main() {
  // gl_FragColor is a special variable a fragment shader
  // is responsible for setting
  gl_FragColor = vec4(1, 0, 0.5, 1); // return redish-purple
}
`;

  const gl = twgl.getWebGLContext(el);
  const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

  const arrays = {
    position: {
      numComponents: 2,
      data: [
        0, 0,
        0, 0.5,
        0.7, 0,
     ],
    }
  };

  gl.clearColor(0, 0, 0, 0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);
  // const positionAttributeLocation = gl.getAttribLocation(programInfo.program, "position");

  twgl.resizeCanvasToDisplaySize(gl.canvas);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

  gl.useProgram(programInfo.program);
  // gl.enableVertexAttribArray(positionAttributeLocation);
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  // gl.vertexAttribPointer(
  //   positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
  twgl.drawBufferInfo(gl, bufferInfo, gl.TRIANGLES, 3, 0);
  // gl.drawArrays(gl.TRIANGLES, 0, 3);
}
renderTriangle(document.getElementById('c2'));

Live: https://jsgist.org/?src=4f95e62f8d18a568856dbc45462675ce

All I had to do was change the this 6

  twgl.drawBufferInfo(gl, bufferInfo, gl.TRIANGLES, 6, 0);

to a 3

  twgl.drawBufferInfo(gl, bufferInfo, gl.TRIANGLES, 3, 0);

normally I'd leave it off

  twgl.drawBufferInfo(gl, bufferInfo);

gl.TRIANGLES is the default and if you don't pass a count it will take it from bufferInfo.numElements wi

[greggman]

note: I'd suggest adding webgl-lint to your page

import 'https://greggman.github.io/webgl-lint/webgl-lint.js';

I think it would have reported this issue

[CGenie]

Splendid, this works, thank you! I added webgl-lint already to index.html but didn't get any info and a blank canvas.

[greggman]

did you look at the JavaScript console?

[greggman]

If I change it back to 6 and I have webgl-lint I see this error

Uncaught Error: https://greggman.github.io/webgl-lint/webgl-lint.js:3072: error in drawArrays(TRIANGLES, 0, 6): WebGLBuffer("*UNTAGGED:Buffer1*") assigned to attribute 0 used as attribute 'position' in current program is too small for draw parameters.
index of highest vertex accessed: 5
attribute size: 2, type: FLOAT, stride: 0, offset: 0, divisor: 0
needs 48 bytes for draw but buffer is only 24 bytes
with WebGLProgram("*UNTAGGED:Program1*") as current program
with the default vertex array bound
    at reportError (webgl-lint.js:2197:15)
    at reportFunctionError (webgl-lint.js:2976:7)
    at ctx.<computed> [as drawArrays] (webgl-lint.js:3072:13)
    at Module.drawBufferInfo (twgl-full.module.js:8952:10)
    at renderTriangle (user-jsgist.html:74:8)
    at user-jsgist.html:77:1

[CGenie]

Yes, however I just set position: [0, 0, 0, 0.5, 0.7, 0] and then it didn't warn about anything and didn't draw the triangle. I guess the default number of components is 4 in that case since position has type vec4.

[greggman]

the default `numComponents` is 3 for an array named "position". it doesn't have the info that position is a vec4. That info is not passed to createBufferInfoFromArrays and further it's irrelevant. You can use `numComponents` 1, 2, or 3 with a vec4 attribute. vec4 attributes default to 0,0,0,1 and whatever parts you don't provide will be set to those values As for why 3, see docs on how it guesses the numComponents https://twgljs.org/docs/module-twgl.html#.Arrays

[munrocket]

Here TWGL.js example with colored triangle and comments https://jsfiddle.net/k68vw4x3/1/

[CGenie]

OK thank you! I would actually appreciate at least one example of flat 2D graphics without animation, on the twgl site :) It would be useful for noobs like me :)