JSFiddle - React, Tailwind, and code Playground

by shs400

HTML

<script id="shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition;
  void main(void) {
    gl_Position = vec4(aVertexPosition, 1.0);
  } 
// attribute : 셰이더 변수 종류(attribute | uniform | varying)
// vec3 : 배열 타입, vec3는 3행 배열
// aVertexPosition : 배열 이름, 한 개의 버텍스를 나타낸다. 관습적으로 맨 앞에 a를 붙여서 attribute임을 표시
  // 우리가 넘겨줄 (x,y,z) 정점을 받아서
  // 최종위치를 (x,y,z,1,0) 으로 설정
</script>
<script id="shader-fs" type="x-shader/x-fragment">
  void main(void) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
  }
  // 자신이 넘겨받을 프래그먼트를 흰색(1.0, 1.0, 1.0, 1.0)으로 설정
</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.5, 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 triangleVertices = [
        // 왼쪽 삼각형
        -0.5, 0.5, 0.0,
         0.0, 0.0, 0.0,
        -0.5, -0.5, 0.0,

        // 오른쪽 삼각형
        0.5, 0.5, 0.0,
        0.0, 0.0, 0.0,
        0.5, -0.5, 0.0
      ];
    // 공간 좌표 (x,y,z)이고 값은 캔버스 크기로부터 -1~1 까지 표현된다.
    triangleVerticeBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticeBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW
    );
  }
  
  function drawScene (){
    vertexPositionAttribute = gl.getAttribLocation(glProgram, "aVertexPosition");
    gl.enableVertexAttribArray(vertexPositionAttribute);
   ...