For Nuns Island Only, canid framework / pet biddy on call. Pour l’Île des Soeurs seulement : stroll de chien et gardiennage d’animal de compagnie à domicile. (sur appel)
3D CANVAS IN OPERA
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:
-
-
interface CanvasRenderingContextOpera3D {
-
-
// state
-
void save(); // push state on state stack
-
void restore(); // pop state stack and restore state
-
-
// scene/frame
-
void beginScene(); // start rendering a new frame
-
void endScene(); // finish rendering of the scene and present the result
-
-
// transformations
-
void translate(in float x, in float y, in float z);
-
void scale(in float x, in float y, in float z);
-
void rotateX(in float rotation);
-
void rotateY(in float rotation);
-
void rotateZ(in float rotation);
-
-
// rendering operation
-
void drawTriangle(in float x1, in float y1, in float z1, in float tex_s1, in float tex_t1,
-
in float x2, in float y2, in float z2, in float tex_s2, in float tex_t2,
-
in float x3, in float y3, in float z3, in float tex_s3, in float tex_t3);
-
void draw3DModel(in Canvas3DModel model);
-
-
// create objects
-
CanvasTexture createTexture(in Image img);
-
Canvas3DModel create3DModel();
-
-
// collision detection
-
string checkIntersection(in float x, in float y, in float z, in float radius, in Canvas3DModel model);
-
-
// rendering state
-
attribute CanvasTexture texture; // current texture or null for no texture, default is null
-
attribute string color; // current color, default is transparent black
-
attribute float fov; // field of view of the scene in degrees, default is 45
-
attribute float nearPlane; // distance to the near clipping plane, default is 0.1
-
attribute float farPlane; // distance to the far clipping plane, default is 100
-
attribute string ztest; // "none", "less", "lessequal", "greater", "greaterequal", "equal", "notequal". Default is "lessequal"
-
attribute string blend; // "replace", "add", "srcalpha", "multiply". Default is "replace"
-
};
-
-
interface Canvas3DModel {
-
void addVertex(in float x, in float y, in float z, in float s, in float t);
-
void addTriangle(in integer vertex1, in integer vertex2, in integer vertex3);
-
};
-
-
interface CanvasTexture{
-
};
-
And, here is an example of a rotating cube (which you can see if you are using a new Opera build).
HTML:
-
-
<canvas id="canvas" width="200" height="200">
-
Canvas not supported!
-
</canvas>
-
-
var canvas;
-
var context3d;
-
var rotation;
-
var texture;
-
var cube;
-
function render(){
-
context3d.beginScene();
-
context3d.translate(0,0,-5);
-
context3d.rotateY(rotation);
-
context3d.rotateX(rotation);
-
rotation += 2;
-
context3d.color = "white";
-
context3d.draw3DModel(cube);
-
context3d.endScene();
-
}
-
function onTick(){
-
render();
-
}
-
function onload(){
-
canvas = document.getElementById("canvas");
-
context3d = canvas.getContext("opera-3d");
-
if (!context3d)
-
{
-
alert("3d canvas not supported");
-
return;
-
}
-
logo = new Image();
-
logo.src = "operalogo.png";
-
texture = context3d.createTexture(logo);
-
context3d.texture = texture;
-
-
cube = context3d.create3DModel();
-
cube.addVertex(-1, 1, 1, 0, 0);
-
cube.addVertex(1, 1, 1, 1, 0);
-
cube.addVertex(-1, -1, 1, 0, 1);
-
cube.addVertex(1, -1, 1, 1, 1);
-
cube.addVertex(-1, 1, -1, 1, 1);
-
cube.addVertex(1, 1, -1, 0, 1);
-
cube.addVertex(-1, -1, -1, 1, 0);
-
cube.addVertex(1, -1, -1, 0, 0);
-
-
cube.addTriangle(0,1,2);
-
cube.addTriangle(2,1,3);
-
cube.addTriangle(4,5,6);
-
cube.addTriangle(6,5,7);
-
cube.addTriangle(0,4,2);
-
cube.addTriangle(2,4,6);
-
cube.addTriangle(1,5,3);
-
cube.addTriangle(3,5,7);
-
cube.addTriangle(0,4,1);
-
cube.addTriangle(1,4,5);
-
cube.addTriangle(2,6,3);
-
cube.addTriangle(3,6,7);
-
-
setInterval(onTick, 10);
-
}
-
document.onload = onload();
-
</script>
-