Cybertown Mall Cybertown Revival

Tutorial 3 of 10

CODING MATERIAL ATTRIBUTES

CREATOR NOTEby Morning.star, published with permission

Material is the area in an object's coding where color is applied directly to the object without the use of texture :

material Material {}

There are a number of attributes that can be assigned within material ( each X here represents a number with a value that falls between 0 & 1 ) :

diffuseColor X X X specularColor X X X emissiveColor X X X shininess X (0-1) ambientIntensity X (0-1) transparency x (0-1)

diffuseColor & emissiveColor are going to apply color right onto the object. But emissiveColor yields a more powerful effect & is less stable effect-wise so be careful how you use it. specularColor is the coding that applies a colored REFLECTION ( shiny effect ) to your object. It is also unstable effect-wise & should be used with care. shininess & ambientIntensity can be used to MODERATE the effects of the color attributes. See the 'Art Studio 1' object in the club for its use of colors & shine.

The 1st thing that you need to understand however, is how the numerical values work.

The VRML Color Pot

VRML uses RGB ( Red Green Blue ) to code color.

Imagine that you have 3 pots of paint sitting in front of you - on the left is a pot filled with RED paint; in the middle a pot filled with GREEN paint; & on the right a pot filled with BLUE paint. All you are doing when you assign a numerical value to the Xs in the color coding is throwing an AMOUNT from each of these color pots onto your mixing palette. The values you assign to each will fall between 0 & 1.

Here's a basic chart of the principle colors to help you understand VRML color as well :

0 0 0 is Black 1 0 0 is Red 0 1 0 is Green 0 0 1 is Blue 1 1 0 is Yellow 1 0 1 is Purple 0 1 1 is Aqua 1 1 1 is White

It is in the fine-tuned assignment of numerical values that the whole rainbow spectrum of color emerges. For this, you will get into a whole lot of the decimal points. I've always found it easier to mix VRML color if I visualize the numbers as drops from those colored pots of paint. Add a drop ( decimal point ) of one color, a few drops ( couple of decimal points ) of another - & voila!

Bear in mind that the lower the number ( closer to 0 ) the darker the color, & the higher the number ( closer to 1 ), the lighter the color. The best teachers of color, though, are EXPERIMENT & EXPERIENCE! So go ahead & try it out!

QUICK TIPS :

  1. It is not likely that you're going to need to use more than 3 decimal points to define your colors. Try to stick to a max of 2.
  2. Subtlety is often the best path to take when applying color effects so be careful how you use specularColor on your objects. I find I get the best results with it when I define its values at very near ( i.e. just slightly greater than ) those I’ve defined for diffuseColor. This is the most stable method that I have found to get a shiny surface that displays reliably & realistically & without an overpowering whiteout effect.

So, for example, if I were to define this diffuseColor 0.2 0.35 0.4, I might define the specularColor 0.25 0.4 0.45 to add just a little reflective light to the base color.

  1. If you are not using any of the color coding you can omit the attribute’s coding text entirely & browsers will render the material at the VRML default setting. That coding would look like this: material Material {}

Some creators insist that it is important to keep diffuseColor coding in & to code it to most closely match the texture going onto an object. I disagree with this for a few reasons:

  1. More coding more coding more coding - it all adds up to increased file size.
  2. If an object uses textures, who wants to see it in plain color if the textures fail to load? I'd rather have it appear white telling me that something is missing, than have it come in colored & thinking that is the way it's supposed to look.
  3. Including diffuseColor coding if you are using texture will slightly distort the way the texture displays. The same is true for the use of colored emissiveColor. Take a peek inside the 'Manse Mausoleum' in the club - each of the crypts inside have a texture on them but color differences achieved with the use of strong emissiveColors. You can achieve some variety this way.
  4. If you code the diffuseColor, specularColor, & emissiveColor attributes with radically different colors, you can simulate a simple animated color effect.
  5. All colors display more effectively, & other attributes like shininess & ambientIntensity display more effectively on rounded rather than on flat surfaces. Avoid using extreme amounts of glare ( specularColor & shininess ) on flat surfaces like aquarium glass because viewers will have their viewing impeded when they are facing an object dead-on --> that whiteout effect.

