let opengl print an triangle

2020-01-21 20:37:48 +01:00
parent 8aaf31c114
commit 1c6a499127
2 changed files with 142 additions and 11 deletions
--- a/index.html
+++ b/index.html
@@ -2,6 +2,21 @@
 <html>
    <header>
        <title>Web Ocean</title>
+        <script id="shader-fs" type="x-shader/x-fragment"> 
+            precision mediump float;
+        
+            void main(void) {
+                gl_FragColor = vec4(0.6,0.6,0.6,1.0);
+            }
+        </script> 
+         
+        <script id="shader-vs" type="x-shader/x-vertex"> 
+            attribute vec3 positionAttr;
+         
+            void main(void) {
+                gl_Position = vec4(positionAttr, 1.0);
+            }
+        </script> 
    </header>
    <body>
        <canvas id="window" width="800" height="600" style="margin:0 auto; border: solid #000000 1px; display:block;"></canvas>
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,23 +1,139 @@
+var gl: WebGLRenderingContext;
+var viewportWidth = 0;
+var viewportHeight = 0;
+
 main();

+function initGL(canvas: HTMLCanvasElement) {
+    var gltemp;
+    try {
+        gltemp = canvas.getContext("webgl");
+        if (!gltemp)
+            gltemp = canvas.getContext("experimental-webgl");
+        if (gltemp != null) {
+            viewportWidth = canvas.width;
+            viewportHeight = canvas.height;
+        }
+
+    } catch (e) {
+    }
+    // Not the best error detection logic.
+    // Redirect to http://get.webgl.org in failure case.
+    if (gltemp == null) {
+        alert("Unable to initialize WebGL. Your browser or machine may not support it.");
+    }
+    gl = <WebGLRenderingContext>gltemp;
+}
+
+function initGeometry() {
+    let VBO = gl.createBuffer();
+    let vertexData = [-0.5, -0.5, 0.0,
+        0.5, -0.5, 0.0,
+        0.0, 0.5, 0.0];
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
+    return VBO;
+}
+
+function getShader(id: string) {
+    var script: any = document.getElementById(id);
+    if (!script) {
+        console.log("Coudln't get shader source from HTML!");
+        return null;
+    }
+
+    var shader: WebGLShader | null;
+    if (script.type == "x-shader/x-fragment") {
+        shader = gl.createShader(gl.FRAGMENT_SHADER);
+    } else if (script.type == "x-shader/x-vertex") {
+        shader = gl.createShader(gl.VERTEX_SHADER);
+    } else {
+        console.log("Script type is wrong!");
+        return null;
+    }
+
+    if (shader == null) {
+        console.log("Cannot create Shaders!")
+        return null;
+    }
+
+    gl.shaderSource(shader, script.text);
+    gl.compileShader(shader);
+
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        alert(gl.getShaderInfoLog(shader));
+        return null;
+    }
+
+    return shader;
+}
+
+function initShaders() {
+    var vertexShader = getShader("shader-vs");
+    var fragmentShader = getShader("shader-fs");
+
+    if (vertexShader == null || fragmentShader == null) {
+        console.log("Didn't find shader sources!")
+        return null;
+    }
+
+    let program: WebGLProgram | null = gl.createProgram();
+    if (program == null) {
+        console.log("Program not created!")
+        return null
+    }
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        alert("Could not initialise shaders");
+    }
+
+    gl.useProgram(program);
+
+    let positionAttr = gl.getAttribLocation(program, "positionAttr");
+    gl.enableVertexAttribArray(positionAttr);
+
+    return program;
+}
+
+function drawScene(buffer: WebGLBuffer, program: WebGLProgram) {
+    gl.viewport(0, 0, viewportWidth, viewportHeight);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+
+    // There are 7 floating-point values per vertex
+    var stride = 3 * Float32Array.BYTES_PER_ELEMENT;
+
+    // Set up position stream
+    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, 0);
+    gl.enableVertexAttribArray(0);
+
+    gl.useProgram(program);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+}
+
 function main() {
    const canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("window");
-    const gl = canvas.getContext("webgl");

-    if (!gl) {
-        alert("Unable to initialize WebGL. Your browser or machine may not support it.");
-        return;
-    }
-
-    let vertices = [ -0.5, -0.5, 0.0, 
-                    0.5, -0.5, 0.0,
-                    0.0, 0.5, 0.0];
-
-    console.log(vertices);
+    initGL(canvas);
+    let shaderProgram = initShaders();
+    let triangleVBO = initGeometry();


    // Setze clear color auf schwarz, vollständig sichtbar
    gl.clearColor(0.0, 1.0, 0.0, 1.0);
    // Lösche den color buffer mit definierter clear color
    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    if (triangleVBO != null && shaderProgram != null) {
+        drawScene(triangleVBO, shaderProgram);
+    }
+
+    if(gl.getError() != gl.NO_ERROR) {
+        console.log("OpenGL Error!: ");
+    }
 }