ambiera home ambiera home

Ambiera Forum

Discussions, Help and Support.

Create a new account, Search, or Login:
Name:  Password:    
Ambiera Forum > CopperLicht
MMORPG with 3D scenes
Author Text

Registered User
2012-01-12 11:26:06


First I apologize for my bad English (I'm french).

I choosed CopperLicht to finalize a web project and I need some help.
I wrote a program to generate a universe (galaxies, stelars systems, planets, moons, stars, etc).
This program has to goal to build an universe for an mmorpg ( game. The universe is exported as SQL queries in PHP format file to fill the database's game. The game is developped in PHP and Javascript.

Now, the program that generate universe is finalized. It has been coded in Delphi 7 with a little bit on OpenGL and GLU library for the 3D display of the universe.
But for the game, the 3D displaying should be finaly displayed in Firefox browser that support WebGL.

So, the CopperLicht framework seems to be the best way to translate the OpenGL/GLU 3D displaying to Firefox using WebGL and Copperlicht.

The requirements are :
- Display mapped spheres for planets, moons and stars. I've found the CL3D.CubeSceneNode but nothing for sphere.
- Display rings for jovians planets (jupiter type). Is there any function to display a ring using minus and major radius or does I need to use and object (dae)?
- Display trajectories of bodies as a circle line. What function can display this?
- Move the planets around suns and moons around planets.
- Use picking to select a body and display it's associated values. What function that manage the picking of an object?
- Display a skybox around the world. I've found the CL3D.SkyBoxSceneNode function I need to use :)

With OpenGL and GLU I did it in 300 lines of code max. I suppose it's not more complex using CopperLicht?

You can find some screenshots of the Delphi/OpenGL/GLU program I made to this URL :

Could you me to reproduce the 3D displaying of stellars systems using WebGL and CopperLicht?


PS : You can join me at ccwam [at] hotmail [dot] com or on the forum writing to "actarus".

Registered User
2012-01-12 19:19:35

1. For spheres you can use this code:
2. You could quite easily create code that renders such a shape yourself, just create a ring of quads in a MeshBuffer.
3. For straight lines and circles, you can use this:
But you might want to create a Bezier curve yourself.
4. use addChild to do that
5. I believe there is a picking example available.
It is part of one of the demos. (the one with the building and stairs)

Registered User
2012-01-13 23:16:28

Thank you for your help.

I started to create a stellar system with 1 sun, 2 planets and a moon to check the concept.
The SphereSceneNode function is really easy to use, but there is too little polygons and the planet is not really spheric.
Is there any way to increase the polygons to have a perfect sphere?

Registered User
2012-01-14 12:38:34

Yes, I ported the minib3d createsphere function that can do that.
Beside the SphereSceneNode, you'll need MeshBuffer.updateNormals, so I included it.

The size of this object may differ from the previous version. Creation works as follows:

var sphere = new CL3D.SphereSceneNode(7,12);
sphere.getMaterial(0).Tex1 = engine.getTextureManager().getTexture("test.jpg", true);

Where 7 = size of object and 12 = number of segments around sphere (defaults to 8)

Registered User
2012-01-16 16:24:09

Great the new "SphereSceneNode" function. It fit ok with all I need.

I added for example a sun using CL3D.BillboardSceneNode plus light using CL3D.LightSceneNode, two planets orbiting around the sun and one moon orbiting around a planet.
All the sources and textures are available here :

So, I have some questions to improve the code :

I use CL3D.BillboardSceneNode to symbolise the sun and I would like to rotate the Billboard image but the AnimatorRotation class seems work only with 3D objects and not with Billboard. Is there any way to rotate easily the Billboard image?
Additionaly can I change the color of a bilboard?

Oval function does not draw anything
I used the "draw2DOval" function to display trajectory but when I add the following line nothing is displayed and all the scene desapears!
I surely made a mistake but witch?

CL3D.renderer.draw2DOval(0, 0, 20, 20, 0xFF00FF, false);

CL3D.AnimatorFlyCircle. How to set differents starts position for planets?
To rotate the planets around the sun and moons around planets I used the AnimatorFlyCircle class.
The problem is when the animation starts, all the planets start from the same orbit position around the sun.
Is there a property or a variable I can use to set the start planet position when animation begins?

planet1.addAnimator(new CL3D.AnimatorFlyCircle(sun1.Pos, -20, new CL3D.Vect3d(0,1,0), 0.0002));

Ambiant light ?
I added a spot light at sun position using the following code. It work well but how to add an ambiant light?
Without ambiant light the night face of a planet is totaly dark :(

var lightnode = new CL3D.LightSceneNode();
lightnode.Color = CL3D.createColor(1, 1,0,1);

Replace the key handler by another one
And to finish I would like to replace the default key handler to a custom like :

Without shift key pressed :
-> mousemouve with left click = translation (X,Y)
-> mousewheel = zoom in/out (z)

And when the shift key is pressed :
-> mousemouve with left click = rotation (X,Y)
-> mousewheel = rotation (z)

How can I make this?

Thank you for your help :)

2012-01-16 20:23:42


rotating a billboard isn't possible, no, sorry. Not sure about the oval draw function, it isn't by me. For AnimatorFlyCircle: For changing a start position: This is done in the constructor of the animator, setting the start time to the current time. Like
yourAnimator.StartTime = CL3D.CLTimer.getTime();

If you add some random time like
yourAnimator.StartTime = CL3D.CLTimer.getTime() - 4000;

then you move it by 4 seconds.
Ambient light: Looks like the documentation there is missing. Set it like this (in the scene object):

yourscene.AmbientLight = new CL3D.ColorF();
yourscene.AmbientLight.R = 1.0;
yourscene.AmbientLight.G = 0.0;
yourscene.AmbientLight.B = 0.0;

for some red light.
Key handler: I think there was a post in this forum for that. Search it, I think it's still there somewhere.

Registered User
2012-01-16 20:29:40

About the oval command, use it like this:

engine.OnAfterDrawAll = function() {
engine.getRenderer().draw2DOval(0,0,20,20,0xFF00FF, false);

As for billboards, you could perhaps just create a quad-shaped mesh and 'manually' point it towards the camera each frame.

Registered User
2012-01-20 12:02:32

I made some modifications :

- Adding ambiant light
- Adding planet picking using CL3D.Animator function
- Adding custom key handler for camera movements (translation added but not rotation)
- Adding planet rotation around the orbit
The StartTime is ok but difficult to use because it depends of the rotation speed.
The best way should be to define the "start angle" of the rotation. Is there any property to do that?

The oval function :
Big problem with it.
If I use it adding the following code I get this result :

A circle on the top left of the canva but the circle is not linked to an object.
Additionaly, the circle should be oriented on the three axes X,Y,Z, but the function cannot provide this.

About material
Can I display an object without texture, only with a solid color ?
Here is an example below of the result I try to reach:

Camera rotation around the scene
I handled the keys to customize the camera movements.
Translation is ok (code below) but how can I rotate the camera around the scene?
I tried to attach a CL3D.AnimatorFlyCircle to the camera but nothing moves.
Is it the right way to move the cam on X,Y,Z around the scene using keyboard?

Mix WebGL basic functions and Copperlicht
Is it possible to use Copperlicht with WebGL API basics functions?
My goal is to subsitute Copperlicht bilboards that cannot be animated by WebGL bilboards to animate myself.

Example here :

And last but important question:
Atmosphere planet
How can I create an atmosphere planet?
I suppose that I need to create a gradient (shader) surrounding the sphere.
Anyone can help me creating this function?

Registered User
2012-01-21 20:22:30

A circle on the top left of the canva but the circle is not linked to an object. Additionaly, the circle should be oriented on the three axes X,Y,Z, but the function cannot provide this.

The draw2DOval command draws a 2D oval on the canvas. If you want it to follow an object, you should 'project' 3D coordinates onto the 2D screen and use those projected coordinates to draw the oval.

Registered User
2012-02-01 15:36:43

I am starting in WebGL and I use your object for create a sphere. But i would like to know how to put a solid color on a sphereNode instead of a texture?


Registered User
2012-02-03 20:18:19

To put a solid color on any object, use a custom shader.
In tutorial 5, change line 94 to:

gl_FragColor = vec4(1,0,0,1); \

Which should make the cube red.

Registered User
2012-02-04 06:46:05

Or use a red image as texture. :)

Registered User
2012-02-06 11:51:01

thank you,
for the color I created a 1px/1px image in php and I use it as texture.

Create reply:

Posted by: (you are not logged in)

Enter the missing letter in: "Inter?ational" (you are not logged in)




Forum Codes

Feature Code
Link [url] [/url]
Bold [b]bold text[/b]
Image [img][/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]



Software: Ambiera Light Forum. © 2008-2018 Nikolaus Gebhardt, Ambiera e.U.