topical media & game development
sample-webgl-color.js / js
/*
This example demonstrates how to define a color at each vertex of a geometry
github.com/xeolabs/scenejs/wiki/geometry
*/
/*----------------------------------------------------------------------
* Scene graph definition
*---------------------------------------------------------------------*/
SceneJS.createScene({
type: "scene",
id: "the-scene",
canvasId: "theCanvas",
loggingElementId: "theLoggingDiv",
nodes: [
{
type: "lookAt",
eye : { x: 0.0, y: 10.0, z: -55 },
look : { y:1.0 },
up : { y: 1.0 },
nodes: [
{
type: "camera",
optics: {
type: "perspective",
fovy : 25.0,
aspect : 1.47,
near : 0.10,
far : 300.0
},
nodes: [
{
type: "light",
mode: "dir",
color: { r: 1.0, g: 1.0, b: 1.0 },
diffuse: true,
specular: true,
dir: { x: 0.0, y: 0.0, z: -1.0 }
},
/* Next, modelling transforms to orient our geometry
* by a given angles. The rotate nodes have IDs that we'll locate them with below.
*/
{
type: "rotate",
id: "pitch",
angle: 0.0,
x : 1.0,
nodes: [
{
type: "rotate",
id: "yaw",
angle: 0.0,
y : 1.0,
nodes: [
{
type: "material",
baseColor: { r: 1.0, g: 1.0, b: 1.0 },
specularColor: { r: 0.9, g: 0.9, b: 0.9 },
specular: 0.2,
shine: 6.0,
nodes: [
{
type: "texture",
layers: [
{
uri:"@eye.gif" ,
minFilter: "linear",
magFilter: "linear",
wrapS: "repeat",
wrapT: "repeat",
isDepth: false,
depthMode:"luminance",
depthCompareMode: "compareRToTexture",
depthCompareFunc: "lequal",
flipY: false,
width: 1,
height: 1,
internalFormat:"lequal",
sourceFormat:"alpha",
sourceType: "unsignedByte",
applyTo:"baseColor",
blendMode:"multiply",
/* Texture rotation angle in degrees
*/
rotate: 0.0,
/* Texture translation offset
*/
translate : {
x: 0,
y: 0
},
/* Texture scale factors
*/
scale : {
x: .1,
y: .05
}
}
],
nodes: [
/* Aha, here you are, glad you made it!
*
* Here is the geometry node which defines our
* custom object, a simple cube.
*/
{
type: "geometry",
/* Optional resource name, must be unique among all
* geometries - if another geometry has already
* been defined with this resource type, then that
* geometry will be instanced here in place of
* this one, and this geometry definition will be
* ignored. This supports dynamic instancing,
* where we may reuse the same geometry in
* many places to save memory.
*/
resource: "my-geometry",
/* The primitive type - allowed values are
* "points", "lines", "line-loop", "line-strip",
* "triangles", "triangle-strip" and "triangle-fan".
*
* Try setting this config to these different
* types, it's quite freaky.
*
* See the OpenGL/WebGL specification docs for
* how the coordinate arrays are supposed to be laid out
* for them.
*/
primitive: "triangles",
/* The vertices - eight for our cube, each
* one spaining three array elements for X,Y and Z
*/
positions : [
/* v0-v1-v2-v3 front
*/
5, 5, 5,
-5, 5, 5,
-5,-5, 5,
5,-5, 5,
/* v0-v3-v4-v5 right
*/
5, 5, 5,
5,-5, 5,
5,-5,-5,
5, 5,-5,
/* v0-v5-v6-v1 top
*/
5, 5, 5,
5, 5,-5,
-5, 5,-5,
-5, 5, 5,
/* v1-v6-v7-v2 left
*/
-5, 5, 5,
-5, 5,-5,
-5,-5,-5,
-5,-5, 5,
/* v7-v4-v3-v2 bottom
*/
-5,-5,-5,
5,-5,-5,
5,-5, 5,
-5,-5, 5,
/* v4-v7-v6-v5 back
*/
5,-5,-5,
-5,-5,-5,
-5, 5,-5,
5, 5,-5
],
/* Normal vectors, one for each vertex
*/
normals : [
/* v0-v1-v2-v3 front
*/
0, 0, -1,
0, 0, -1,
0, 0, -1,
0, 0, -1,
/* v0-v3-v4-v5 right
*/
-1, 0, 0,
-1, 0, 0,
-1, 0, 0,
-1, 0, 0,
/* v0-v5-v6-v1 top
*/
0, -1, 0,
0, -1, 0,
0, -1, 0,
0, -1, 0,
/* v1-v6-v7-v2 left
*/
1, 0, 0,
1, 0, 0,
1, 0, 0,
1, 0, 0,
/* v7-v4-v3-v2 bottom
*/
0,1, 0,
0,1, 0,
0,1, 0,
0,1, 0,
/* v4-v7-v6-v5 back
*/
0, 0,1,
0, 0,1,
0, 0,1,
0, 0,1
],
/* 2D texture coordinates corresponding to the
* 3D positions defined above - eight for our cube, each
* one spaining two array elements for X and Y
*/
uv : [
/* v0-v1-v2-v3 front
*/
5, 5,
0, 5,
0, 0,
5, 0,
/* v0-v3-v4-v5 right
*/
0, 5,
0, 0,
5, 0,
5, 5,
/* v0-v5-v6-v1 top
*/
5, 0,
5, 5,
0, 5,
0, 0,
/* v1-v6-v7-v2 left
*/
5, 5,
0, 5,
0, 0,
5, 0,
/* v7-v4-v3-v2 bottom
*/
0, 0,
5, 0,
5, 5,
0, 5,
/* v4-v7-v6-v5 back
*/
0, 0,
5, 0,
5, 5,
0, 5
],
/* Color for each vertes
*/
colors : [
/* v0-v1-v2-v3 front
*/
1.0, 0.0, 0.0, 1.5,
0.0, 1.0, 0.0, 1.0,
0.0, 0.0, 1.0, 1.0,
0.0, 0.0, 0.0, 1.0,
/* v0-v3-v4-v5 right
*/
1.0, 0.0, 0.0, 1.0,
0.0, 0.0, 1.0, 1.0,
0.0, 0.0, 0.0, 1.0,
0.0, 0.0, 0.0, 1.0,
/* v0-v5-v6-v1 top
*/
1.0, 0.0, 0.0, 1.0,
0.0, 0.0, 0.0, 1.0,
0.0, 0.0, 0.0, 1.0,
0.0, 0.0, 1.0, 1.0,
/* v1-v6-v7-v2 left
*/
1.0, 0.0, 0.0, 1.0,
1.0, 1.0, 0.0, 1.0,
0.0, 0.0, 0.0, 1.0,
0.0, 0.0, 1.0, 1.0,
/* v7-v4-v3-v2 bottom
*/
0.0, 0.0, 0.0, 1.0,
1.0, 0.0, 1.0, 1.0,
0.0, 0.0, 1.0, 1.0,
0.0, 0.0, 1.0, 1.0,
/* v4-v7-v6-v5 back
*/
1.0, 0.0, 1.0, 1.0,
0.0, 1.0, 1.0, 1.0,
1.0, 1.0, 0.0, 1.0,
1.0, 1.0, 1.0, 1.0
],
/* Indices - these organise the
* positions and uv texture coordinates
* into geometric primitives in accordance
* with the "primitive" parameter,
* in this case a set of three indices
* for each triangle.
*
* Note that each triangle is specified
* in counter-clockwise winding order.
*
* You can specify them in clockwise
* order if you configure the SceneJS.renderer
* node's frontFace property as "cw", instead of
* the default "ccw".
*/
indices : [
/* Front
*/
0, 1, 2,
0, 2, 3,
/* Right
*/
4, 5, 6,
4, 6, 7,
/* Top
*/
8, 9,10,
8,10,11,
/* Left
*/
12,13,14,
12,14,15,
/* Bottom
*/
16,17,18,
16,18,19,
/* Back
*/
20,21,22,
20,22,23
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
});
var yaw = 30;
var pitch = -30;
var lastX;
var lastY;
var dragging = false;
var canvas = document.getElementById("theCanvas");
function mouseDown(event) {
lastX = event.clientX;
lastY = event.clientY;
dragging = true;
}
function touchStart(event) {
lastX = event.targetTouches[0].clientX;
lastY = event.targetTouches[0].clientY;
dragging = true;
}
function mouseUp() {
dragging = false;
}
function touchEnd() {
dragging = false;
}
function mouseMove(event) {
var posX = event.clientX;
var posY = event.clientY;
actionMove(posX,posY);
}
function touchMove(event) {
var posX = event.targetTouches[0].clientX;
var posY = event.targetTouches[0].clientY;
actionMove(posX,posY);
}
/* On a mouse/touch drag, we'll re-render the scene, passing in
* incremented angles in each time.
*/
function actionMove(posX, posY) {
if (dragging) {
yaw += (posX - lastX) * 0.5;
pitch += (posY - lastY) * -0.5;
lastX = posX;
lastY = posY;
}
}
canvas.addEventListener('mousedown', mouseDown, true);
canvas.addEventListener('mousemove', mouseMove, true);
canvas.addEventListener('mouseup', mouseUp, true);
canvas.addEventListener('touchstart', touchStart, true);
canvas.addEventListener('touchmove', touchMove, true);
canvas.addEventListener('touchend', touchEnd, true);
var scene = SceneJS.scene("the-scene");
scene.start({
idleFunc: function() {
scene.findNode("pitch").set("angle", pitch);
scene.findNode("yaw").set("angle", yaw);
}
});
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
