Lighthouse3d.com

Send me bugs and suggestions, please
VRML Script Tutorial
Full list

VRML Interactive Tutorial

Introduction
VRML File Structure
Drawing: Shape node
Geometry Nodes:
Box
Sphere
Cone
Cylinder
PointSet
IndexedLineSet
IndexedFaceSet
Extrusion
ElevationGrid
Example: Chessboard
Text
FontStyle
Appearance
Material
Textures
Image Texture
Movie Texture
Pixel Texture
Texture Coordinate
Texture Transform
Let there be Light
Directional Light
Point Light
Spot Light
Materials with Colored Lights
Hierarchical Node Structures
Group
Transform
Collision
Anchor
Billboard
Switch
Inlining Files
Defining and Instancing Nodes
Defining Levels of Detail
Events in VRML
Creating Paths between events: ROUTE
Generating Events based on Timers or User Actions
Timers
Touch Sensor
Visibility Sensor
Dragging Sensors
Plane Sensor
Sphere Sensor
Cylinder Sensor
Proximity Sensors
Example: Proximity sensor
Interpolators
Color
Coordinate
Normal
Orientation
Position
Scalar
Example
Let the Music Play
Sound
AudioClip
Bindable Nodes
Who Am I: NavigationInfo
Where Am I: ViewPoint
Adding Realism to the world
Background
Fog
Information about your world
WorldInfo
Definition for Auxiliary Nodes
Coordinate
Color
Normal

