Updates to the skybox system

We've recently changed the way skyboxes worked. As you might know, there used to be a fixed number of choices, in a list style dropdown under the Scene properties. It used to look something like this.

image

This was a bit of a pain, because you couldn't use your own skyboxes. We've changed it so that you can! You should now see the texture map picker in place of the dropdown.

image

Virtulous can import sky maps in 2 formats, the horizontal cross, and latitude/longitude. A horizontal cube is formatted like this

image

A lat/long map is more like a square image that is distorted at the top and bottom

image

Just choose the proper format from the dropdown.

For those of you using the demo environment settings - I've updated them, but your scene might be out of date. If you see the skybox is rendered, but no longer seamless, and you see edges, just drag and drop the environment settings again.

You can upload a skybox to the texture server, but until we get the map picker integrated with the repo system, you'll need to place the URL directly into the texture picker. Find the plus, and enter the URL from the asset repo.

image

. . .

Texture Browser Update

As you can probably tell, Virtulo.us has a lot of different systems for uploading and storing content. In the distant past, we included an inventory server right in the user database. Over time, the 3D model services were migrated to an external service.

Then that service disappeared.

Then we created a new inventory server, and used that for both use libraries, as well as models and textures.

This most recent service still exists, and is the one you see when you use the dropdown for Assets->Manage Assets or Assets->From File

image

This service is no longer the best way to upload a 3D model - Use the Assets->Asset Store-> Upload a Model menu item. This places models in the new Asset Store server, and does all the nice conversion for file types and such.

image

The Asset Store has been around a while, but there was no good way to get the textures that are uploaded to it, other then to copy and paste the URL into the texture field.

We've finally updated the Texture Browser

You'll now see an entry for the Asset Store when browsing for textures

image

You can browse by tag, category, all textures or just your own.

image

Pagination is handled by creating multiple sub folders. This is not ideal, and we expect to update this GUI to have better page numbers.

image

Assets->From File is going away

There is no longer any good reason to upload files to the inventory server this way. We're going to start reserving the inventory server for material definitions, entity definitions, and other JSON objects.

For now, if you need to upload a sound file or video, you can still do this. When we disable file upload to this system, existing objects will still be available.

For 3D models or textures please use the new Asset Server

. . .

Fog settings change

Changes to the system

The sky and fog setting have been slightly changed. In particular, you might see a slight difference in atmospheric density between the old settings and the new. The default environments in the library have been updated.

I've never been particularly happy with the sky and fog system, but this update should make things slightly better. We've also changes the names of the modes to better reflect their use - Linear is now called Basic and Quad is now Atmosphere.

This seems like as good a time as any to describe how the fog settings work, and how they interact with the skybox.

How to use it

Fog is set up on the Scene, under the property section called Fog

image

The whole system has three modes. When in each of these modes, different settings do different things.

  • None
  • Basic
  • Atmosphere

None

In None, there is no shading applied. Here's a test scene with a fog type of None image

Simple

In Simple mode, only the Fog Near and Fog Far settings do anything. You can think of these numbers as the depth at which the fog begins to affect the scene, and the depth at which the scene is completely covered by the fog.

Heres the same scene with a near of 0 and a far of 100:

image

Decreasing the Fog Far value to 11 makes the visibility totally opaque by 11 meters from the camera:

image

Here is the same scene again, with the Fog Near at 45 and the Fog Far at 70. Notice the sharp transition between 0 and 100% fog: image

Atmosphere

This mode is more complex. There are actually 2 whole different fog systems available here - one for atmospheric haze, and one for a height based fog. Lets start with the Atmospheric Density only, and the Fog Density set to 0 image

You'll notice a few cool things here. First, the sun actually effects the haze! Because we have the sun light on and the atmospheric haze activated, we can see a sort of a bloom where the light passes through the sky. This changes with the intensity of the sun, as well as the density of the atmosphere. Here's the scene again with the Atmospheric Density turned up.

image

You'll notice that you can't control the distance based falloff as directly as you can in simple mode. Instead, we use a fairly reasonable approximation of real optics to decide how far things are visible based on the density setting. Here's it turned up even more.

image

The atmosphere takes it color not from the Fog Color setting, but from the sky color as defined by the Sky Horizon Color and the Sky Apex Color

image

The atmosphere setting also has a secondary fogging function - not the "atmosphere", but a layer of fog that occludes the atmosphere. Here's the fog density turned up. You can see the atmosphere color as a blue tint that is sort of overcome by the orange fog.

image image

You can do some cool things with this additional fog layer, but the numbers are really not intuitive at all.

image image

Here is a layer of fog that falls off as you go up. You can see the outline of the sphere on the right, but it's occluded by the atmosphere.

image image

Here are the same settings with the atmosphere density reduced. Now you can see how the fog density falls off vertically, just like the real fog in the the image below

image

I wish I could explain exactly how the various numbers (Fog Density, Fog Falloff Start, Fog Falloff) relate to each other, but it seems that they are completely un-intuitive. I'm using the formulas from Inigo Quilez, so if anyone can figure out how these values work, shoot me an email.

. . .

Using this.Schedule

We've recently added a new function to the APIs, and I want to take a moment to describe how it's used. You'll now find a few new function available on the Entity that let you schedule new actions to happen in the future. While it has always been possible to count ticks and keep track of things like this, it's nice to have this implemented at an engine level. First, here's the basic syntax

this.schedule.in(20, this.setRadius, [0])

This will cause the this.setRadius function to be called in 20 ticks (1 second) with the parameter of 0;

You can also do

this.schedule.every(1,this.setRadius,[1]);

This will call it every 1 tick. We also have a nice alternative syntax

this.setRadius.schedule.in(20,[1]);
this.setRadius.schedule.every(1);

These work exactly as you would expect.

Tutorial

One of the cool things you can do with this is to interpolate properties. In this brief tutorial, we'll create a function that animates the value of the radius until it reaches some value;

Start off my making a sphere:

image

Create a Script, and attach it to the Sphere:

image

Add a new function to the script, and call it 'setRadius' Make sure you have the script selected!

image

Here's the full text for the setRadius function.

function setRadius(rad)
{
    var diff = rad - this.radius;
    if (diff > .01)
    {
        this.radius += diff / 10;
        this.setRadius.schedule. in (1, [rad]);
    }
}

Then, in pointer click, you can just call this.setRadius(2)

image

Instead of immediately changing size, the sphere radius will animate! We didn't even have to add any code to the tick method!

You can get even trickier with this:

function pointerClick(eventData, nodeData)
{
    this.schedule.cancel(this.setRadius);
    this.setRadius(this.radius + 2);
}
. . .

Orthographic Views

image

At long last we have a proper top, left, and front orthographic editor view! This should make aligning objects much, much easier.

There are a few bugs to work out - the scale tool in particular is hard to use in the top view. You'll also find that when you create an object from the side or front, it's X or Y location is probably not what you'd expect. Other than that, this should work pretty well.

Note that the focus button will not return you to perspective mode - you'll need to switch to orbit then hit the focus button.

You can get to the top, left, or front views by clicking the little plane icons in the toolbar ( Under 'rendering' in this screenshot).

Now that this is all worked out, stay tuned for an Orthographic Camera Entity that you can use in your sim!

. . .