Re-arrange

student2019/201520889/Readme.md

+# 기말과제 WebGL Tutorial 만들기
+(CC-NC-BY) 2019 Mingi Kim
+
+마우스 입력을 이용하는 방법을 알아봤다.
+
+Primitive Assembly를 사용한다.
+
+Bayseian Curve를 그려본다.
+
+## 목표
+
+마우스를 이용해서 점을 찍어보며 여러 형태의 Primitive Assembly를 좀더 쉽게 만들어 볼 수 있도록 했습니다.
+vertex의 색상을 정하며 interpolate되는 것을 확인해 볼 수 있습니다.
+
+마우스를 이용해서 점을 찍어보며 Bayseian Curve를 쉽게 만들어 볼 수 있도록 했습니다.
+Bayseian 커브를 다양하게 만들어보며 특징을 배울 수 있습니다.
+
+## 구현 결과
+
+![](assembly.png)
+
+마우스 클릭으로 캔버스 위를 클릭하면 Point Num이 증가하고 Points Stack 에 클릭한 점의 좌표가 표시됩니다. 캔버스에 Assembly가 만들어져서 반영됩니다.
+
+색상 버튼을 눌러서 색상을 정해 줄 수 있습니다.
+
+clear 버튼을 누르면 Points Stack 이 초기화 되고 canvas에 있던 Assembly가 사라집니다.
+
+P/L/T 버튼을 누르면 Assembly Type을 바꿀 수 있습니다.
+
+![](bayesian.png)
+
+마우스 클릭으로 캔버스 위를 클릭하면 점을 만들 수 있습니다. 파란 점은 시작점과 끝점을 나타내고 빨간점 두 개는 컨트롤 포인트 입니다.
+4개의 점을 만들고 나면 bayesian 버튼을 눌러서 커브를 그릴 수 있습니다. 
+
+Clear Curve 버튼을 누르면 커브를 지울 수 있습니다.
+
+
+## tutorial
+
+따라 해볼 수 있는 튜토리얼을 만들어서 사용법을 쉽게 익히고 학습 효과를 높이고자 했습니다.
+
+### Primitive Assembly Tutorial
+![](tutorial0.png)
+
+### Bayesian Curve Tutorial
+![](tutorial1.png)
\ No newline at end of file

student2019/201520889/WebGLHelloAPI.js