[}8{)0 ~Cv٫{Uf*%``'{{>`ml.51RwZVK"[?៿fty񺥪|O{x#fڢ{pj8T?މ<7q2by(9\ c{yFKg~˒7rbžР =vv*=ڵ$65~oFª37/{= S[lt/0#ps,Jv96HbGg1rOF~GS,( ]WZh_ط,"I;Qx)p{L=1R >nPA֔8ďh (Ngx=I=/M(3&=&@1EPF yr]ʞm9oI4hr+h=L?x1 b>y0alc]O(q/b<;L)D8A Hq{^"2yX':gͮfh{o={]TDP8C4L0ri]&(%G+R:ݳN 1 U0jm xi=1خ%|I 4R8]fΖuWBy)ǛvdJ8Nh2 !?S4GR X֞P$ {i "owGK(Dey qf n`0հPء <EqdhQ`>% <致mHZJXM&莚\ bKWro<&$ v^|*ĶmOa-N7N>3?P;Q8>um>=}zS(\~"$?QkWXʄ䛛VU|N:|:~U-}H:[qkrZ)ȳC6m?1'bM$׹uo3,(-Bm=?4޲Y*<_h;'MOCЩ%{σq;6 נĻe@3Oeل9[VAp+*P0B)QXJdKHct?`McF <Şam+~~$> @zy͋W'`S ), ;Q֟%=5JS`P e(J} U ,y B{R,Y?f2L7+2ߓhiU7v a:`RjӶدfy]x3:1{&o}ZZ691 ĕmA 1FUG}'E0G ;,,9zwZLlQH;3&#!jd`jx$x^s]0H0C3{`' [@E0 @ھ SŽjaue3`t0cu0$/jO"˪|X4)TߑAc]6Cʞ3i.\Mi 8,\)vpwE 7?CUFDg9Pw}|}BEMHg:k@mP4ڃ1~nAf#QR=]!uFQ#HhD#Y :g!ӇGɆ@8٫q۫0Q0-#8Ka'3uJM&`NLʦl-M̌?pQɇd Kdzbt^N3zCê Sd,0 [ Vu&ck >R6LvM9&Lmm|`N28%qHcdiU yiW9DxI=+,a*;`_U e3ƗLC1P,cm$zK0 13X] t*FaUL#o 8nc',A L(ԃ$9nXcLfOitV[x|{`?s(dhCix,,*1 Y#K`{U'?yN!6't7(W+ 5 u+ fu.j=_,N>\8{F4 ?ӈ73 <g.kbd/>Ez/U$jCVXІ'ksoM"g=(y=^MoΗ "!6E2$e[ AJGLILaX.=xzq2>;s^vgI 3~ۙ*13 =$8Q ;'WOGR82sN7.XtX͓9C}(B:©;b)RkZ6)2y&s.v~ y5cOjiQw=|J +?OBJ\ڋm/:7w_;F KT"I@T#LB_g /xd-@+Q7!6?rqq$]Y4WǓn!1:1xTm& ,a~>.p:TuBaYLEYL"y? ,_DX I1OL9C䤱3=g߇ʠtk"Jyz:;;=ܠseX|7dй+?\$ɤl%x:I6:H7<EG}C{hϪX^7VȈ$!rQXI)ÉPN ՁEƓy$cPJw]@2Pzq'" ; D3<)٩&'X0;3~-ag? h dLE[v`e!DJNX[2$I)oTA+(T8ԾwWLe'üOs 㫡 3v )3~bNS--0" :>p ;cvnjnb|j\Jmv0*-1݂Jbj3aO7 vK>sOCbkUI3šueYGgAVKIiűH/I=';^W0`Ao `74I;?qOK1s|6 zVEކ9cLG.I5ip?44V-UUQQ{әA4gtgրuG̮Lp V_܀,f[5n(5$\JgH휆\Je|f}{-=@CN`_ VѺEymb0L ? 7q:H?"C7Q<=)^1d%lut`7<g<Dz%bc?=V CV^d`nxJ1T8֛xPm2>]xhPLDA}&#'co0%" t8K8T FXmI sss|fuX-j˹'L@yNǁh8kk" &t^%&S:WU1|LA3#m۳Ŀں=j|"8Z ]|ύGvÎ( C1AA"'w(l~a!R᛿ ˢ&P7ߴ0Q65^n"(ȞIփQqFGNyլȱZ[58 h?7`DY0Bz4w-ht60d )؟Mћ tښxV1Nd)mE$=ڸph?JgZ)yh_bE`+360 T享T``R@bdㅹw[;VZmg! 3낊$ '؊g3#|ْh0:Su"Y[ujLUUO_.Tdx]+O M\*W3LpHQ悡C e檅rK\\C!K0w 5']Qs۸~g8/SJ$HJ$q'ĭCK1E(I c@4/7}$vgx|JY +l`4 VeXHVYO0Ռj_dQS>vtҳv:?*}3OιZ@iK`F)@ءIpp`iŠs7YzѳCUQ(HFGQ:w; xpB=t0rn{kH:cҠ^})g2E/C# l5$KvIY>Q`mЇ%֫yV%ٜ@VE|L .Ȳw+W൜bBXUO,mj6~a0su;9xjrEf,7Im$8 |q/@eE5O|ٲr}Nzta6Oaݭc(`<G8 |c[tۖ*ъl^ .JK-X%˨>)x0؏/GDK>Vz\Rm[{0[}+J$Gaecɧ໸rhL:TGl &}SƔI9c>4am{pqÈ#ZKU$`%%0'tϧ8M }H ~,:A[,/7z%>nuT^tf8:V'*`>/ R>H U:8u~“ e zo:n ܶ$WuW*fC\f~L'էnvrK@Iѧe2_ #ol/& Pa M$$'#`Q0!,fZ<nRI `@oHib RHm D̹*sFK)uڹX|cnSTa pp &SFkFrp-ܜs9:%%Ԋ~ ծƲ%j&F*9h]8bx~H4g Sd֟`頌>fGJ.!)v`%/t F6{)H F|/ϕ #j D]+ )t:.}?sY5K'ͩ(uO68Srsa;yw޳^ &ʄGooy.# }tI=?X8tI=.A% ^zM)> h.D>}3vFwBzi<S0d봼Y^i`VtH ,G+N5zxmcux`lUdPihcUxrʹF[+^ybh].׳v sPO~G9}9(j=sv!z6U.4V}Zm,/: R j=htNfIqUlg'߾S |a`j# NrLҍΙ(v]eR0}o8^d$&C-Yuڊ.0 &B hp*I)ђ!6oF20͈JVf.^F`7sajrXA]uqL`p:`WƣXr;L 辤m ~=3;^y+ :Q?ݕi\f&+H Oһm#6Rs~RIĻzastZo6onU^|PQq9#I "_<+yVOx|gﭛsy"ң{Q*ejU#s#=hR2לj3^STtӆ*8{ܻ[N=_ VbDY΀L-]ZuCOGy8[8 j$e|xbFO{sg 3xjY,^-Љ+k,*لdW煰N\x4kZM^Rj(\z# 5YkJՐ9+Xu8,^)@c`e7Zٍ9ՅH P8^y&pZ-:aA95`@T q1a+YD)j݌fz($ @Wq7W*F1X< gpx@C9^]rgчwE Yd,7G )"X+vwAZd4 Bbn5uvMRrs BEB<klCZ9lFJHcOܪa1l8<|])q36m|n zCUwT-xE*d%?p!ՔC #c]… eОV6`f7};WLqc4;9<< 7;yb4MBY!ON x[is};FS]]&i'i /W>Y7)2?iIvvOBJ;tP"yҭli7:O=,DS]

Background Node


The background node provides a way to describe the horizon of your world. This is a bindable node.

The background node allows you to define the sky, ground, and panorama images to add an horizon to your world. All items on the background are placed as if infinitely far away from you, i.e., you can never get closer to the background images.

Syntax:
Background {
skyColor [ 0 0 0 ]
skyAngle [ ]
groundColor [ ]
groundAngle [ ]
backUrl [ ]
bottomUrl [ ]
leftUrl [ ]
rightUrl [ ]
frontUrl [ ]
topUrl [ ]
}


The sky is defined as a infinitely large sphere placed around your world. You can define a constant color for it, or have gradient effects.

The sky color is defined by two fields: skyColor and skyAngle. If you want a single color sky, like the figure on the left above, then you specify a skyColor as the RGB of the desired color, don't specify the skyAngle. The skyAngle is only used when a gradient effect, like the image on the right above, is intended. If you want a gradient effect then you specify the color for the upper pole of the sphere as the first color in the field skyColor. Next you specify at which angle you want a new color (the angle is measured from the upper pole) in the skyAngle. The second color in the skyColor field specifies this last color. The browser should create a gradient between the first and second colors, starting at the upper pole and ending at the angle specified in the skyAngle field. You can specify any number of colors and angles, the number of angles should be the number of colors minus 1. The first color always corresponds to the upper pole. For instance the following combinations were used to create the above images:

Left Image
SkyAngle SkyColor
0 (upper pole) 0 0 1

Right Image
SkyAngle SkyColor
0 (upper Pole) 0 0 1
1.2 0 0 0.6
1.57 1 0 0

On the left image only one color was specified. In this case no angles are specified because the first color is always the upper pole color. The Sky is all blue.

On the right image from 1.57, roughly 90 degrees, to the lower pole the color used is the last color specified, i.e. red.

Similarly to the sky, the ground is also an infinitely large sphere. The ground sphere is placed inside the sky sphere. The only difference between these two spheres is that in the ground sphere if you do not specify a color, you can see through it, i.e. you can see the sky sphere. Usually, for the ground sphere colors are only provided for the bottom hemisphere.

The following images provides a ground combined with a sky.

The ground color and angles used were:
groundAngle groundColor
3.14 (lower pole) 0.5 0.5 0
1.57 0.5 0.5 0

From 1.57 radians to the upper pole the ground is transparent because no color was specified, therefore allowing you to see the sky sphere. Note that you must specify at least two colors for the ground, otherwise there will be no ground. If you want a ground with a constant color just specify twice the same color. Specifying only one color doesn't provide you with a background.

You can place images on the sides, top and bottom of a conceptually infinitely large box placed inside the ground sphere. Since the box is placed inside the sky and ground spheres, in order to see through these you should use images with transparent parts.

The source code that follows was used to produce the background for the above image

Example:
Background {
skyAngle [ 1.2 1.57]
skyColor [0 0 1, 0 0 0.6, 1 0 0]
groundColor [0.5 0.5 0.0]
backUrl "back4.gif"
rightUrl "back4.gif"
leftUrl "back4.gif"
frontUrl "back4.gif"
}


The image used for the sides of the box is

The border presented in the image is only to give you the notion of the image size, it is not part of the image. Black is the transparent color of this image. Looking at the image one can see that the mountains start only at half of the image, they don't start from the bottom of the image. This is because the desired effect was to have the mountains starting when the ground was over and the sky started.