JSFiddle - React, Tailwind, and code Playground

by emadurandal

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>canvas tutorial</title>
  </head>
  <body>
    <canvas id="world" width="640" height="480"></canvas>
    <script src="main.js"></script>
  </body>
</html>

CSS

body {
  background-color: gray;
}

JavaScript

const initWebGL = (canvasId)=> {
  const canvas = document.getElementById(canvasId);
  const gl = canvas.getContext("webgl2");
  return gl;
};

const initShaders = (gl, vertexShaderCode, fragmentShaderCode) => {
  const program = gl.createProgram();
  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(vertexShader, vertexShaderCode);
  gl.shaderSource(fragmentShader, fragmentShaderCode);
  gl.compileShader(vertexShader);
  gl.compileShader(fragmentShader);
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  gl.useProgram(program);
  gl.bindAttribLocation(program, 0, "position");
  gl.enableVertexAttribArray(0);
};

const initGeometry = (gl, positions) => {
  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
  gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
};

const gl = initWebGL('world');

const draw = () => {
  // 画面のクリアを命令する
  gl.clear(gl.COLOR_BUFFER_BIT);
 
  // 描画を命令する
  gl.drawArrays(gl.TRIANGLES, 0, 3);
    
  // ディスプレイの垂直同期に合わせた周期（60FPS以上が多い）で繰り返しdraw()を呼ぶ
  requestAnimationFrame(draw);
};



(()=>{
  // GLSLシェーダーコードを定義
  const vertexShader = 
`#version 300 es

in vec3 position;

void main() {
  gl_Position = vec4(position, 1.0);
}
  `;

  const fragmentShader = 
`#version 300 es
precision mediump float;
out vec4 outColor;

void main() {
  outColor = vec4(1.0, 0.0, 0.0, 1.0);
}
  `;

  // ポリゴン情報を定義
  var positions = [ 0.0, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -0.5, 0.0 ];

  initShaders(gl, vertexShader, fragmentShader);
  initGeometry(gl, positions);
  
  // Canvas初期化色を設定
  gl.clearColor(0, 0, 0, 1);

  // 描画の開始
  draw();
})();