Whoa: Adult FriendFinder May Have Been Acquired For $1 Billion+ »
« 23andme: Evil Or The Way Of The Future?

3D Canvas in Opera

Written by on November 17th, 2007 in Ajax News.

You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

Tim Johansson is talking about Opera’s support for a 3d Canvas which differs from Mozilla’s in that it doesn’t map directly to OpenGL, which they did because:

  • It makes it easier to implement on non-OpenGL platforms (such as D3D)
  • We wanted to have some form of collision detection available

What can you do? Here is the interface that you get to work with:

JAVASCRIPT:

  1.  
  2. interface CanvasRenderingContextOpera3D {
  3.  
  4.   // state
  5.   void save(); // push state on state stack
  6.   void restore(); // pop state stack and restore state
  7.  
  8.   // scene/frame
  9.   void beginScene(); // start rendering a new frame
  10.   void endScene(); // finish rendering of the scene and present the result
  11.  
  12.   // transformations
  13.   void translate(in float x, in float y, in float z);
  14.   void scale(in float x, in float y, in float z);
  15.   void rotateX(in float rotation);
  16.   void rotateY(in float rotation);
  17.   void rotateZ(in float rotation);
  18.  
  19.   // rendering operation
  20.   void drawTriangle(in float x1, in float y1, in float z1, in float tex_s1, in float tex_t1,
  21.       in float x2, in float y2, in float z2, in float tex_s2, in float tex_t2,
  22.       in float x3, in float y3, in float z3, in float tex_s3, in float tex_t3);
  23.   void draw3DModel(in Canvas3DModel model);
  24.  
  25.   // create objects
  26.   CanvasTexture createTexture(in Image img);
  27.   Canvas3DModel create3DModel();
  28.  
  29.   // collision detection
  30.   string checkIntersection(in float x, in float y, in float z, in float radius, in Canvas3DModel model);
  31.  
  32.   // rendering state
  33.   attribute CanvasTexture texture; // current texture or null for no texture, default is null
  34.   attribute string color; // current color, default is transparent black
  35.   attribute float fov; // field of view of the scene in degrees, default is 45
  36.   attribute float nearPlane; // distance to the near clipping plane, default is 0.1
  37.   attribute float farPlane; // distance to the far clipping plane, default is 100
  38.   attribute string ztest; // "none", "less", "lessequal", "greater", "greaterequal", "equal", "notequal". Default is "lessequal"
  39.   attribute string blend; // "replace", "add", "srcalpha", "multiply". Default is "replace"
  40. };
  41.  
  42. interface Canvas3DModel {
  43.   void addVertex(in float x, in float y, in float z, in float s, in float t);
  44.   void addTriangle(in integer vertex1, in integer vertex2, in integer vertex3);
  45. };
  46.  
  47. interface CanvasTexture{
  48. };
  49.  

And, here is an example of a rotating cube (which you can see if you are using a new Opera build).

HTML:

  1.  
  2. <canvas id=”canvas” width=”200″ height=”200″>
  3.   Canvas not supported!
  4. </canvas>
  5.  
  7.   var canvas;
  8.   var context3d;
  9.   var rotation;
  10.   var texture;
  11.   var cube;
  12.   function render(){
  13.     context3d.beginScene();
  14.     context3d.translate(0,0,-5);
  15.     context3d.rotateY(rotation);
  16.     context3d.rotateX(rotation);
  17.     rotation += 2;
  18.     context3d.color = "white";
  19.     context3d.draw3DModel(cube);
  20.     context3d.endScene();
  21.   }
  22.   function onTick(){
  23.     render();
  24.   }
  25.   function onload(){
  26.     canvas = document.getElementById("canvas");
  27.     context3d = canvas.getContext("opera-3d");
  28.     if (!context3d)
  29.     {
  30.       alert("3d canvas not supported");
  31.       return;
  32.     }
  33.     logo = new Image();
  34.     logo.src = "operalogo.png";
  35.     texture = context3d.createTexture(logo);
  36.     context3d.texture = texture;
  37.  
  38.     cube = context3d.create3DModel();
  39.     cube.addVertex(-1, 1, 1, 0, 0);
  40.     cube.addVertex(1, 1, 1, 1, 0);
  41.     cube.addVertex(-1, -1, 1, 0, 1);
  42.     cube.addVertex(1, -1, 1, 1, 1);
  43.     cube.addVertex(-1, 1, -1, 1, 1);
  44.     cube.addVertex(1, 1, -1, 0, 1);
  45.     cube.addVertex(-1, -1, -1, 1, 0);
  46.     cube.addVertex(1, -1, -1, 0, 0);
  47.  
  48.     cube.addTriangle(0,1,2);
  49.     cube.addTriangle(2,1,3);
  50.     cube.addTriangle(4,5,6);
  51.     cube.addTriangle(6,5,7);
  52.     cube.addTriangle(0,4,2);
  53.     cube.addTriangle(2,4,6);
  54.     cube.addTriangle(1,5,3);
  55.     cube.addTriangle(3,5,7);
  56.     cube.addTriangle(0,4,1);
  57.     cube.addTriangle(1,4,5);
  58.     cube.addTriangle(2,6,3);
  59.     cube.addTriangle(3,6,7);
  60.  
  61.     setInterval(onTick, 10);
  62.   }
  63.   document.onload = onload();
  64. </script>
  65.  

Source: Ajaxian
Original Article: http://feeds.feedburner.com/~r/ajaxian/~3/186216954/3d-canvas-in-opera

Comments are closed.


Site Navigation

Pages

Recently

Archives