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 = aVertexColor;
  }
</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>
<div class='wrap'>
  <canvas id="my-canvas" width="400" height="300">
    해당 브라우저는 html5 canvas element를 지원하지 않습니다.
  </canvas>
</div>

CSS

.wrap {
  text-align: center;
}

JavaScript

window.onload = initWebGL();
var gl = null,
    canvas = null,
    glProgram = null,
    fragmentShader =null,
    vertexShader = null;

var vertexPosition = null,
    triangleVerticeBuffer = null;

function initWebGL() {
  canvas = document.getElementById('my-canvas');
  try{
    gl = canvas.getContext('webgl') || 
    canvas.getContext('experimental-webgl');
  } catch (e){
  }
  
  if (gl) {
    setupWebGL();
    initShaders();
    setupBuffer();
    drawScene();
  } else {
    alert('브라우저 지원안함');
  }
  
  function setupWebGL() {
    gl.clearColor(0.1, 0.1, 0.1, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
  }
  
  function initShaders() {
   
    var vs_source = document.getElementById('shader-vs');
    var fs_source = document.getElementById('shader-fs');
    
    // 셰이더 컴파일
    vertexShader = makeShader(vs_source.innerHTML, gl.VERTEX_SHADER);
    fragmentShader = makeShader(fs_source.innerHTML, gl.FRAGMENT_SHADER);
    
    // 프로그램 생성
    // 프로그램은 vertexShader,fragmentShader 두쌍을 합쳐서 프로그램이라고 한다.
    glProgram = gl.createProgram();
    
    // 프로그램에 셰이더 첨부 및 연결
    gl.attachShader(glProgram, vertexShader);
    gl.attachShader(glProgram, fragmentShader);
    gl.linkProgram(glProgram);
    
    // 프로그램을 사용
    // WebGL이 이 프로그램을 사용가능하게함
    gl.useProgram(glProgram);
  }
  
  function setupBuffer (){
    var positionsColor = [
      1.0,  1.0, 1.0, 1.0,  //첫번째 삼각형의 정점 1
      1.0, 1.0, 1.0, 1.0,   //첫번째 삼각형의 정점 2
      -1.0, -1.0, -1.0, 1.0,//첫번째 삼각형의 정점 3
      
      0.5,  1.0, 1.0, 1.0,  //첫번째 삼각형의 정점 1
      1.0, 1.0, 0.0, 1.0,   //첫번째 삼각형의 정점 2
      0.0, 0.0, -1.0, 1.0,//첫번째 삼각형의 정점 3
      
      1.0,  1.0, -0.5, 1.0,  //첫번째 삼각형의 정점 1
      1.0, 0.7, 1.0, 1.0,   //첫번째 삼각형의 정점 2
      1.0, -0.3, -1.0, 1.0,//첫번째 삼각형의 정점 3
    ];

    positionsColorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionsColorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positionsColor), gl.STATIC_DRAW);
    
    var triangleVertices = [
        // 왼쪽...