Changeset 52056 in webkit


Ignore:
Timestamp:
Dec 12, 2009 3:12:31 PM (14 years ago)
Author:
eric@webkit.org
Message:

2009-12-12 Kenneth Russell <​kbr@google.com>

Reviewed by Oliver Hunt.

Update WebGL tests to released versions
​https://bugs.webkit.org/show_bug.cgi?id=32457

  • fast/canvas/webgl/resources/utils3d.js: (initWebGL.gl.console.window.console.log): (initWebGL): (loadShader): (makeBox): (makeSphere): (processLoadObj): (doLoadObj): (doLoadImageTexture):

2009-12-12 Kenneth Russell <​kbr@google.com>

Reviewed by Oliver Hunt.

Update WebGL tests to released versions
​https://bugs.webkit.org/show_bug.cgi?id=32457

  • manual-tests/webgl/Earth.html:
  • manual-tests/webgl/ManyPlanetsDeep.html:
  • manual-tests/webgl/SpinningBox.html:
  • manual-tests/webgl/TeapotPerPixel.html:
  • manual-tests/webgl/TeapotPerVertex.html:
  • manual-tests/webgl/resources/CanvasMatrix.js: (CanvasMatrix4.prototype.getAsWebGLFloatArray):
  • manual-tests/webgl/resources/utils3d.js: (initWebGL.gl.console.window.console.log): (initWebGL): (loadShader): (makeBox): (makeSphere): (processLoadObj): (doLoadObj): (doLoadImageTexture):