Shininess

When I first started hand-coding, I thought of the shininess attribute as the method for APPLYING shininess to an object. What I have found in the course of experimentation & experience however, is that it is not best used this way. To achieve a shine on something, I use the specularColor coding ( as discussed previously ). To further CONTROL the effect produced by diffuseColor + specularColor, or diffuseColor + emissiveColor combinations, I use the shininess attribute.

And, as is typical with VRML ( which I sometimes refer to as the Virtual Reality Muddling Language ), there is considerable irrationality to the numerical values. THEORETICALLY, 0 is non-shiny & 1 is shiny. But if I want to decreas the shine, I have to use 0.7 ( as an example of an upper-end value ) for shininess. When I use 0.3 ( as an example of a lower-end value ), the object is shinier; & at 0.5 it remains the same. Go figure.

ambientIntensity

Again, think here not of an effect you are ADDING but rather a coding tool to CONTROL the effects of the interplay between the material attributes of your object & the light attributes present in the scene. Put simply, ambientIntensity values control the amount of light reflecting from the scene onto your object. So for example, you could have a highly lit scene & a low ambientIntensity value, which would lessen the effect that the scene lighting has on the object. The values here are ( theoretically ) 0 for no reflection, to 1 for complete reflection. Again, experiment!

transparency

This attribute is going to make the piece more or less transparent depending on the value you assign to it. The values here are straightforward :

0 = non-transparent 1 = completely transparent

This is the coding you use to make semi-transparent window glass, water, bottles, & even completely transparent pieces like invisible restraining walls.

QUICK TIPS

  1. Browsers sometimes have difficulty reading objects with transparency on them when there are a number of them in adjacent positions in a world. To minimize adverse visual effects, I use the same degree on all of the pieces of an object if possible. The exception is where you have a piece of an object that is completely visually removed from any of the other pieces with transparency on them. In that case, you can use a different degree if needed.
  2. Beware the evil transparent .gif ESPECIALLY if it is visually adjacent to other pieces using material transparency. What's the solution? *clears throat, looks around vaguely, scuffles boot up against the pot of blue paint* Um ... there is none. In one world, "Spice Island", I had to completely rebuild the exterior house walls using solid window framing & no semi-transparent window glass at all in order to get rid of the problem ( which appeared as distant pieces with transparency on them superimposing over nearer pieces with transparency on them ). SIDENOTE : it may make a difference if an object is in at an angle rather than squared off east/west or north/south.
  3. transparency affects other material attributes by lessening their effects so don't expect the degree of shininess you put on your vase in its solid form to be the same when you make it semi-transparent - it will be less strong regardless of the degree of attributes like shininess you put on it. This is helpful when making those aquarium's glass enclosures. I use black for my glass & make it very very transparent. Check out my 'Elegant Aquarium' in the club. I use very low values for diffuse & emissive colors & high values for shine & transparency, like this :
material Material { diffuseColor 0.15 0.15 0.15 emissiveColor 0.15 0.15 0.15
specularColor 0.9 0.9 0.9 transparency 0.875 }}

You're welcome to use this coding for glass - AND, I would be delighted if you thanked me for the coding in your WorldInfo *smiles*

Now for a summation of the material attributes coding ( each X value will vary from 0.001 - 0.999 ) :

material Material {
diffuseColor X X X
emissiveColor X X X
specularColor X X X
shininess X
ambientIntensity X
transparency X }
... or if you are not using a texture, place these }} at the end ( the other bracket that pairs with the second } bracket is up higher on the appearance Appearance line in your coding ).

You may want to collapse these onto one line to save line space if you are not using all of them. AND DON'T FORGET TO LEAVE THE CAPITALIZED LETTERS IN - YOU'LL GET ERROR MESSAGES or a FAILURE TO DISPLAY IF YOU DON'T ! And YES! ambientIntensity has the first "i" in Intensity CAPITALIZED - just in case you can't see it clearly enough here.

Back to top

Written by Morning.star, reproduced unedited and published with her permission. Eleven documents. Morning.star has written many more and they will be added over time; this is not the complete set and does not claim to be.