So you've heard about WebGL? It’s become sort of a buzzword in the web development community. Some great 3D demos have been released, some security concerns have been raised, and a heated discussion started. This tutorial by interactive developer Bartek Drozdz takes you right to the heart of WebGL and will help you understand how it works. Prepare your favourite JS editor and buckle your seats! The first encounter with WebGL can be intimidating. The API has nothing of the friendly object-oriented libraries you might have used. WebGL is based on OpenGL, which is a rather old type C-style library. It features a long list of functions used to set different states and pass data to the GPU. All of this is described in the official specification. This document is not intended for beginners, thought it will be very useful once you start to find your way around the API. But fear not: with a good approach all of this can be tamed, and soon you’ll start to feel comfortable! One common misconception about WebGL is that it’s some sort of 3D engine or API. While WebGL has in fact a lot of features that will help you develop 3D applications, in itself it is not 3D. It's much better to think of WebGL as of a drawing API that gives you access to hardware accelerated graphics. Drawing a squareIn this tutorial we'll focus on understanding how WebGL works by drawing a simple 2D shape. But first things first. Before we write any code, we need to create an HTML document to hold it. <html>
<head>
<script id="vertex" type="x-shader"></script>
<script id="fragment" type="x-shader"></script>
<script type="text/javascript">
function init(){
}
</script>
</head>
<body onload="init()">
<canvas id="mycanvas" width="800" height="500"></canvas>
</body>
</html>Apart from the usual HTML stub, the document has a few things specific to WebGL. First of all we define two script tags that instead of JavaScript will host shader code. Shaders are a central feature of WebGL and we’ll come back to them later on.
Read more: .NET beta
QR:
<head>
<script id="vertex" type="x-shader"></script>
<script id="fragment" type="x-shader"></script>
<script type="text/javascript">
function init(){
}
</script>
</head>
<body onload="init()">
<canvas id="mycanvas" width="800" height="500"></canvas>
</body>
</html>Apart from the usual HTML stub, the document has a few things specific to WebGL. First of all we define two script tags that instead of JavaScript will host shader code. Shaders are a central feature of WebGL and we’ll come back to them later on.
Read more: .NET beta
QR:
Posts
0 comments:
Post a Comment