diff --git a/index.html b/index.html
index f4787af..7eb660c 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,21 @@
diff --git a/src/main.ts b/src/main.ts
index 44b91bc..eb99f7a 100644
--- 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 = 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 = 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!: ");
+ }
}