extensions/canvas3d/test/3dtest2.html
author bugzilla@standard8.plus.com
Fri, 04 Jan 2008 10:08:34 -0800
changeset 9815 8dc6cf9311fcd17d038c5adefcf6d704470b61fd
parent 7333 18c57527dab1cdc233eb36976653f36e09299a99
permissions -rw-r--r--
Bug 410326 do_CreateInstanceFromCategory is no longer used. r/sr=benjamin,a1.9=dsicore

<html>
  <head>
    <script type="application/x-javascript">
function makeImageCanvas() {
    var cvs = document.createElement('canvas');
    cvs.width = 128;
    cvs.height = 128;

    var ctx = cvs.getContext('2d');
/*
    var grad = ctx.createLinearGradient(0, 0, 128, 128);
    grad.addColorStop(0.0, "rgba(200,0,0,1.0)");
    grad.addColorStop(0.5, "rgba(0,200,0,1.0)");
    grad.addColorStop(1.0, "rgba(0,0,200,1.0)");
    ctx.fillStyle = grad;
*/
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 128, 128);

    return cvs;
}

function doload() {
    var cvs = document.getElementById('canvas');
    var gl = cvs.getContext('moz-gles11');

    gl.clearColor(.2,.2,.4,1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // (optinally) set up lighting
    if (0) {
        gl.enable(gl.LIGHTING);
        gl.light(gl.LIGHT0, gl.AMBIENT, [1.0, 1.0, 1.0, 1]);
        gl.light(gl.LIGHT0, gl.DIFFUSE, [1.0, 1.0, 1.0, 1]);
        gl.light(gl.LIGHT0, gl.POSITION, [3, 3, -5, 0]);
        gl.light(gl.LIGHT0, gl.SPECULAR, [1, 1, 1, 1]);
        gl.enable(gl.LIGHT0);
    }

    // set up our viewing parameters
    gl.matrixMode(gl.PROJECTION);
    gl.loadIdentity();
    gl.gluPerspective(45, 1, 0.1, 20);

    gl.matrixMode(gl.MODELVIEW);
    gl.loadIdentity();
    gl.gluLookAt(0, 0, 4,
                 0, 0, 0,
                 0, 1, 0);

    // set up texture
    var texId = (gl.genTextures(1))[0];
    gl.bindTexture(gl.TEXTURE_2D, texId);
    var img = makeImageCanvas();
    gl.texParameter(gl.TEXTURE_2D, gl.GENERATE_MIPMAP, true);
    gl.texImage2DHTML(gl.TEXTURE_2D, img);
    gl.enable(gl.TEXTURE_2D);

    // set up and draw geometry
    var vertArray = [ -1,  1, 0,
                      -1, -1, 0,
                       1,  1, 0,
                       1, -1, 0 ];
    var normArray = [ 0, 0, 1,
                      0, 0, 1,
                      0, 0, 1,
                      0, 0, 1 ];
    var texCoordArray = [ 0, 1,
                          0, 0,
                          1, 1,
                          1, 0 ];
    var colorArray = [ 1, 1, 1, 1,
                       1, 1, 1, 1,
                       1, 1, 1, 1,
                       1, 1, 1, 1 ];

    gl.vertexPointer(3, gl.FLOAT, vertArray);
    gl.normalPointer(gl.FLOAT, normArray);
    gl.texCoordPointer(2, gl.FLOAT, texCoordArray);
    gl.colorPointer(4, gl.FLOAT, colorArray);

    gl.enableClientState(gl.VERTEX_ARRAY);
    gl.enableClientState(gl.NORMAL_ARRAY);
    gl.enableClientState(gl.TEXTURE_COORD_ARRAY);
    gl.enableClientState(gl.COLOR_ARRAY);

    gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertArray.length / 3);

    gl.disableClientState(gl.VERTEX_ARRAY);
    gl.disableClientState(gl.NORMAL_ARRAY);
    gl.disableClientState(gl.TEXTURE_COORD_ARRAY);
    gl.disableClientState(gl.COLOR_ARRAY);

    gl.swapBuffers();
}
    </script>
  </head>

  <body onload="doload()">
    <canvas id="canvas" width="400" height="400" style="border: 2px solid black;"></canvas>
  </body>
</html>