+// WebGL 1.0 Tutorial - Mouse Events Primitive Assembly 
+// CC-NC-BY Mingi Kim
+
+var gl;
+function testGLError(functionLastCalled) {
+    var lastError = gl.getError();
+
+    if (lastError != gl.NO_ERROR) {
+        alert(functionLastCalled + " failed (" + lastError + ")");
+        return false;
+    }
+    return true;
+}
+
+function initialiseGL(canvas) {
+    try {
+        // Try to grab the standard context. If it fails, fallback to experimental
+        initEventHandlers(canvas, mouse);
+        gl = canvas.getContext("webgl")
+            || canvas.getContext("experimental-webgl");
+        gl.viewport(0, 0, canvas.width, canvas.height);
+    }
+    catch (e) {
+    }
+
+    if (!gl) {
+        alert("Unable to initialise WebGL. Your browser may not support it");
+        return false;
+    }
+
+    return true;
+}
+
+var shaderProgram;
+var vertexData = [];
+
+function initialiseBuffer() {
+    // Generate a buffer object
+    gl.vertexBuffer = gl.createBuffer();
+
+    // Bind buffer as a vertex buffer so we can fill it with data
+    gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
+
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
+    return testGLError("initialiseBuffers");
+}
+
+function initialiseShaders() {
+    var fragmentShaderSource = '\
+			varying highp vec4 color; \
+			void main(void) \
+			{ \
+				gl_FragColor = color; \
+			}';
+    gl.fragShader = gl.createShader(gl.FRAGMENT_SHADER);
+    gl.shaderSource(gl.fragShader, fragmentShaderSource);
+    gl.compileShader(gl.fragShader);
+    var vertexShaderSource = '\
+			attribute highp vec4 myVertex; \
+			attribute highp vec4 myColor; \
+			uniform mediump mat4 transformationMatrix; \
+			varying highp vec4 color; \
+			void main(void)  \
+			{ \
+				gl_Position = transformationMatrix * myVertex; \
+				color = myColor; \
+			}';
+
+    // Create the vertex shader object
+    gl.vertexShader = gl.createShader(gl.VERTEX_SHADER);
+
+    // Load the source code into it
+    gl.shaderSource(gl.vertexShader, vertexShaderSource);
+
+    // Compile the source code
+    gl.compileShader(gl.vertexShader);
+
+    // Check if compilation succeeded
+    if (!gl.getShaderParameter(gl.vertexShader, gl.COMPILE_STATUS)) {
+        // It didn't. Display the info log as to why
+        alert("Failed to compile the vertex shader.\n" + gl.getShaderInfoLog(gl.vertexShader));
+        return false;
+    }
+
+    // Create the shader program
+    gl.programObject = gl.createProgram();
+
+    // Attach the fragment and vertex shaders to it
+    gl.attachShader(gl.programObject, gl.fragShader);
+    gl.attachShader(gl.programObject, gl.vertexShader);
+
+    // Bind the custom vertex attribute "myVertex" to location 0
+    gl.bindAttribLocation(gl.programObject, 0, "myVertex");
+
+    // Link the program
+    gl.linkProgram(gl.programObject);
+
+    // Check if linking succeeded in a similar way we checked for compilation errors
+    if (!gl.getProgramParameter(gl.programObject, gl.LINK_STATUS)) {
+        alert("Failed to link the program.\n" + gl.getProgramInfoLog(gl.programObject));
+        return false;
+    }
+
+    gl.useProgram(gl.programObject);
+
+    return testGLError("initialiseShaders");
+}
+
+var modeName = ["Triangle", "Point", "Line"];
+
+var modePLT = 0;
+function changeModePLT() {
+    modePLT++;
+    modePLT %= 3;
+    document.getElementById("idPLT").innerHTML = modeName[modePLT];
+}
+
+var rot_z = 0.0;
+
+function renderScene() {
+
+    gl.clearColor(0.2, 0.2, 0.2, 1.0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    var matrixLocation = gl.getUniformLocation(gl.programObject, "transformationMatrix");
+
+    // Matrix used to specify the orientation of the triangle on screen
+    var transformationMatrix = [
+        1.0, 0.0, 0.0, 0.0,
+        0.0, 1.0, 0.0, 0.0,
+        0.0, 0.0, 1.0, 0.0,
+        0.0, 0.0, 0.0, 1.0
+    ];
+
+
+    // Pass the identity transformation matrix to the shader using its location
+    gl.uniformMatrix4fv(matrixLocation, gl.FALSE, transformationMatrix);
+
+    if (!testGLError("gl.uniformMatrix4fv")) {
+        return false;
+    }
+
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 28, 0);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 4, gl.FLOAT, gl.FALSE, 28, 12);
+
+    if (!testGLError("gl.vertexAttribPointer")) {
+        return false;
+    }
+
+    var pointNum = vertexData.length / 7;
+    if (modePLT == 0)
+        gl.drawArrays(gl.TRIANGLES, 0, pointNum);
+    else if (modePLT == 1)
+        gl.drawArrays(gl.POINTS, 0, pointNum);
+    else
+        gl.drawArrays(gl.LINES, 0, pointNum);
+
+    if (!testGLError("gl.drawArrays")) {
+        return false;
+    }
+
+    return true;
+}
+
+var mouse = [250, 250];
+var mouseRadius = 10;
+var pointsClicked = [];
+
+var clickedPointNum = 0;
+function initEventHandlers(canvas, mousePosition) {
+    var dragging = false;
+
+    canvas.onmousedown = function (ev) {  //Mouse is pressed
+        clickedPointNum++;
+        document.getElementById("pointnum").innerHTML = "Point Num:"+clickedPointNum;
+
+        var x = ev.clientX;
+        var y = ev.clientY;
+
+        var rect = ev.target.getBoundingClientRect();
+
+        var centerX = (rect.right - rect.left) / 2;
+        var centerY = (rect.bottom - rect.top) / 2;
+
+        if (rect.left <= x && x <= rect.right 
+            && rect.top <= y && y <= rect.bottom
+       ) {
+            mousePosition[0] = x;
+            mousePosition[1] = rect.bottom - y;
+            dragging = true;
+
+            px = (mousePosition[0] - centerX) / centerX;
+            py = (mousePosition[1] - centerY) / centerY;
+            color = document.getElementById("colorInput").value
+            // #XXXXXX -> ["XX", "XX", "XX"]
+            var color = color.match(/[A-Za-z0-9]{2}/g);
+
+            // ["XX", "XX", "XX"] -> [n, n, n]
+            color = color.map(function(v) { return parseInt(v, 16) / 255 });
+            pointsClicked.push(px, py, 0., color[0], color[1], color[2], 1.);
+            ps = "" + px + ", " + py+ "</br>";
+            document.getElementById("AllPoints").innerHTML += ps;
+            pushPoints2vertexData()
+        }
+    };
+
+
+    canvas.onmouseup = function (ev) { //Mouse is released
+        dragging = false;
+    }
+
+    canvas.onmousemove = function (ev) { //Mouse is moved
+    }
+}
+
+function pushPoints2vertexData() {
+    vertexData = vertexData.concat(pointsClicked);
+    pointsClicked = [];
+    initialiseBuffer()
+}
+
+function clearVertexData() {
+    vertexData = [];
+    pointsClicked = [];
+    clickedPointNum = 0;
+    document.getElementById("pointnum").innerHTML = ""+clickedPointNum;
+    document.getElementById("AllPoints").innerHTML = "";
+    initialiseBuffer();
+}
+
+function main() {
+    var canvas = document.getElementById("helloapicanvas");
+
+    if (!initialiseGL(canvas)) {
+        return;
+    }
+
+    if (!initialiseBuffer()) {
+        return;
+    }
+
+    if (!initialiseShaders()) {
+        return;
+    }
+
+    // Render loop
+    requestAnimFrame = (function () {
+        return window.requestAnimationFrame ||
+            window.webkitRequestAnimationFrame ||
+            window.mozRequestAnimationFrame ||
+            function (callback) {
+                window.setTimeout(callback, 1000, 60);
+            };
+    })();
+
+    (function renderLoop() {
+        if (renderScene()) {
+            // Everything was successful, request that we redraw our scene again in the future
+            requestAnimFrame(renderLoop);
+        }
+    })();
+    doBayesian();
+}