JSFiddle - React, Tailwind, and code Playground

by shs400

HTML

<script id="shader-vs" type="x-shader/x-vertex">
  attribute vec4 aVertexPosition;
  attribute vec4 aVertexColor;
  varying vec4 v_color;
  void main(void) {
    gl_Position = aVertexPosition;
    v_color = gl_Position * 0.5 + 0.5;
  }
</script>
<script id="shader-fs" type="x-shader/x-fragment">
  precision mediump float;
  varying vec4 v_color;
  void main(void) {
    gl_FragColor = v_color;
  }
</script>
<body onload="initWebGL()">
<div class='wrap'>
  <canvas id="my-canvas" width="400" height="300">
    해당 브라우저는 html5 canvas element를 지원하지 않습니다.
  </canvas>
</div>
</body>

CSS

.wrap {
  text-align: center;
}

JavaScript

var gl = null,
      canvas = null,
      glProgram = null,
      fragmentShaderSource = null,
      verTextShaderSource = null,
      positionAttributeLocation = null,
      colorAttributeLocation = null,
      positionsColorBuffer = null,
      angle = 0.0;

    function initWebGL() {
      canvas = document.getElementById('my-canvas');
      try{
        gl = canvas.getContext('webgl') || canvas.getContext("experimental-webgl");
      }catch (e){
      }

      if (gl) {
        initShader();
        setupBuffers();
        (function animLoop(){
          setupWebGL();
          setupDynamicBuffers();
          drawScene();
          requestAnimationFrame(animLoop, canvas);
        })();
      } else {
        alert('브라우저가 지원안함');
      }

      function setupWebGL() {
        gl.clearColor(0, 0, 0, 1);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.viewport(0, 0, canvas.width, canvas.height);
      }


      function initShader() {
        verTextShaderSource = makeShader(gl, 'shader-vs');  // 색상 계산
        fragmentShaderSource = makeShader(gl, 'shader-fs');  // 위치계산

        glProgram = gl.createProgram();
        // 프로그램에 셰이더를 첨부하고 연결
        gl.attachShader(glProgram, verTextShaderSource);
        gl.attachShader(glProgram, fragmentShaderSource);
        gl.linkProgram(glProgram); // 프로그램 연결

        // 프로그램을 사용
        gl.useProgram(glProgram);  // WebGL이 이 프로그램을 사용가능하게함
      }

      function setupBuffers() {
      }

      function setupDynamicBuffers() {
        var x_translation = Math.sin(angle)/2.0;
        
        var positionsColor = [
          -0.5 + x_translation,  0.5 + x_translation, //첫번째 삼각형의 정점 1
          -0.5 + x_translation, -0.5 + x_translation, //첫번째 삼각형의 정점 2
          0.5 + x_translation, -0.5 + x_translation, //첫번째 삼각형의 정점 3
        ];

        positionsColorBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, positionsColorBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positionsColor),...