Permalink
Fetching contributors…
Cannot retrieve contributors at this time
355 lines (301 sloc) 10.4 KB
<!DOCTYPE html>
<html>
<head>
<title>
CubicVR.js: Scene-within-scene via SceneRenderTexture
</title>
<script src="../../CubicVR.js" type="text/javascript">
</script>
<script type='text/javascript'>
function buildTV(scene,screenMaterial)
{
var mat4 = CubicVR.mat4;
var m = mat4.identity();
var tvMaterial = new CubicVR.Material({
textures: {
color: "../images/1422-diffuse.jpg"
}
});
var obj_tv = new CubicVR.Mesh({
primitives: [
{
type: "box",
size: 1.0,
transform: {
position: [0,0.5,0],
scale: [0.9,0.9,0.9]
},
material: screenMaterial
},
{
type: "box",
size: 1.0,
transform: {
scale: [1.0,0.1,1.0]
},
material: tvMaterial
},
{
type: "box",
size: 1.0,
transform: {
position: [0,1.0,0],
scale: [1.0,0.1,1.0]
},
material: tvMaterial
},
{
type: "box",
size: 1.0,
transform: {
position: [-0.5+0.05,0.5,0],
scale: [0.1,0.9,1]
},
material: tvMaterial
},
{
type: "box",
size: 1.0,
transform: {
position: [0.5-0.05,0.5,0],
scale: [0.1,0.9,1]
},
material: tvMaterial
},
{
type: "box",
size: 1.0,
transform: {
position: [-0.3,1.5,0],
rotation: [0,0,25],
scale: [0.03,1.0,0.03]
},
material: tvMaterial
},
{
type: "box",
size: 1.0,
transform: {
position: [0.3,1.5,0],
rotation: [0,0,-25],
scale: [0.03,1.0,0.03]
},
material: tvMaterial
},
{
type: "lathe",
points: [[0,0,0],[-0.7,0,0],[-0.7,0.05,0],[-0.3,0.3,0],[0,0.3,0]],
divisions: 4,
transform: {
position: [0,0.5-0.05,-0.5],
rotation: [-90,0,45],
},
material: tvMaterial
}
],
calcNormals: true
});
// Create a UV Mapper and apply it to objMaterial
objMaterialMap = new CubicVR.UVMapper({
projectionMode: "cubic",
scale: [0.9,0.9,0.9],
center: [0.0,0.5,0.0]
});
objMaterialMap.apply(obj_tv,screenMaterial);
objMaterialMap.scale = [2,2,2];
objMaterialMap.apply(obj_tv,tvMaterial);
obj_tv.triangulateQuads();
return obj_tv;
}
function buildMetaScene(metascene) {
// Create a material for the mesh
var material1 = new CubicVR.Material({
color: [80/255, 200/255, 120/255],
specular:[1,1,1],
shininess: 0.9,
env_amount: 1.0,
textures: {
color: "../images/2576-diffuse.jpg",
normal: "../images/2576-normal.jpg",
bump: "../images/2576-bump.jpg",
envsphere: "../images/fract_reflections.jpg"
}
});
var material2 = new CubicVR.Material({
specular:[1,1,1],
color: [224/255, 17/255, 95/255],
shininess: 0.9,
env_amount: 1.0,
textures: {
color: "../images/2282-diffuse.jpg",
normal: "../images/2282-normal.jpg",
bump: "../images/2282-bump.jpg",
envsphere: "../images/fract_reflections.jpg"
}
});
var material3 = new CubicVR.Material({
specular:[1,1,1],
color: [197/255, 179/255, 88/255],
shininess: 0.9,
env_amount: 1.0,
textures: {
color: "../images/6583-diffuse.jpg",
normal: "../images/6583-normal.jpg",
bump: "../images/6583-bump.jpg",
envsphere: "../images/fract_reflections.jpg"
}
});
var uvplanar = {
projectionMode: "planar",
projectionAxis: "y",
scale: [0.5, 0.5, 0.5]
};
var uvplane = {
projectionMode: "planar",
projectionAxis: "z",
scale: [0.5, 0.5, 0.5]
};
var uvcubic = {
projectionMode: "cubic",
scale: [0.5, 0.5, 0.5]
};
var torusMesh = new CubicVR.Mesh({
primitive: {
type: "torus",
innerRadius: 0.5,
outerRadius: 0.75,
lat: 24,
lon: 24,
material: material1,
uv: uvplanar,
},
compile: true
});
var planeMesh = new CubicVR.Mesh({
primitive: {
type: "plane",
size: 1.0,
material: material2,
uv: uvplane
},
compile: true
});
var boxMesh = new CubicVR.Mesh({
primitive: {
type: "box",
size: 1.0,
material: material3,
uv: uvcubic
},
compile: true
});
var sphereMesh = new CubicVR.Mesh({
primitive: {
type: "sphere",
radius: 0.5,
lat: 24,
lon: 24,
material: material3,
uv: uvcubic
},
compile: true
});
var coneMesh = new CubicVR.Mesh({
primitive: {
type: "cone",
base: 1.0,
material: material2,
uv: uvcubic
},
compile: true
});
var cylinderMesh = new CubicVR.Mesh({
primitive: {
type: "cylinder",
radius: 0.5,
height: 1.0,
lon: 24,
material: material1,
uv: uvcubic
},
compile: true
});
// Add SceneObjects
metascene.bind(new CubicVR.SceneObject({mesh:torusMesh, position:[-1.5,0,-1]}),true);
metascene.bind(new CubicVR.SceneObject({mesh:planeMesh, position:[0,0,-1]}),true);
metascene.bind(new CubicVR.SceneObject({mesh:boxMesh, position:[1.5,0,-1]}),true);
metascene.bind(new CubicVR.SceneObject({mesh:sphereMesh, position:[-1.5,0,1]}),true);
metascene.bind(new CubicVR.SceneObject({mesh:coneMesh, position:[0,0,1]}),true);
metascene.bind(new CubicVR.SceneObject({mesh:cylinderMesh, position:[1.5,0,1]}),true);
}
function webGLStart() {
// by default generate a full screen canvas with automatic resize
var gl = CubicVR.init();
var canvas = CubicVR.getCanvas();
if (!gl) {
alert("Sorry, no WebGL support.");
return;
};
// copied from samples/basic/materials.html
// New scene with our canvas dimensions and default camera with FOV 80
var scene = new CubicVR.Scene(canvas.width, canvas.height, 80);
var metascene = new CubicVR.Scene(canvas.width, canvas.height, 80);
var light = new CubicVR.Light({
type: "point",
method: "dynamic",
diffuse:[1,1,1],
specular:[1,1,1],
position:[0,5,2],
distance:20
});
metascene.bind(light);
// virtual cam
var metaCam = new CubicVR.Camera({name:"metaCam",width:512,height:512,fov:40});
metaCam.target = [0,0,0];
metascene.bind(metaCam);
buildMetaScene(metascene);
var sceneRenderTex = new CubicVR.SceneRenderTexture(metascene);
// Create a material for the mesh
var tvMaterial = new CubicVR.Material({
color: [1,1,1],
specular:[1,1,1],
shininess: 0.9,
env_amount: 1.0,
textures: {
color: sceneRenderTex,
ambient: sceneRenderTex,
}
});
var tvMesh = buildTV(scene,tvMaterial).prepare();
scene.bind(light);
// viewer cam
var viewerCam = new CubicVR.Camera({name:"viewerCam",width:canvas.width,height:canvas.height,fov:50});
// set initial camera target
viewerCam.target = [0,0.5,0.25];
viewerCam.position = [1,0.5,1.5];
scene.bind(viewerCam);
scene.bind(new CubicVR.SceneObject({mesh:tvMesh, position:[0,0,0]}),true);
// initialize a mouse view controller
var mvc = new CubicVR.MouseViewController(canvas, viewerCam);
// Add our scene to the window resize list
CubicVR.addResizeable(scene);
CubicVR.addResizeable(viewerCam);
// Start our main drawing loop, it provides a timer and the gl context as parameters
CubicVR.MainLoop(function(timer, gl) {
var lus = timer.getLastUpdateSeconds();
var s = (timer.getSeconds()/10.0)+1000;
// move the cameras on some magic path
metaCam.position = [3.0*Math.sin(-s*2.4),1.5*Math.cos(-s*2.1)+2.0,3.0*-Math.sin(-s*2.7)];
// rotate stuff in the meta scene
for (var i = 0; i < metascene.sceneObjects.length; i++) {
metascene.sceneObjects[i].rotation[0] += lus*2.0+0.1*(i+1);
metascene.sceneObjects[i].rotation[2] += lus*2.5+0.2*(i+1);
}
sceneRenderTex.update();
scene.render();
});
}
</script>
</head>
<body onLoad="webGLStart();"></body>
</html>