Usuario:ManuelRomero/WebGL/introduccion

De WikiEducator
Saltar a: navegación, buscar

Qué es webGL

  • WebGL es una librería o API (?) que permite utilizar OpenGL ES 2.0 dentro de un canvas en una página web.Es un código de control escrito en javasscript, y código shader que se ejecuta en la GPU del un equipo.
  • Los elementos WebGL se pueden mezclar con otros elementos HTML y componerse con otras partes de la página o el fondo de la misma.
  • WebGL hace posible mostrar increíbles representaciones de gráficos 3D en tiempo real en el navegador, pero lo que muchas personas ignoran es que WebGL es en realidad una API raster, no una API 3D.

Empezando

Creamos un elemento cavas

Idioma no válido.

Necesita especificar un idioma como esto: <source lang="html4strict">...</source>

lenguajes soportados para sintaxis remarcada:

4cs, 6502acme, 6502kickass, 6502tasm, 68000devpac, abap, actionscript, actionscript3, ada, algol68, apache, applescript, apt_sources, arm, asm, asp, asymptote, autoconf, autohotkey, autoit, avisynth, awk, bascomavr, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_loadrunner, c_mac, caddcl, cadlisp, cfdg, cfm, chaiscript, cil, clojure, cmake, cobol, coffeescript, cpp, cpp-qt, csharp, css, cuesheet, d, dcl, dcpu16, dcs, delphi, diff, div, dos, dot, e, ecmascript, eiffel, email, epc, erlang, euphoria, f1, falcon, fo, fortran, freebasic, freeswitch, fsharp, gambas, gdb, genero, genie, gettext, glsl, gml, gnuplot, go, groovy, gwbasic, haskell, haxe, hicest, hq9plus, html4strict, html5, icon, idl, ini, inno, intercal, io, j, java, java5, javascript, jquery, kixtart, klonec, klonecpp, latex, lb, ldif, lisp, llvm, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, magiksf, make, mapbasic, matlab, mirc, mmix, modula2, modula3, mpasm, mxml, mysql, nagios, netrexx, newlisp, nsis, oberon2, objc, objeck, ocaml, ocaml-brief, octave, oobas, oorexx, oracle11, oracle8, oxygene, oz, parasail, parigp, pascal, pcre, per, perl, perl6, pf, php, php-brief, pic16, pike, pixelbender, pli, plsql, postgresql, povray, powerbuilder, powershell, proftpd, progress, prolog, properties, providex, purebasic, pycon, pys60, python, q, qbasic, rails, rebol, reg, rexx, robots, rpmspec, rsplus, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, spark, sparql, sql, stonescript, systemverilog, tcl, teraterm, text, thinbasic, tsql, typoscript, unicon, upc, urbi, uscript, vala, vb, vbnet, vedit, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xbasic, xml, xorg_conf, xpp, yaml, z80, zxbasic


<!-- .... -->
<body onload="start()">
<h1>Probando webgl</h1>
<canvas id="glcanvas" width="640" height="480">
    Tu navegador parece no soportar el elemento HTML5 <code>&lt;canvas&gt;</code>.
</canvas>
</body>
<!-- .... -->
Escribimos el código de start()
 function start() {
        var canvas = document.getElementById("glcanvas");
 
        gl = initWebGL(canvas);      // Inicializar el contexto GL
 
        // Solo continuar si WebGL esta disponible y trabajando
 
        if (gl) {
            gl.clearColor(0.0, 0.0, 0.0, 1.0);                      // Establecer el color base en negro, totalmente opaco
            gl.enable(gl.DEPTH_TEST);                               // Habilitar prueba de profundidad
            gl.depthFunc(gl.LEQUAL);                                // Objetos cercanos opacan objetos lejanos
            gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);      // Limpiar el buffer de color asi como el de profundidad
        }
    }
Inicializamos el contexto WebGL
var gl; // Un variable global para el contexto WebGL
    function initWebGL(canvas) {
        gl = null;
 
        try {
            // Tratar de tomar el contexto estandar. Si falla, retornar al experimental.
            gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
        }
        catch(e) {}
 
        // Si no tenemos ningun contexto GL, date por vencido ahora
        if (!gl) {
            alert("Imposible inicializar WebGL. Tu navegador puede no soportarlo.");
            gl = null;
        }
        gl.viewport(0, 0, canvas.width, canvas.height);
 
 
        return gl;
    }