WebGL 2 Guide - #4 Der WebGL Context

-
Im letzten Schritt haben wir das Grundgerüst aufgesetzt um mit WebGL arbeiten zu können. In diesem Schritt werden wir den WebGL Context erstellen und überprüfen, ob der Browser WebGL unterstützt.

Dazu erstellen wir uns eine neue Datei und nennen diese main.js. Speichert diese ebenfalls in eurem Ordner ab. In unserem Ordner haben wir nun zwei Dateien: main.js und index.html.

Nun erstellen wir uns zu erst eine Funktion namens init in der main.js und holen uns die Referenz zum Canvas:

"use-strict"

function init()
{
    // Get the canvas reference
    const canvas = document.getElementById("webgl-canvas");

    // Ensure a canvas was found
    if (!canvas)
    {
        console.error("Error: no canvas found!");
        return;
    }
}

Wir speichern uns in der Variablen canvas die Referenz zum Canvas-Element im DOM und überprüfen im nächsten Schritt, ob auch ein Canvas mit der ID: "webgl-canvas" gefunden wurde. (Ihr erinnert euch an den letzen Beitrag wo wir ein Canvas-Element mit der ID: "webgl-canvas" erstellt haben...?)

// Ensure a canvas was found
if (!canvas)
{
    console.error("Error: no canvas found!");
    return;
}

Wurde keiner gefunden, bricht die Funktion mit einer Fehlermeldung in der Konsole ab.

Bevor wir nun unsere neue Funktion testen können, müssen wir sie auch aufrufen.
Dies wollen wir aber erst, wenn die Seite auch vollständig vom Browser geladen wurde.

Um die Funktion aufzurufen, wechseln wir zu unserer index.html und fügen folgende Zeilen hinzu:

Wir erweitern das Body-Tag um einen onload - Parameter:
<body onload="init()">

onload im Body-Tag stellt sicher, dass die Funktion erst aufgerufen wird, wenn die Seite vollständig geladen wurde.

Desweiteren müssen wir die main.js unserer Seite hinzufügen, das tun wir im body - Bereich der Seite mit einem script - Tag:
<script src="main.js"></script>

Unser HTML-Code in der index.html sieht nun folgendermaßen aus:

<html >
 <head>
  <meta charset="UTF-8">
  <title>WebGL Guide</title>

  <style type="text/css">
   canvas{
    border: 2px dotted black;
   }
  </style>

 </head>

 <body onload="init()">

  <script src="main.js"></script>

  <canvas id="webgl-canvas" width="800" height="600">
   Your browser does not support the HTML5 canvas element!
   Please update your browser!
  </canvas>
 </body>
</html>

Ruft die Seite index.html nun in eurem Browser auf und schaut was passiert.

Nichts....

Als Entwickler solltet ihr euch mit den Entwicklertools des Browsers vertraut machen. In Chrome könnt ihr sie mit einem Rechtsklick auf die Seite und Untersuchen aufrufen. In Firefox könnt ihr sie ebenfalls mit einem Rechtsklick auf die Seite und dann auf Element untersuchen öffnen.





Klickt anschließend auf Console um die Konsolenausgaben anzuschauen.





Schaut einmal nach ob ihr eine Fehlermeldung sehen könnt. Habt ihr alles richtig gemacht, sollte keine Fehlermeldung erscheinen.

Ändert zum testen einmal folgende Zeile ab

const canvas = document.getElementById("webgl-canvas");

Ändert die ID "webgl-canvas" in z.B.: abc
und schaut was passiert. (Vergesst die "" dabei nicht)

const canvas = document.getElementById("abc");


Es sollte nun die Fehlermeldung: "Error: no canvas found!" in der Konsole erscheinen.






Ändert nun "abc" wieder in "webgl-canvas" ab.

Als nächstes holen wir uns den WebGL Context.
Wechselt dazu wieder in eure main.js und fügt folgende Zeilen hinzu:

// Get the WebGL context
const gl = canvas.getContext("webgl2")