Location:
trunk
Files:
10 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r52055 r52056  
     12009-12-12  Kenneth Russell  <kbr@google.com>
     2
     3        Reviewed by Oliver Hunt.
     4
     5        Update WebGL tests to released versions
     6        https://bugs.webkit.org/show_bug.cgi?id=32457
     7
     8        * fast/canvas/webgl/resources/utils3d.js:
     9        (initWebGL.gl.console.window.console.log):
     10        (initWebGL):
     11        (loadShader):
     12        (makeBox):
     13        (makeSphere):
     14        (processLoadObj):
     15        (doLoadObj):
     16        (doLoadImageTexture):
     17
    1182009-12-12  Eric Carlson  <eric.carlson@apple.com>
    219

  • trunk/LayoutTests/fast/canvas/webgl/resources/utils3d.js

    r51535 r52056  
    1414// Enable depth testing and blending with a blend func of (SRC_ALPHA, ONE_MINUS_SRC_ALPHA)
    1515//
     16// A console function is added to the context: console(string). This can be replaced
     17// by the caller. By default, it maps to the window.console() function on WebKit and to
     18// an empty function on other browsers.
     19//
    1620function initWebGL(canvasName, vshader, fshader, attribs, clearColor, clearDepth)
    1721{
    1822    var canvas = document.getElementById(canvasName);
    19     var gl;
    20    
    21     try {gl = canvas.getContext("experimental-webgl") } catch(e) { }
    22     if (!gl)
    23         try {gl = canvas.getContext("moz-webgl") } catch(e) { }
     23    var gl = canvas.getContext("experimental-webgl");
    2424    if (!gl) {
    2525        alert("No WebGL context found");
    2626        return null;
    2727    }
     28   
     29    // Add a console
     30    gl.console = ("console" in window) ? window.console : { log: function() { } };
    2831
    2932    // create our shaders
    … …  
    5659        // something went wrong with the link
    5760        var error = gl.getProgramInfoLog (gl.program);
    58         console.log("Error in program linking:"+error);
     61        gl.console.log("Error in program linking:"+error);
    5962
    6063        gl.deleteProgram(gl.program);
    … …  
    8790    var shaderScript = document.getElementById(shaderId);
    8891    if (!shaderScript) {
    89         console.log("*** Error: shader script '"+shaderId+"' not found");
     92        ctx.console.log("*** Error: shader script '"+shaderId+"' not found");
    9093        return null;
    9194    }
    … …  
    9699        var shaderType = ctx.FRAGMENT_SHADER;
    97100    else {
    98         console.log("*** Error: shader script '"+shaderId+"' of undefined type '"+shaderScript.type+"'");       
     101        ctx.console.log("*** Error: shader script '"+shaderId+"' of undefined type '"+shaderScript.type+"'");       
    99102        return null;
    100103    }
    … …  
    103106    var shader = ctx.createShader(shaderType);
    104107    if (shader == null) {
    105         console.log("*** Error: unable to create shader '"+shaderId+"'");       
     108        ctx.console.log("*** Error: unable to create shader '"+shaderId+"'");       
    106109        return null;
    107110    }
    … …  
    118121        // Something went wrong during compilation; get the error
    119122        var error = ctx.getShaderInfoLog(shader);
    120         console.log("*** Error compiling shader '"+shaderId+"':"+error);
     123        ctx.console.log("*** Error compiling shader '"+shaderId+"':"+error);
    121124        ctx.deleteShader(shader);
    122125        return null;
    … …  
    204207    ctx.bufferData(ctx.ARRAY_BUFFER, vertices, ctx.STATIC_DRAW);
    205208   
    206     ctx.bindBuffer(ctx.ARRAY_BUFFER, 0);
     209    ctx.bindBuffer(ctx.ARRAY_BUFFER, null);
    207210
    208211    retval.indexObject = ctx.createBuffer();
    209212    ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, retval.indexObject);
    210213    ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, indices, ctx.STATIC_DRAW);
    211     ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, 0);
     214    ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, null);
    212215   
    213216    retval.numIndices = indices.length;
    … …  
    262265    }
    263266   
    264     longs += 1;
    265267    for (var latNumber = 0; latNumber < lats; ++latNumber) {
    266268        for (var longNumber = 0; longNumber < longs; ++longNumber) {
    267             var first = (latNumber * longs) + (longNumber % longs);
    268             var second = first + longs;
     269            var first = (latNumber * (longs+1)) + longNumber;
     270            var second = first + longs + 1;
    269271            indexData.push(first);
    270272            indexData.push(second);
    … …  
    326328function processLoadObj(req)
    327329{
    328     console.log("req="+req)
     330    req.obj.ctx.console.log("req="+req)
    329331    // only if req shows "complete"
    330332    if (req.readyState == 4) {
    … …  
    375377            // face
    376378            if (array.length != 4) {
    377                 console.log("*** Error: face '"+line+"' not handled");
     379                obj.ctx.console.log("*** Error: face '"+line+"' not handled");
    378380                continue;
    379381            }
    … …  
    396398                    }
    397399                    else {
    398                         console.log("*** Error: did not understand face '"+array[i]+"'");
     400                        obj.ctx.console.log("*** Error: did not understand face '"+array[i]+"'");
    399401                        return null;
    400402                    }
    … …  
    489491    ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);
    490492    ctx.generateMipmap(ctx.TEXTURE_2D)
    491     ctx.bindTexture(ctx.TEXTURE_2D, 0);
     493    ctx.bindTexture(ctx.TEXTURE_2D, null);
    492494}
    493495

  • trunk/WebCore/ChangeLog

    r52054 r52056  
     12009-12-12  Kenneth Russell  <kbr@google.com>
     2
     3        Reviewed by Oliver Hunt.
     4
     5        Update WebGL tests to released versions
     6        https://bugs.webkit.org/show_bug.cgi?id=32457
     7
     8        * manual-tests/webgl/Earth.html:
     9        * manual-tests/webgl/ManyPlanetsDeep.html:
     10        * manual-tests/webgl/SpinningBox.html:
     11        * manual-tests/webgl/TeapotPerPixel.html:
     12        * manual-tests/webgl/TeapotPerVertex.html:
     13        * manual-tests/webgl/resources/CanvasMatrix.js:
     14        (CanvasMatrix4.prototype.getAsWebGLFloatArray):
     15        * manual-tests/webgl/resources/utils3d.js:
     16        (initWebGL.gl.console.window.console.log):
     17        (initWebGL):
     18        (loadShader):
     19        (makeBox):
     20        (makeSphere):
     21        (processLoadObj):
     22        (doLoadObj):
     23        (doLoadImageTexture):
     24
    1252009-12-12  Christian Dywan  <christian@twotoasts.de>
    226

  • trunk/WebCore/manual-tests/webgl/Earth.html

    r48330 r52056  
    22<html>
    33  <head>
    4     <title>Canvas3d example</title>
     4    <title>Earth and Mars</title>
    55    <script src="resources/CanvasMatrix.js"> </script>
    66    <script src="resources/utils3d.js"> </script>
    … …  
    106106            mvMatrix.rotate(30, 1,0,0);
    107107            mvMatrix.translate(x,y,z);
    108             ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsCanvasFloatArray());
     108            ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsWebGLFloatArray());
    109109
    110110            // construct the normal matrix from the model-view matrix
    … …  
    112112            normalMatrix.invert();
    113113            normalMatrix.transpose();
    114             ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsCanvasFloatArray());
     114            ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsWebGLFloatArray());
    115115           
    116116            // construct the model-view * projection matrix
    117117            var mvpMatrix = new CanvasMatrix4(mvMatrix);
    118118            mvpMatrix.multRight(ctx.perspectiveMatrix);
    119             ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvpMatrix.getAsCanvasFloatArray());
     119            ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvpMatrix.getAsWebGLFloatArray());
    120120
    121121            ctx.bindTexture(ctx.TEXTURE_2D, texture);
    … …  
    141141        function start()
    142142        {
     143            var c = document.getElementById("example");
     144            var w = Math.floor(window.innerWidth * 0.9);
     145            var h = Math.floor(window.innerHeight * 0.9);
     146
     147            c.width = w;
     148            c.height = h;
     149
    143150            var ctx = init();
    144151            currentAngle = 0;
    … …  
    152159        canvas {
    153160            border: 2px solid black;
    154             width:90%;
    155             height:90%;
    156161        }
    157162    </style>

  • trunk/WebCore/manual-tests/webgl/ManyPlanetsDeep.html

    r48330 r52056  
    22<html>
    33  <head>
    4     <title>Canvas3d example</title>
     4    <title>Many Planets Deep</title>
    55    <script src="resources/CanvasMatrix.js"> </script>
    66    <script src="resources/utils3d.js"> </script>
    … …  
    114114            mvMatrix.rotate(30, 1,0,0);
    115115            mvMatrix.translate(x,y,z);
    116             ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsCanvasFloatArray());
     116            ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsWebGLFloatArray());
    117117
    118118            // construct the normal matrix from the model-view matrix
    … …  
    120120            normalMatrix.invert();
    121121            normalMatrix.transpose();
    122             ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsCanvasFloatArray());
     122            ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsWebGLFloatArray());
    123123           
    124124            // construct the model-view * projection matrix
    125125            var mvpMatrix = new CanvasMatrix4(mvMatrix);
    126126            mvpMatrix.multRight(ctx.perspectiveMatrix);
    127             ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvpMatrix.getAsCanvasFloatArray());
     127            ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvpMatrix.getAsWebGLFloatArray());
    128128
    129129            ctx.bindTexture(ctx.TEXTURE_2D, texture);
    … …  
    169169        function start()
    170170        {
     171            var c = document.getElementById("example");
     172            var w = Math.floor(window.innerWidth * 0.9);
     173            var h = Math.floor(window.innerHeight * 0.9);
     174
     175            c.width = w;
     176            c.height = h;
     177
    171178            var ctx = init();
    172179            currentAngles = [ ];
    … …  
    189196        canvas {
    190197            border: 2px solid black;
    191             width:90%;
    192             height:90%;
    193198        }
    194199    </style>

  • trunk/WebCore/manual-tests/webgl/SpinningBox.html

    r50725 r52056  
    11<!DOCTYPE html>
    22<html>
    3   <head>
    4     <title>Canvas3d example</title>
    5     <script src="resources/CanvasMatrix.js"> </script>
    6     <script src="resources/utils3d.js"> </script>
    7     <script id="vshader" type="x-shader/x-vertex">
    8         uniform mat4 pMatrix;
    9         uniform mat4 mvMatrix;
    10         uniform vec3 lightDir;
    11 
    12         attribute vec3 vNormal;
    13         attribute vec4 vColor;
    14         attribute vec4 vPosition;
    15        
    16         varying float v_Dot;
    17        
    18         void main()
    19         {
    20             gl_FrontColor = vColor;
    21             vec4 transNormal = mvMatrix * vec4(vNormal,1);
    22             v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
    23             gl_Position = pMatrix * mvMatrix * vPosition;
    24         }
    25     </script>
    26 
    27     <script id="fshader" type="x-shader/x-fragment">
    28         varying float v_Dot;
    29        
    30         void main()
    31         {
    32             gl_FragColor = vec4(gl_Color.xyz * v_Dot, gl_Color.a);
    33         }
    34     </script>
    35 
    36     <script>
    37         function init()
    38         {
    39             var gl = initWebGL("example", "vshader", "fshader",
    40                                 [ "vNormal", "vColor", "vPosition"],
    41                                 [ 0, 0, 0, 1 ], 10000);
    42 
    43             gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1);
    44            
    45             gl.box = makeBox(gl);
    46 
    47             // color array
    48             var colors = new WebGLUnsignedByteArray(
    49                 [  0, 0, 1, 1,   0, 0, 1, 1,   0, 0, 1, 1,   0, 0, 1, 1,     // v0-v1-v2-v3 front
    50                    1, 0, 0, 1,   1, 0, 0, 1,   1, 0, 0, 1,   1, 0, 0, 1,     // v0-v3-v4-v5 right
    51                    0, 1, 0, 1,   0, 1, 0, 1,   0, 1, 0, 1,   0, 1, 0, 1,     // v0-v5-v6-v1 top
    52                    1, 1, 0, 1,   1, 1, 0, 1,   1, 1, 0, 1,   1, 1, 0, 1,     // v1-v6-v7-v2 left
    53                    1, 0, 1, 1,   1, 0, 1, 1,   1, 0, 1, 1,   1, 0, 1, 1,     // v7-v4-v3-v2 bottom
    54                    0, 1, 1, 1,   0, 1, 1, 1,   0, 1, 1, 1,   0, 1, 1, 1 ]    // v4-v7-v6-v5 back
    55             );
    56            
    57             gl.box.colorObject = gl.createBuffer();
    58             gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject);
    59             gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
    60                                    
    61             return gl;
    62         }
    63        
    64         width = -1;
    65         height = -1;
    66        
    67         function reshape(gl)
    68         {
    69             var canvas = document.getElementById('example');
    70             if (canvas.clientWidth == width && canvas.clientHeight == height)
    71                 return;
    72 
    73             width = canvas.clientWidth;
    74             height = canvas.clientHeight;
    75            
    76             gl.viewport(0, 0, width, height);
    77             var pMatrix = new CanvasMatrix4();
    78             pMatrix.lookat(0,0,10, 0, 0, 0, 0, 1, 0);
    79             pMatrix.perspective(30, width/height, 1, 10000);
    80             gl.uniformMatrix4fv(gl.getUniformLocation(gl.program, "pMatrix"), false, pMatrix.getAsCanvasFloatArray());
    81         }
    82        
    83         function drawPicture(gl)
    84         {
    85             reshape(gl);
    86             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    87 
    88             var mvMatrix = new CanvasMatrix4();
    89             mvMatrix.rotate(currentAngle, 0,1,0);
    90             mvMatrix.rotate(20, 1,0,0);
    91             gl.uniformMatrix4fv(gl.getUniformLocation(gl.program, "mvMatrix"), false, mvMatrix.getAsCanvasFloatArray());
    92 
    93             gl.enableVertexAttribArray(0);
    94             gl.enableVertexAttribArray(1);
    95             gl.enableVertexAttribArray(2);
    96 
    97             gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.vertexObject);
    98             gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);
    99            
    100             gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.normalObject);
    101             gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
    102            
    103             gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject);
    104             gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, false, 0, 0);
    105 
    106             gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.box.indexObject);
    107             gl.drawElements(gl.TRIANGLES, gl.box.numIndices, gl.UNSIGNED_BYTE, 0);
    108 
    109             gl.flush();
    110            
    111             framerate.snapshot();
    112            
    113             currentAngle += incAngle;
    114             if (currentAngle > 360)
    115                 currentAngle -= 360;
    116         }
    117        
    118         function start()
    119         {
    120             var gl = init();
    121             currentAngle = 0;
    122             incAngle = 0.5;
    123             framerate = new Framerate("framerate");
    124             setInterval(function() { drawPicture(gl) }, 10);
    125         }
    126     </script>
    127     <style type="text/css">
    128         canvas {
    129             border: 2px solid black;
    130             width:90%;
    131             height:90%;
    132         }
    133         .text {
    134             position:absolute;
    135             top:100px;
    136             left:20px;
    137             font-size:2em;
    138             color: blue;
    139         }
    140     </style>
    141   </head>
    142   <body onload="start()">
    143     <canvas id="example">
    144     There is supposed to be an example drawing here, but it's not important.
    145     </canvas>
    146     <div class="text">This is some text under the canvas</div>
    147     <div id="framerate"></div>
    148   </body>
     3<head>
     4<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     5<title>Spinning WebGL Box</title>
     6
     7<script src="resources/CanvasMatrix.js" type="text/javascript"> </script>
     8<script src="resources/utils3d.js" type="text/javascript"> </script>
     9<script id="vshader" type="x-shader/x-vertex">
     10    uniform mat4 u_modelViewProjMatrix;
     11    uniform mat4 u_normalMatrix;
     12    uniform vec3 lightDir;
     13
     14    attribute vec3 vNormal;
     15    attribute vec4 vColor;
     16    attribute vec4 vPosition;
     17
     18    varying float v_Dot;
     19    varying vec4 v_Color;
     20
     21    void main()
     22    {
     23        gl_Position = u_modelViewProjMatrix * vPosition;
     24        v_Color = vColor;
     25        vec4 transNormal = u_normalMatrix * vec4(vNormal, 1);
     26        v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
     27    }
     28</script>
     29
     30<script id="fshader" type="x-shader/x-fragment">
     31    varying float v_Dot;
     32    varying vec4 v_Color;
     33
     34    void main()
     35    {
     36        gl_FragColor = vec4(v_Color.xyz * v_Dot, v_Color.a);
     37    }
     38</script>
     39
     40<script>
     41    function init()
     42    {
     43        // Initialize
     44        var gl = initWebGL(
     45            // The id of the Canvas Element
     46            "example",
     47            // The ids of the vertex and fragment shaders
     48            "vshader", "fshader",
     49            // The vertex attribute names used by the shaders.
     50            // The order they appear here corresponds to their index
     51            // used later.
     52            [ "vNormal", "vColor", "vPosition"],
     53            // The clear color and depth values
     54            [ 0, 0, 0, 1 ], 10000);
     55
     56        // Set up a uniform variable for the shaders
     57        gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1);
     58
     59        // Create a box. On return 'gl' contains a 'box' property with
     60        // the BufferObjects containing the arrays for vertices,
     61        // normals, texture coords, and indices.
     62        gl.box = makeBox(gl);
     63
     64        // Set up the array of colors for the cube's faces
     65        var colors = new WebGLUnsignedByteArray(
     66            [  0, 0, 1, 1,   0, 0, 1, 1,   0, 0, 1, 1,   0, 0, 1, 1,     // v0-v1-v2-v3 front
     67               1, 0, 0, 1,   1, 0, 0, 1,   1, 0, 0, 1,   1, 0, 0, 1,     // v0-v3-v4-v5 right
     68               0, 1, 0, 1,   0, 1, 0, 1,   0, 1, 0, 1,   0, 1, 0, 1,     // v0-v5-v6-v1 top
     69               1, 1, 0, 1,   1, 1, 0, 1,   1, 1, 0, 1,   1, 1, 0, 1,     // v1-v6-v7-v2 left
     70               1, 0, 1, 1,   1, 0, 1, 1,   1, 0, 1, 1,   1, 0, 1, 1,     // v7-v4-v3-v2 bottom
     71               0, 1, 1, 1,   0, 1, 1, 1,   0, 1, 1, 1,   0, 1, 1, 1 ]    // v4-v7-v6-v5 back
     72                                                );
     73
     74        // Set up the vertex buffer for the colors
     75        gl.box.colorObject = gl.createBuffer();
     76        gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject);
     77        gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
     78
     79        // Create some matrices to use later and save their locations in the shaders
     80        gl.mvMatrix = new CanvasMatrix4();
     81        gl.u_normalMatrixLoc = gl.getUniformLocation(gl.program, "u_normalMatrix");
     82        gl.normalMatrix = new CanvasMatrix4();
     83        gl.u_modelViewProjMatrixLoc =
     84                gl.getUniformLocation(gl.program, "u_modelViewProjMatrix");
     85        gl.mvpMatrix = new CanvasMatrix4();
     86
     87        // Enable all of the vertex attribute arrays.
     88        gl.enableVertexAttribArray(0);
     89        gl.enableVertexAttribArray(1);
     90        gl.enableVertexAttribArray(2);
     91
     92        // Set up all the vertex attributes for vertices, normals and colors
     93        gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.vertexObject);
     94        gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);
     95
     96        gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.normalObject);
     97        gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
     98
     99        gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject);
     100        gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, false, 0, 0);
     101
     102        // Bind the index array
     103        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.box.indexObject);
     104
     105        return gl;
     106    }
     107
     108    width = -1;
     109    height = -1;
     110
     111    function reshape(gl)
     112    {
     113        var canvas = document.getElementById('example');
     114        if (canvas.clientWidth == width && canvas.clientHeight == height)
     115            return;
     116
     117        width = canvas.clientWidth;
     118        height = canvas.clientHeight;
     119
     120        // Set the viewport and projection matrix for the scene
     121        gl.viewport(0, 0, width, height);
     122        gl.perspectiveMatrix = new CanvasMatrix4();
     123        gl.perspectiveMatrix.lookat(0, 0, 7, 0, 0, 0, 0, 1, 0);
     124        gl.perspectiveMatrix.perspective(30, width/height, 1, 10000);
     125    }
     126
     127    function drawPicture(gl)
     128    {
     129        // Make sure the canvas is sized correctly.
     130        reshape(gl);
     131
     132        // Clear the canvas
     133        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
     134
     135        // Make a model/view matrix.
     136        gl.mvMatrix.makeIdentity();
     137        gl.mvMatrix.rotate(currentAngle, 0,1,0);
     138        gl.mvMatrix.rotate(20, 1,0,0);
     139
     140        // Construct the normal matrix from the model-view matrix and pass it in
     141        gl.normalMatrix.load(gl.mvMatrix);
     142        gl.normalMatrix.invert();
     143        gl.normalMatrix.transpose();
     144        gl.uniformMatrix4fv(gl.u_normalMatrixLoc, false,
     145                            gl.normalMatrix.getAsWebGLFloatArray());
     146
     147        // Construct the model-view * projection matrix and pass it in
     148        gl.mvpMatrix.load(gl.mvMatrix);
     149        gl.mvpMatrix.multRight(gl.perspectiveMatrix);
     150        gl.uniformMatrix4fv(gl.u_modelViewProjMatrixLoc, false,
     151                            gl.mvpMatrix.getAsWebGLFloatArray());
     152
     153        // Draw the cube
     154        gl.drawElements(gl.TRIANGLES, gl.box.numIndices, gl.UNSIGNED_BYTE, 0);
     155
     156        // Finish up.
     157        gl.flush();
     158
     159        // Show the framerate
     160        framerate.snapshot();
     161
     162        currentAngle += incAngle;
     163        if (currentAngle > 360)
     164            currentAngle -= 360;
     165    }
     166
     167    function start()
     168    {
     169        var c = document.getElementById("example");
     170        var w = Math.floor(window.innerWidth * 0.9);
     171        var h = Math.floor(window.innerHeight * 0.9);
     172
     173        c.width = w;
     174        c.height = h;
     175
     176        var gl = init();
     177        currentAngle = 0;
     178        incAngle = 0.5;
     179        framerate = new Framerate("framerate");
     180        setInterval(function() { drawPicture(gl) }, 10);
     181    }
     182</script>
     183<style type="text/css">
     184    canvas {
     185        border: 2px solid black;
     186    }
     187    .text {
     188        position:absolute;
     189        top:100px;
     190        left:20px;
     191        font-size:2em;
     192        color: blue;
     193    }
     194</style>
     195</head>
     196
     197<body onload="start()">
     198<canvas id="example">
     199    If you're seeing this your web browser doesn't support the &lt;canvas>&gt; element. Ouch!
     200</canvas>
     201<div class="text">This is some text over the canvas</div>
     202<div id="framerate"></div>
     203</body>
     204
    149205</html>

  • trunk/WebCore/manual-tests/webgl/TeapotPerPixel.html

    r48330 r52056  
    22<html>
    33  <head>
    4     <title>Canvas3d example</title>
     4    <title>Teapot (per-pixel)</title>
    55    <script src="resources/CanvasMatrix.js"> </script>
    66    <script src="resources/utils3d.js"> </script>
    … …  
    155155
    156156    <script>
    157     console.log("Hello");
    158157    function setDirectionalLight(ctx, program, eyeVector, direction, ambient, diffuse, specular)
    159158    {
    … …  
    284283            mvMatrix.rotate(currentAngle, 0, 1, 0);
    285284            mvMatrix.rotate(10, 1,0,0);
    286             ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsCanvasFloatArray());
     285            ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsWebGLFloatArray());
    287286
    288287            // construct the normal matrix from the model-view matrix
    … …  
    290289            normalMatrix.invert();
    291290            normalMatrix.transpose();
    292             ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsCanvasFloatArray());
     291            ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsWebGLFloatArray());
    293292           
    294293            mvMatrix.multRight(ctx.perspectiveMatrix);
    295             ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvMatrix.getAsCanvasFloatArray());
     294            ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvMatrix.getAsWebGLFloatArray());
    296295
    297296            ctx.drawElements(ctx.TRIANGLES, obj.numIndices, ctx.UNSIGNED_SHORT, 0);
    … …  
    308307        function start()
    309308        {
     309            var c = document.getElementById("example");
     310            var w = Math.floor(window.innerWidth * 0.9);
     311            var h = Math.floor(window.innerHeight * 0.9);
     312
     313            c.width = w;
     314            c.height = h;
     315
    310316            var ctx = init();
    311317            currentAngle = 0;
    … …  
    319325        canvas {
    320326            border: 2px solid black;
    321             width:90%;
    322             height:90%;
    323327        }
    324328    </style>

  • trunk/WebCore/manual-tests/webgl/TeapotPerVertex.html

    r48330 r52056  
    22<html>
    33  <head>
    4     <title>Canvas3d example</title>
     4    <title>Teapot (per-vertex)</title>
    55    <script src="resources/CanvasMatrix.js"> </script>
    66    <script src="resources/utils3d.js"> </script>
    … …  
    257257            mvMatrix.rotate(currentAngle, 0, 1, 0);
    258258            mvMatrix.rotate(10, 1,0,0);
    259             ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsCanvasFloatArray());
     259            ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsWebGLFloatArray());
    260260
    261261            // construct the normal matrix from the model-view matrix
    … …  
    263263            normalMatrix.invert();
    264264            normalMatrix.transpose();
    265             ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsCanvasFloatArray());
     265            ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsWebGLFloatArray());
    266266           
    267267            mvMatrix.multRight(ctx.perspectiveMatrix);
    268             ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvMatrix.getAsCanvasFloatArray());
     268            ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvMatrix.getAsWebGLFloatArray());
    269269
    270270            ctx.drawElements(ctx.TRIANGLES, obj.numIndices, ctx.UNSIGNED_SHORT, 0);
    … …  
    281281        function start()
    282282        {
     283            var c = document.getElementById("example");
     284            var w = Math.floor(window.innerWidth * 0.9);
     285            var h = Math.floor(window.innerHeight * 0.9);
     286
     287            c.width = w;
     288            c.height = h;
     289
    283290            var ctx = init();
    284291            currentAngle = 0;
    … …  
    292299        canvas {
    293300            border: 2px solid black;
    294             width:90%;
    295             height:90%;
    296301        }
    297302    </style>

  • trunk/WebCore/manual-tests/webgl/resources/CanvasMatrix.js

    r50725 r52056  
    140140}
    141141
    142 CanvasMatrix4.prototype.getAsCanvasFloatArray = function()
     142CanvasMatrix4.prototype.getAsWebGLFloatArray = function()
    143143{
    144144    return new WebGLFloatArray(this.getAsArray());

  • trunk/WebCore/manual-tests/webgl/resources/utils3d.js

    r51348 r52056  
    1414// Enable depth testing and blending with a blend func of (SRC_ALPHA, ONE_MINUS_SRC_ALPHA)
    1515//
     16// A console function is added to the context: console(string). This can be replaced
     17// by the caller. By default, it maps to the window.console() function on WebKit and to
     18// an empty function on other browsers.
     19//
    1620function initWebGL(canvasName, vshader, fshader, attribs, clearColor, clearDepth)
    1721{
    1822    var canvas = document.getElementById(canvasName);
    19     var gl = canvas.getContext("webkit-3d");
     23    var gl = canvas.getContext("experimental-webgl");
     24    if (!gl) {
     25        alert("No WebGL context found");
     26        return null;
     27    }
     28   
     29    // Add a console
     30    gl.console = ("console" in window) ? window.console : { log: function() { } };
    2031
    2132    // create our shaders
    … …  
    4859        // something went wrong with the link
    4960        var error = gl.getProgramInfoLog (gl.program);
    50         console.log("Error in program linking:"+error);
     61        gl.console.log("Error in program linking:"+error);
    5162
    5263        gl.deleteProgram(gl.program);
    … …  
    5970    gl.useProgram(gl.program);
    6071
    61     gl.clearColor (clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
    62     gl.clearDepth (clearDepth);
     72    gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
     73    gl.clearDepth(clearDepth);
    6374
    6475    gl.enable(gl.DEPTH_TEST);
    … …  
    7990    var shaderScript = document.getElementById(shaderId);
    8091    if (!shaderScript) {
    81         console.log("*** Error: shader script '"+shaderId+"' not found");
     92        ctx.console.log("*** Error: shader script '"+shaderId+"' not found");
    8293        return null;
    8394    }
    … …  
    8899        var shaderType = ctx.FRAGMENT_SHADER;
    89100    else {
    90         console.log("*** Error: shader script '"+shaderId+"' of undefined type '"+shaderScript.type+"'");       
     101        ctx.console.log("*** Error: shader script '"+shaderId+"' of undefined type '"+shaderScript.type+"'");       
    91102        return null;
    92103    }
    … …  
    95106    var shader = ctx.createShader(shaderType);
    96107    if (shader == null) {
    97         console.log("*** Error: unable to create shader '"+shaderId+"'");       
     108        ctx.console.log("*** Error: unable to create shader '"+shaderId+"'");       
    98109        return null;
    99110    }
    … …  
    110121        // Something went wrong during compilation; get the error
    111122        var error = ctx.getShaderInfoLog(shader);
    112         console.log("*** Error compiling shader '"+shaderId+"':"+error);
     123        ctx.console.log("*** Error compiling shader '"+shaderId+"':"+error);
    113124        ctx.deleteShader(shader);
    114125        return null;
    … …  
    196207    ctx.bufferData(ctx.ARRAY_BUFFER, vertices, ctx.STATIC_DRAW);
    197208   
    198     ctx.bindBuffer(ctx.ARRAY_BUFFER, 0);
     209    ctx.bindBuffer(ctx.ARRAY_BUFFER, null);
    199210
    200211    retval.indexObject = ctx.createBuffer();
    201212    ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, retval.indexObject);
    202213    ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, indices, ctx.STATIC_DRAW);
    203     ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, 0);
     214    ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, null);
    204215   
    205216    retval.numIndices = indices.length;
    … …  
    254265    }
    255266   
    256     longs += 1;
    257267    for (var latNumber = 0; latNumber < lats; ++latNumber) {
    258268        for (var longNumber = 0; longNumber < longs; ++longNumber) {
    259             var first = (latNumber * longs) + (longNumber % longs);
    260             var second = first + longs;
     269            var first = (latNumber * (longs+1)) + longNumber;
     270            var second = first + longs + 1;
    261271            indexData.push(first);
    262272            indexData.push(second);
    … …  
    318328function processLoadObj(req)
    319329{
    320     console.log("req="+req)
     330    req.obj.ctx.console.log("req="+req)
    321331    // only if req shows "complete"
    322332    if (req.readyState == 4) {
    … …  
    367377            // face
    368378            if (array.length != 4) {
    369                 console.log("*** Error: face '"+line+"' not handled");
     379                obj.ctx.console.log("*** Error: face '"+line+"' not handled");
    370380                continue;
    371381            }
    … …  
    388398                    }
    389399                    else {
    390                         console.log("*** Error: did not understand face '"+array[i]+"'");
     400                        obj.ctx.console.log("*** Error: did not understand face '"+array[i]+"'");
    391401                        return null;
    392402                    }
    … …  
    481491    ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);
    482492    ctx.generateMipmap(ctx.TEXTURE_2D)
    483     ctx.bindTexture(ctx.TEXTURE_2D, 0);
     493    ctx.bindTexture(ctx.TEXTURE_2D, null);
    484494}
    485495
Note: See TracChangeset for help on using the changeset viewer.