sagh0900
Registered User |
Quote
|
| 2012-11-07 12:04:45 |
|
<script type="text/javascript">
function CopperlichtStart()
{
// Create 3D Engine
var engine = new CL3D.CopperLicht('glcanvas', true, 60, true);
if (!engine.initRenderer())
return; // this browser doesn't support WebGL
// Create a 3D scene and add it to the 3D engine
scene = new CL3D.Scene();
engine.addScene(scene);
// Set the scene background color
scene.setBackgroundColor(CL3D.createColor(1, 0, 0, 0));
//Force the 3d engine to update the scene every frame
scene.setRedrawMode(CL3D.Scene.REDRAW_EVERY_FRAME);
// Create a box and add it to the scene graph
var boxnode1 = new CL3D.CubeSceneNode();
var boxnode2 = new CL3D.CubeSceneNode();
scene.getRootSceneNode().addChild(boxnode1);
scene.getRootSceneNode().addChild(boxnode2);
// Add image to the sides of Cube
boxnode1.getMaterial(0).Tex1 = engine.getTextureManager().getTexture("resources/crate.gif", true);
boxnode2.getMaterial(1).Tex1 = engine.getTextureManager().getTexture("resources/crate.gif", true);
// Assign box a rotation
boxnode1.addAnimator(new CL3D.AnimatorRotation(new CL3D.Vect3d(0.0, 0.15, -0.15)));
boxnode2.addAnimator(new CL3D.AnimatorRotation(new CL3D.Vect3d(0.0, 0.15, -0.15)));
//Create a camera and add it to the scene graph
var cam = new CL3D.CameraSceneNode();
// Position
cam.Pos.X = 0;
cam.Pos.Y = 0;
cam.Pos.Z = 20;
// Width-to-height ratio or Aspect Ratio
var canvas = document.getElementById("glcanvas");
var AR = canvas.width / canvas.height;
cam.setAspectRatio(AR);
// Field of View
cam.setFov(45);
scene.getRootSceneNode().addChild(cam);
scene.setActiveCamera(cam);
// Creating the shader program which gives the cube its surface.
var vshaderScript = document.getElementById("vshader");
var fshaderScript = document.getElementById("fshader");
var newMaterialType = engine.getRenderer().createMaterialType(vshaderScript.text, fshaderScript.text);
if (newMaterialType != -1)
boxnode1.getMaterial(0).Type = newMaterialType;
boxnode2.getMaterial(1).Type = newMaterialType;
else
//Exact error message from shader code is written on the website of Copper Licht
alert('Unable to create shaders');
}
</script>
</head>
I tried to add one more cube to the scene to compare the fps with single cube on canvas. But the above snippet isn't working. I want to add as many as cubes to the scene may be using like a " for loop " algorithm. How Could I do that? Moreover, I want to print the FPS to external file like notepad or Excel in Local Repository. please someone help me doing so. Moreover, The size of Cube using cube scene node is pretty big on the canvas, if I ad more cubes to the scene, will cube size reduces automatically so that to maintain of Field Of View?
To represent the CONE, do Copperlicht, have any predefined models like CubeSceneNode for cube?
Sorry, I put lot of questions, but answers to these can clear my whole doubts on this framework.
|
niko
Moderator |
Quote
|
| 2012-11-07 12:26:08 |
|
Hm, you created two cubes, but it appears to me you created them in exactly the same position. Set the position of one differently, and you should see two cubes.
The cube size won't resize automatically, why should it :)
No, there is no cone, but you could create one yourself, like in this tutorial here: http://www.ambiera.com/copperlic...
|
sagh0900
Registered User |
Quote
|
| 2012-11-07 12:48:51 |
|
Where to set the position in the above snippet? Is that camera position i need to work on? I'm confused here. So Can we create cubes using for loop with help of array? in that scenario, how could I set different positions for different cubes? please don't mind my questions rush. I took this specific examples to learn Copperlicht without help of CopperCube so that in future i could use any model.
Btw, How to print FPS on external text files to maintain a log?
P.S: I updated the above snippet with following code, but unfortunately i couldn't see the cube on screen. btw, for now to check with position, I commented out second cube code on above snippet. What are the range of x, y, z value coordinates?
boxnode1.Pos.X= 5;
boxnode1.Pos.Y= 0;
boxnode1.Pos.Y= -20;
boxnode1.addAnimator(new CL3D.AnimatorRotation(new CL3D.Vect3d(0.0, 0.15, -0.15)));
Please help me with all questions in the post.
|
sagh0900
Registered User |
Quote
|
| 2012-11-07 19:47:55 |
|
<script type="text/javascript">
function CopperlichtStart() {
// Skapa 3D-motorn
//var engine = new CL3D.CopperLicht('glcanvas');
var engine = new CL3D.CopperLicht('glcanvas', true, 60, true);
var arr = new Array();
if (!engine.initRenderer())
return; // this browser doesn't support WebGL
// Create a 3D scene and add it to the 3D engine
scene = new CL3D.Scene();
engine.addScene(scene);
// Set the scene background color
scene.setBackgroundColor(CL3D.createColor(1, 0, 0, 0));
//scene.setRedrawMode(CL3D.Scene.REDRAW_WHEN_SCENE_CHANGED);
// also, force the 3d engine to update the scene every frame
scene.setRedrawMode(CL3D.Scene.REDRAW_EVERY_FRAME);
for(var l=0; l<=10; l++)
{
for (var j=-10;j<=10;j+=3)
{
arr[l] = new CL3D.CubeSceneNode();
scene.getRootSceneNode().addChild(arr[l]);
arr[l].getMaterial(0).Tex1 = engine.getTextureManager().getTexture("resources/crate.gif", true);
arr[l].addAnimator(new CL3D.AnimatorRotation(new CL3D.Vect3d(0.0, 0.15, -0.15)));
arr[l].Pos.X=j;
arr[l].Pos.Y=j+3;
arr[l].Pos.Z=0;
}
}
//Create a camera and add it to the scene graph
var cam = new CL3D.CameraSceneNode();
// Position
cam.Pos.X = 0;
cam.Pos.Y = 0;
cam.Pos.Z = -80;
// Width-to-height ratio or Aspect Ratio
var canvas = document.getElementById("glcanvas");
var AR = canvas.width / canvas.height;
cam.setAspectRatio(AR);
// Field of View
cam.setFov(45);
scene.getRootSceneNode().addChild(cam);
scene.setActiveCamera(cam);
// Creating the shaders gives the box its surface.
var vshaderScript = document.getElementById("vshader");
var fshaderScript = document.getElementById("fshader");
var newMaterialType = engine.getRenderer().createMaterialType(vshaderScript.text, fshaderScript.text);
if (newMaterialType != -1)
for(var l=0; l<=10;l++)
arr[l].getMaterial(0).Type = newMaterialType;
else
//Exact error message from shader code is written on the website of Copper Licht
alert('Can't Create Shaders');
}
</script>
</head>
 🔎︎
@niko, I could cubes like below image on the canvas which are added to my scene, but unfortunately I couldn't see all of them. I think I'm doing some mistake with positions. please help me. I can see the cubes rendering in this way, but i want them to distribute on the whole canvas, moreover Is FPS depends on the camera positions as well? because when cam.Pos.Z = 20 FPS dropped to 10 t0 12 in between, where cam.Pos.z= -80; it still manages to reach 60.
I want the cubes to look like in this way:
 🔎︎
|
niko
Moderator |
Quote
|
| 2012-11-08 07:34:03 |
|
Looks like you solved it yourself already. to make the positions look more like in the image below, also set the .Z position to some value. Currently, you set all to 0. Another idea would be to set all positions to a random one, like yournode.Pos.X = Math.random() * 100.0f;
But your image looks like the cubes are distributed on a grid, so I guess they are doing it somehow like this:
var c = 5;
var scale = 2;
for (var x=0; x<c; ++x)
for (var y=0; y<c; ++y)
for (var z=0; z<c; ++z)
{
var b = new CL3D.CubeSceneNode();
scene.getRootSceneNode().addChild(b);
b.Pos.X = x * scale;
b.Pos.Y = y * scale;
b.Pos.Z = z * scale;
}
|
sagh0900
Registered User |
Quote
|
| 2012-11-08 13:20:48 |
|
The above code works since I can see variations in fps but I couldn't see single cube on the canvas :(
|
niko
Moderator |
Quote
|
| 2012-11-11 20:04:37 |
|
You need to play around a bit with it. You are probably simply not looking with the camera into the direction where you created the cubes.
|
sagh0900
Registered User |
Quote
|
| 2012-11-11 23:38:06 |
|
wrote:
You need to play around a bit with it. You are probably simply not looking with the camera into the direction where you created the cubes.
I modified the code, where scale = 500; N= 1000
for(var f=0;f<=N; f++)
{
cubes.push(new CL3D.CubeSceneNode());
cubes[f].getMaterial(0).Tex1 = engine.getTextureManager().getTexture("resources/crate.jpg", true);
cubes[f].Pos.X = Math.random() * scale;
cubes[f].Pos.Y = Math.random() * scale;
cubes[f].Pos.Z = Math.random() * scale;
scene.getRootSceneNode().addChild(cubes[f]);
}
and set the camera position to :
var cam = new CL3D.CameraSceneNode();
cam.Pos.X = 0;
cam.Pos.Y = 0;
cam.Pos.Z = scale/2;
My cubes look like this:
 🔎︎
My question is: Is there any particular scale for positioning objects and camera looking in copperlicht.
My desired solution is: I want my camera look in middle where my all cubes should be visible. If you notice in the image, my cubes are positioned only half of the canvas. I think there should be some trick with positioning camera. Please I request you to find a solution. I tried in all sort of ways, but couldn't find what I want.
|
sagh0900
Registered User |
Quote
|
| 2012-11-12 01:17:18 |
|
 🔎︎
I managed finally. Btw, for 1000 cubes I couldn't cross more than 20 fps. Why?
|
niko
Moderator |
Quote
|
| 2012-11-13 06:21:16 |
|
1000 objects are a bit much, this means 1000 calls to the GPU, and JavaScript isn't that fast either. :)
|
){kind=link}