// Ensure context was found
if (!gl)
{
    console.error("WebGL is not available!");
    return;
}

Die main.js sieht nun wie folgt aus:

"use-strict"

function init()
{
    // Get the canvas reference
    const canvas = document.getElementById("webgl-canvas");

    // Ensure a canvas was found
    if (!canvas)
    {
        console.error("Error: no canvas found!");
        return;
    }

    // Get the WebGL context
    const gl = canvas.getContext("webgl2")

    // Ensure context was found
    if (!gl)
    {
        console.error("WebGL is not available!");
        return;
    }
}

Ruft nun wieder die Seite im Browser auf und schaut in der Konsole nach, ob auch alles funktioniert hat. Die Fehlermeldung WebGL is not available! sollte nicht in der Konsole erscheinen.
Sollte diese Meldung doch erscheinen, dann unterstützt der Browser WebGL nicht. Es ist anzuraten, den Browser zu updaten.

Wir haben nun eine neue Variable gl erstellt in der wir die Reference zum WebGL-Context gespeichert haben.



Im nächsten Schritt werden wir nun endlich erste WebGL Befehle kennen lernen:

WebGL 2 Guide - #5 Erste WebGL Befehle

Comments

Post a Comment

Popular posts from this blog

[Python] Machine Learning Intro #1 - Hello World

-
Image
The Machine Learning Intro series is going to be a series about Machine Learning and will cover the very basics of what Machine Learning actually is and how to implement it using Python. What is SciKit-Learn? SciKit-Learn is a Python module for Machine Learning. It provides simple and efficient tools for data mining, data analysis and various classification, regression and clustering algorithms. So in short - it makes our lives a lot easier dealing with Machine Learning, because we don't have to write all those algorithms by hand. And that's why we will use it here. What is Machine Learning? You can think of it as a subfield of Artificial Intelligence (AI). The algorithm learns from experience and examples - like a human does. So with Machine Learning, you can solve problems you couldn't solve with regular hard coded rules. For example, given the case, you have to write a program that takes images of apples and oranges as input and then it has to
Read more

[Python] Passwort cracker for Zip-archives

-
Image
Do you have a zip-file with a password and you can't remember it? Then let's write a little tool, that tries to recover it. Disclaimer: "Cracking passwords and getting access to files of others without their permission is criminal! This blog post is only for illustrative purposes, to get an insight of how an hacker would probably do it, so you know how to protect yourself against it. This blog post is not meant to seduce you in any way to use it for criminal purposes! So i don't take any responsibility if you use it for criminal purposes, nor do i take any responsibility for the consequences which arise from it. Also, the authors of the linked pages are responsible for their sites and their content, so i don't take any responsibility for that." So, that being said, let's begin. The dictionary attack There are several ways to crack a password, however we will discuss only one of them, the dictionary attack. How does it work? It
Read more

WebGL 2 Guide - #1 Einführung

-
Image
Hintergrund Dieser Guide ist als Referenz gedacht und soll einen Einblick in WebGL 2 geben. Ich beziehe mich hier auf WebGL 2 und ESSL 3.00 welches auf OpenGL ES basiert. WebGL 1 ist veraltet und sollte nicht mehr verwendet werden. Zudem werde ich hier den ES6 -Standard verwenden. Warum WebGL 2 Warum nicht ein Framework/Engine verwenden in der man schneller und einfacher zum Ziel kommt und sich stattdessen mit so einer Low-Level-API auseinander setzen? Sicherlich kommt man mit einem Framework oder einer Engine schneller zum Ziel, jedoch werden dort viele interne Abläufe vor dem Anwender versteckt, bei denen es von Vorteil wäre, diese zu verstehen, bzw. von ihrer Existenz überhaupt zu wissen. Voraussetzungen Um optimalen Nutzen aus diesem Guide zu ziehen, solltest du einige Dinge mitbringen: Grundlegendes Verständnis der Programmierung (Da WebGL, wäre JavaScript von Vorteil) Mathematische Kenntnisse (Vektoren und Matrizen sind elementare Bestandteile der
Read more