Första steget - Initialisera WebGL

Detta är en tutorial för att komma igång med WebGL. Vi kommer sätta upp en rityta och förbereda för rendering. Ha inte för höga förhoppningar på detta steg då vi inte kommer visa annat än en 640x480 pixlar stor och svart yta. Det första vi gör är att skapa en html-fil med ett canvas-element.


<!DOCTYPE html>

<html>

    <head>

        <title>Första steget - Initialisera WebGL</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    </head>

    <body onload="start();">

        <canvas id="webgl-canvas" width="640" height="480">

            Din webbläsare har inte stöd för canvas-elementet i HTML5. Ladda ner en modernare webbläsare.

        </canvas>

    </body>

</html>

Nu har vi förberett vår sida med lite HTML. Som du ser har vi ett canvas-element som är 640x480 pixlar stor och med id webgl-canvas. Texten i vårat canvas-element kommer endast visas för webbläsare som inte har stöd för canvas. Vi har även lagt in ett anrop mot en funktion som vi kallar "start". Dags att skapa vår start()-funktion.


<script type="text/javascript">

    var gl;



    function start()

    {

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



        initWebGL( canvas );



        if( gl )

        {

            gl.clearColor( 0, 0, 0, 1 );

            gl.clearDepth( 1 );

            gl.enable( gl.DEPTH_TEST );

            gl.depthFunc( gl.LEQUAL );

            gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );

        }

    }

</script>

Först och främst sätter vi variabeln "canvas" till vårat canvas-element. Därefter anropar vi en funktion vi kallar "initWebGL". initWebGL kommer, som namnet antyder, att initialisera WebGL. Alltså skapa en referens till WebGL och dess funktioner eller skriva ut till användaren att din webbläsare har minsann inte stöd för WebGL. Den funktionen skapar vi lite senare.

Som vi ser i if-satsen kommer vi endast göra detta om initWebGL har lyckats.

gl.clearColor( 0, 0, 0, 1 ): När vi rensar vår canvas på innehåll vill vi sätta en bakgrundsfärg till svart. Detta gör vi genom att skicka parametrar i RGB-format tillsammans med en opacitet på slutet. Alltså: gl.clearColor( R, G, B, Opacitet ).

gl.clearDepth( 1 ): Vi vill även rensa bort allt i vår canvas. Inte bara en färg.

gl.enable( gl.DEPTH_TEST ): Slår igång något som kallas "depth testing". Så här säger dokumentationen: "The comparison takes place and the depth buffer and stencil value may subsequently be modiﬁed."

gl.depthFunc( gl.LEQUAL ): Eftersom vi förbereder för 3D måste det som är långt fram täcka det som renderas längre bak.

gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT ): Och här rensar vi vår canvas, vilket ska resultera i en svart bakgrund.

Men vi behöver även funktionen initWebGL():


<script type="text/javascript">

    function initWebGL( canvas )

    {

        gl = null;



        try

        {

            gl = canvas.getContext( "experimental-webgl" );

        }

        catch( e ){}



        if( !gl )

            alert( "WebGL fungerar inte. Din webbläsare kanske inte stödjer det." );

    }

</script>

Vi gör en try/catch-sats som försöker anropa "experimental-webgl" så vi får tillgång till dess funktioner. Detta kommer ändras senare till endast "webgl". Tänk på att WebGL fortfarande är i sin vagga. Lyckas vi inte initialisera WebGL visas en informationsruta för användaren att webbläsaren inte har stöd för WebGL.

Nu testar vi att köra. Om allt gått väl ska du ha en svart ruta som är i storleken 640x480 pixlar. Inte så kul än så länge kanske men vi ska göra mer.

Vill du se ett färdigt kodexempel finns det på denna länk: Initialisera WebGL

Stora delar av denna tutorial och de i samma serie är hämtade från Mozilla Developer Network och Learning WebGL fast denna gång på svenska.

2011-07-17 14:40 av Rasmus Brandberg