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/SI$H$q'ĭCK1E(I c@4/7}$vgx|JY +l`4 VeXH r5`ثվ16Vɢ|g#t~>U<-g0s XӖ6 R؁CzҊAcIccg7{}7uv I%x`4z,P֐tƤARdH_WGL}ڶ`'`V؇I¸/:ƀqOwnif0Yc3Q:*SEòm+M(9H9cC>4m{pq#ZKU$`%%0'tϧ8M }yrI0 ~,:~[,/7z!%nuT^tfا:V'*`>/ R>H U:8u~“ e xzo:n ܶ$WuW*fC}D'էnvrK@Iѣe2_ B7rt[&bӓԑ?L0H3H@lRCD*PÛ7R؂43RGn%2Ql?AC*snʜQ@Rv.0b ”=,U؂b )њ6\8o 7-lNE%5NI !Cl eJ?Z~'=YlT !/3X:(vHj )]h%酪MpJo3R2FB=!a= Jȅ5 z.-Ѯn OGFT]IĞ/3 &7O l`C95aԞO{Dp%jLnOÀpvj3]K,-|a 9*ՌDUh܋3o\r UFRmivsrz5 E[%O߉Y_f&KRYk%'l#f5Vcög76D4T&M(1KӶ|ٺVpo⹔-'O/ԕ˶o 0D+qBv,B^@N(7k䲷=e[b1*k&h/q2/~d|ʮM|KkS+d(o9P=h"1d(bI(Fwm <"XG+|!t\ f٢˗Pp3 I؇гO&ilǼaZ2bf=ԢQ-3ͦ2m٫, y4g=Sdm9Ễ8u<9_Ñ C2zj,X)3aoYAc!W&&b0}\rv7c[OKaeya,=zn*"컍q*#L t1Vé¬GєcMh߳L[ :Tªef(e](qܸ8X8/4-QVλg:ʹI!uh 0D&޻uuKJ2\}CEі@βB~|{$;Z<:Tw?tSK|PCkL|<К+1r2Q0Yh4?]O(3Q2x4Vm9/iXgjN}qm50 k,7Uxǵq$ߋ<:SEnM,W%l16Q𛿹3gΦ=t4hg<.=|;d27=۬M y:P{%>7`g*]m o=fsاKy%]"?v^o%X$SI|(x]6,ԣ_Qe VGOvSTfye[%l1&,i]W. jۤPۑѫȠOܻƪH+i,V&ŎѺ/]g7C= k4ce|䠨":q# 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=ߓH]

Extrusion Node


The IndexedFaceSet node although a very powerful node, requires you to define all the faces in the shape. For certain shapes this requires loads of points and faces. For other shapes this is almost impossible. For instance consider designing a sphere with an indexed face set.

Extrusion is a very powerful node which allows you to define very complex shapes using only a small amount of points.

Syntax:
Extrusion {
beginCap TRUE
endCap TRUE
ccw TRUE
convex TRUE
creaseAngle 0
crossSection [1 1,1 -1, -1-1, -1 0, 1 1]
orientation 0 0 1 0
scale 1 1
solid TRUE
spine [0 0 0, 0 1 0]
}


The basis of an extruded shape is a 2-D cross section of the final shape. For example, consider a cube. The cross section is a square. Cross sections are defined in the XZ plane. The cross section for a cube could be defined using the following points:

Note the Z axis orientation, the Z axis is positive downwards, not upwards. In 3D, using the default View Point this means that points closer to you have a higher Z value than points further away.

Another concept needed in an extrusion is the spine. The spine defines the path that the cross section will travel to create the shape. In the above example, trying to build a cube, one could start with the cross section at (0,-1,0) and move it upwards to (0,1,0). The following figures shows this spine for the cube, and the respective path for the cross section.

The spine in the above figure is defined by two points, (0,-1,0) and (0,1,0). The list of steps that the browser does to draw an extruded shape with two spine points are:
  • Translate the cross section to the first spine point
  • Reorient the cross section, defined in the XZ plane so that the Y axis coincides with the direction obtained with the two spine points (in the example above this step is not necessary).
  • Move the cross section to the last spine point.
  • When executing the last step the browser will create the side walls of the cube. The end result is presented in the following figure.

    Source code for the above figure (without the axes)

    Example:
    #VRML V2.0 utf8
    Transform {
      children
        Shape{ appearance Appearance { material Material {}}
          geometry Extrusion{
              crossSection [ -1 -1, -1 1, 1 1, 1 -1, -1 -1]
              spine [0 -1 0 , 0 1 0 ]}
        }
    }


    The fields beginCap and endCap specify if the extruded shape is open or closed at the ends. For instance if in the above example both endCap and beginCap were set to false the following figure would be produced

    Notice that you can only see two sides of the cube, the ones that face you. This is because the field solid is set to TRUE by default. Setting this field to false yields the following result

    In the above examples the spine had only two points. That is the simplest spine you can have. However there is nothing preventing you from having more spine points, for example to draw a V shape, or even something more complicated.

    The principle is always the same however there is something which deserves to be mentioned. As mentioned before, when using a two point spine, the cross section is oriented so that the Y axis coincides with the direction defined by the two spine points. When using more spine points this is only valid for the first spine point. The remaining spine points behave slightly differently.

    The second and subsequent spine points orient the cross section so that is perpendicular to the tangent of the spine. The following figure, presented in 2D for simplicity reasons, shows the cross section orientation in a 3 point spine.

    The points in the figure are the spine points. The dotted lines show the path defined by the spine. At each spine point the cross section's orientation is presented. Note that the cross section's orientation for the second point is perpendicular to the spine's tangent.

    A V shaped spine, defined by the points: (3,5,0), (0,0,0), (-3,5,0), with the square cross section produces the following result:

    Source code for the above figure (without the axes)

    Example:
    #VRML V2.0 utf8
    Transform {
      children
        Shape{ appearance Appearance { material Material {}}
          geometry Extrusion{
              crossSection [ -1 -1, -1 1, 1 1, 1 -1, -1 -1]
              spine [3 5 0 , 0 0 0, -3 5 0]}
        }
    }


    Extrusion can also be used to create surfaces of revolution using a circular spine. The following example describes how to build a cone by using extrusion as a surface of revolution.

    The cross section is defined by the following points: (-1,0), (0,0), (-2,-1), (-1,0). Note that the cross section repeats the first point, if you don't do that then you may end up with a non-solid shape. The spine is defined by selecting eight equally spread points in a unitary circle. The following figure depicts the cross section (note that the Z axis points downwards), and a circular spine defined in the XY plane.

    Please take notice of the cross section points. The point (0,0) is the point that coincides with the spine's point. The end result is the following figure:

    Source code for the example above (without the axes):

    Example:
    #VRML V2.0 utf8
    Transform {
      children
        Shape{ appearance Appearance { material Material { }}
          geometry Extrusion{
            crossSection [ -1 0, 0 0, -1 -2, -1 0]
            spine [1 0 0 , 0.707 0 0.707 , 0 0 1 ,-0.707 0 0.707 ,
              -1 0 0 ,-0.707 0 -0.707 , 0 0 -1 ,0.707 0 -0.707 ,1 0 0]
          }
        }
    }


    Wait, there's still more, you can scale and orient the cross section for each spine point specified. In the cube example presented above, you can scale the cross section for the second spine point by (0,0), thereby reducing it to a point, to obtain a pyramid as in the following figure.

    When using the field scale you either specify one scale for the whole shape, or a list of scale factors for each spine point ( note that scales are provided in 2D because they relate to the cross section).

    Source code for the above figure (without the axes)

    Example:
    #VRML V2.0 utf8
    Transform {
      children
        Shape{ appearance Appearance { material Material {}}
          geometry Extrusion{
              crossSection [ -1 -1, -1 1, 1 1, 1 -1, -1 -1]
              spine [0 -1 0 , 0 1 0 ]
              scale [1 1, 0 0]
          }
        }
    }


    Or you could twist the spine's path using rotations to obtain the following picture

    Similarly to the scale field, when using the field orientation you either specify one orientation for the whole shape, or a list of orientation factors for each spine point. Orientations require four values each: three to define the axis of rotation and one to define the angle.

    Source code for the above figure (without the axes)

    Example:
    #VRML V2.0 utf8
    Transform {
      children
        Shape{ appearance Appearance { material Material {}}
          geometry Extrusion{
              crossSection [ -1 -1, -1 1, 1 1, 1 -1, -1 -1]
              spine [0 -1 0 , 0 1 0 ]
              orientation[0 1 0 0, 0 1 0 3.14]
          }
        }
    }


    The ccw field specifies if the points which define the cross section are present counterclockwise, TRUE, or clockwise or unknown order, FALSE.

    The convex field specifies if the cross section is convex or not. When presented with concave cross sections, the browser splits the cross section into smaller convex cross sections. This is a time consuming task. If you are sure that the cross section is convex then setting this field to TRUE tells the browser not to worry splitting the cross section therefore saving time.

    The creaseAngle specifies an angle threshold. If two adjacent faces make an angle bigger than the creaseAngle then you'll see clearly where the two faces meet, the edge linking the two faces is sharp. Otherwise the edge linking the two faces will be smooth.