WebGL 2 Guide - #3 Erste Schritte

-
In diesem Schritt werden wir uns ein Dokument anlegen und das Grundgerüst einer HTML-Seite erstellen.

Am Besten legt ihr euch einen extra Ordner für diesen Guide an.
Ich habe mir einen neuen Ordner angelegt mit dem Namen webgl-guide.

Öffnet nun den Texteditor eurer Wahl, zu empfehlen währen da folgende 3:


Ich persönlich verwende Visual Studio Code, aber jeder andere Texteditor tut es auch.
Empfehlenswert wäre jedoch, dass der Editor Codehighlighting unterstützt, da dies doch stark die Übersichtlichkeit des Codes erhöht.

Legt euch nun eine neue Datei mit dem Namen index.html an und speichert diese in eurem Ordner ab.
Nun werden wir erst einmal das Grundgerüst eines HTML-Dokuments anlegen:

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

    <body>

    </body>
</html>

Wenn ihr die Datei nun speichert und in dem Browser eurer Wahl aufruft, solltet ihre eine leere Seite sehen.

Als nächstes werden wir uns ein Canvas-Element erstellen und dieses mittels CSS umranden, damit wir erkennen können, wo sich dieser befindet:

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

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

    </head>

    <body>

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

Wir haben dem Canvas die ID: "webgl-canvas" gegeben, damit wir später per JavaScript darauf zugreifen können.
Sollte der Browser kein HTML5-Canvas unterstützen, bekommt der Besucher eurer Seite folgendes angezeigt:

Your browser does not support the HTML5 canvas element!
Please update your browser!

In dem Style-Tag haben wir per CSS dem Canvas-Element einen Style zugewiesen, in diesem Fall eine gepunktete Umrandung.

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

Es ist normalerweise nicht gängig seinen CSS-Code in das HTML-Dokument zu schreiben, in diesem Guide geht es jedoch nicht um CSS oder generelle Design Patterns, sondern um WebGL. Daher setzen wir hier nur alle notwendigen Randbedingungen um uns WebGL widmen zu können.

Ruft ihr nun diese Seite in eurem Browser auf, solltet ihr folgendes sehen können:


Dieser Canvas ist uns jedoch ein bisschen zu klein, daher lasst uns die Größe verändern.
Dies tun wir in der Zeile, in der wir das Canvas-Element erstellen, wir fügen dahinter noch width und height hinzu:

<canvas id="webgl-canvas" width="800" height="600">

Aktualisieren wir nun die Seite, haben wir einen Canvas mit der Größe 800x600:


Das sieht doch schon besser aus.




Im nächsten Schritt geht es dann an WebGL:












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