MENU

    WebGL 2.0 Fundamental – Triangle

    0
    664
    0
    code, webgl

    I draw a 2D triangle on the 3D world by using pure WebGL 2.0 API.
    Play on CodeSandbox: https://codesandbox.io/s/webgl-fundamental-triangle-whpn0
    More fascinating models will come soon…

    index.html

    <!DOCTYPE html>
<html>
  <head>
    <title>WebGL Fundamental</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <canvas id="c"></canvas>
    </div>

    <script src="https://webgl2fundamentals.org/webgl/resources/webgl-utils.js"></script>
    <script src="src/index.js"></script>
  </body>
</html>

    src/index.js

    import "./styles.css";

const vertexShaderSource = `#version 300 es
  in vec4 a_position;

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

const fragmentShaderSource = `#version 300 es
  precision highp float;

  out vec4 outColor;

  void main() {
    outColor = vec4(1, 0, 0.5, 1);
  }
`;

function createShader(gl, type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  if (success) {
    return shader;
  }

  console.log(gl.getShaderInfoLog(shader));
  gl.deleteShader(shader);
}

function createProgram(gl, vertextShader, fragmentShader) {
  const program = gl.createProgram();
  gl.attachShader(program, vertextShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);

  const success = gl.getProgramParameter(program, gl.LINK_STATUS);
  if (success) {
    return program;
  }

  console.log(gl.getProgramInfoLog(program));
  gl.deleteProgram(program);
}

function main() {
  const canvas = document.querySelector("#c");
  var gl = canvas.getContext("webgl2");
  if (!gl) {
    return;
  }

  const vertextShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
  const fragmentShader = createShader(
    gl,
    gl.FRAGMENT_SHADER,
    fragmentShaderSource
  );

  const program = createProgram(gl, vertextShader, fragmentShader);

  const positionAttributeLocation = gl.getAttribLocation(program, "a_position");

  const positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  const positions = [0, 0, 0, 0.5, 0.7, 0];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

  const vao = gl.createVertexArray();
  gl.bindVertexArray(vao);

  gl.enableVertexAttribArray(positionAttributeLocation);

  const size = 2;
  const type = gl.FLOAT;
  const normalize = false;
  const stride = 0;
  let offset = 0;
  gl.vertexAttribPointer(
    positionAttributeLocation,
    size,
    type,
    normalize,
    stride,
    offset
  );

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

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

  gl.useProgram(program);
  gl.bindVertexArray(vao);

  const primitiveType = gl.TRIANGLES;
  offset = 0;
  const count = 3;
  gl.drawArrays(primitiveType, offset, count);
}

main();

    src/styles.css

    @import url("https://webgl2fundamentals.org/webgl/resources/webgl-tutorials.css");
body {
  margin: 0;
}

canvas {
  width: 100vw;
  height: 100vh;
  display: block;
}

    Sorry, the comment form is closed at this time.