Creators' Group Wiki - Recently Updated Pages

Wood Workshop Textures

Fire-Valkyrie — Tue, 22 Sep 2009 10:19:08 CDT

These seamless textures are all done in the free program Wood Workshop which can be downloaded here. I've tried to include a variety to show the versatility of the texture program - you don't have to make only wooden textures with it! You can use these textures freely but not claim you made them. I hereby place them in the PUBLIC DOMAIN (edit 22 september 2009).

Happy Creating :) /Fire-Valkyrie

Alder	Dark, knotted	Old Boards
Floorboards	Rotted Floorboards	Marble
Wooden Tiles	Wooden Tiles, herringbone	Marble Tiles

Seafloor	Water	Blue Tiles
Cobblestones	Paved Stones	Fire-ish
Bamboo	Bamboo again	Bamboo Blinds
Basketweave	Stone & Mortar wall	Ice

CG VRML Wiki

Fire-Valkyrie — Sun, 02 Aug 2009 10:02:57 CDT

This wiki was created for lovers of VRML, and especially for residents of Cybertown, creators and non-creators alike, to find and share information about creating VRML for Cybertown and elsewhere. This site is a collaboration, so what's here depends on what we all put here--and the more we add, the more useful the site will be. Don't worry if you think you've broken something or made a mistake--everything is editable and all edits can be reversed. So register, and get started!

You'll find most of what you may need, under Resources in the left hand menu. Or use the links below :) News! Time to sign up for the 2009 Creators' Vows! Willing to help the Mall team by running the Creators Roulette? Let coffinpest know! Tip! You can always use the "Updates" link at the top of the page to find the latest additions by our members! It's a great (not to mention easy-peasy) way of keeping up-to-date with the wiki! Also try adding the wiki "Droplets" to your own website - see the example right here! -->

You'll find most of what you may need, under Resources in the left hand menu. Or use the links below :)

News!
Time to sign up for the 2009 Creators' Vows!
Willing to help the Mall team by running the Creators Roulette? Let coffinpest know!

Tip!
You can always use the "Updates" link at the top of the page to find the latest additions by our members! It's a great (not to mention easy-peasy) way of keeping up-to-date with the wiki! Also try adding the wiki "Droplets" to your own website - see the example right here! -->

WHAT EXACTLY CAN YOU DO HERE?
Find information

check out our growing list of FAQ's, Tutorials, and other Resources, including free models in the CT Repository and textures
look over the work of some of the best creators in CT in our Creator Index and find yourself a mentor (or become one!)
ask for help on using programs like Flux, Spazz, and Poser as well as hand coding VRML
learn about the mall, uploading, and object creation
find out more about the CT Creators Group

Share information

add to our wishlists of creation ideas and wanted items
add your name to the Creator Index and add a link to your homepage if you have one...or create a gallery showing your work (use the Page Toolbox on the right to Add a new page, and select a Photo Gallery template, then upload some images)
add some freebie tips to our list (under Resources, Freebies)
add a tutorial (under Resources, Tutorials)
add your spare textures to our Free Textures page, (under Resources, Freebies)
add spare models or new models that you're willing to share, to the CT Repository
add to the FAQ's, or help answer someone elses questions (under Resources, FAQ)
Partake in group projects (e.g. Creators Roulette!) and suggest new projects for the future
contribute your ideas about what else we need here, either by adding pages and content, or by adding to the What Else Do We Need Here? page.

Communicate with your friends

chat with other creators, using our 2D chat...just click on the Join the Chat! link to the left
Use the discussion options for each area, included within the list, to cover specific topics which cannot be answered by a single question or to explore in greater depth the endless possibilities of creating, especially when chat is not convenient when you're ready to talk. Or use the Discussion Forum!
use the Site Members list available from the horisontal menu at the top of the page, to find your friends' profiles, and send and receive messages - or get to know someone new
post your favourite recipies, book tips or anything else not VRML or CT related that you wish to share with the rest of us in the Real Life section, or advertise your CT events or item news on the Notice Board

Don't know how to contribute?

Check out the wiki FAQ or the Advice when adding to the wiki page!

Remember to have fun!!!

Please note that Cybertown is a registered trademark. Cybertown is not responsible for the content of this site.

Creator Index

Fire-Valkyrie — Sun, 02 Aug 2009 09:40:43 CDT

Contributing Artists

Click The Name Of Any Creator To View Their Home Page

And Examples Of Their Work.
Also refer to "Members" (link above) - not everyone has added their names and/or pages here.

If you want to add your portfolio or a bio or something else about you, this is the place (and your Profile page of course). Add your name to the list and link it to your website or a CT topic book. Or click +Add page and make a photo gallery with your thumbnails or write something about yourself and then link your name to that page. Welcome to the wiki!

Bashkirtsev (also known as BKV Designs)
Laz Lounge
cheercoach
Columns
CypressBlade
doctragoz
Tutorials from Emmy Sky
Syion's Creations
magicdustlil
SCG's VRML
Deexx
BombyBarb
Don H
Anakin Creations
Loves_Wolves
wile1
BusyLion
Fire-Valkyrie
Earthgypsy (also see Earthgypsy's wiki page)
DustSpeck
Gojud (also see her Sculpted Tutorial)
helene.m only a beggining
FleetOne
Medeusa
LadyRed99
Bubbasmurf
LadyofShalot
Y_L Creations (includes links to books in ct that have all my creations)
Wovencroft
Spikefan74

This Is Who We Are

If you are a creator, please join us!
Add your name and link us up with your home page
Show you us what you have created!

You don't have a home page? No problem

Use the Page Toolbox on the right and Add a new page.
Title it with your name
Choose one of the Photo Gallery templates to get started.
You can upload thumbnails right from your computer.
If your wrl's are uploaded somewhere, link to them, from your gallery.
When your gallery is ready, come back to this page, click Easy Edit
Add your name to the list
Add link to the gallery to your name (copy addie, highlight name, click link, add addie, save)

Click on the Syion's Creations link above for a great example!

She's created a personal page with links to her CT art and item topic books!

Fire-Valkyrie Creations

Fire-Valkyrie — Sun, 02 Aug 2009 09:38:25 CDT

I have been a Cybertown member since 1998 and started creating as soon as I managed to figure out how. For years I have showcased just about every item I ever made (except the very first) on my Yahoo Geocities website, but as this website is closing down, I figured I should move some of my stuff here. I can't really add all 10 Mb of thumbnails to the wiki though, so you'll have to do with some samples. :)

Plants & Animals	Art & Music
Furniture	Miscellaneous
Rares	Best Sellers

Also check out:
My Designer Homes (and why there's only 2 of them)
My Personal Website (too small to house the old CT pages but I intend for it to hold a bunch of 3D freebies eventually)
My Wiki Profile (if you wanna send a message or so)
My Handcoding Tutorial (on this wiki)
My VRML Challenges (link will be posted when I've decided where to host it)

Fire-Valkyrie Creations, Plants & Animals

Fire-Valkyrie — Sun, 02 Aug 2009 09:33:28 CDT

I love plants and animals and would love to both have made more of it myself and to see more of it uploaded to Cybertown. But they are among the most difficult items to make - plants often being complex and animals being more life-like if they're animated. I've made a bit more than 10 animals and 20 plants in total over the years. Much too few!

Return to Fire-Valkyrie Creations (main)

Fire-Valkyrie Creations, Art & Music

Fire-Valkyrie — Sun, 02 Aug 2009 09:30:04 CDT

Although I think of myself as someone who's always drawn and painted, I have only uploaded some 20-30 pictures to Cybertown. Statues and musical instruments are even fewer... If you'd like to see more of my artwork (the stuff in CT certainly isn't among the best, if nothing else because you have to reduce the quality a lot to get below the size limit), you should visit my personal website or my Elfwood gallery. (Do note, before going, that Elfwood allows artistic nudity.)

Return to Fire-Valkyrie Creations (main)

Fire-Valkyrie Creations, Miscellaneous

Fire-Valkyrie — Sun, 02 Aug 2009 09:29:20 CDT

I intended to only have 8 pictures on each page, but if your computer objects to my cramming more in here I hope you forgive me. I had to combine several categories here, which meant I wanted to represent a lot of items. And to make a separate category for "cookies and candles" just didn't seem logical... Btw, I find making 3D items an excellent way to handle my sweet tooth :P (virtual candy contains virtually no sugar, you know...)

Return to Fire-Valkyrie Creations (main)

Fire-Valkyrie Creations, Rares

Fire-Valkyrie — Sun, 02 Aug 2009 09:28:49 CDT

Well, I had to rewrite this page and can't recall what I said so I'll just mention that I was a founder and member of the Mall Crafters Guild back in the day and therefore I don't do many limited items. Over the years the few pressies, fund raisers and contest prizes have piled up though, so I have enough to show off here :)

Return to Fire-Valkyrie Creations (main)

Fire-Valkyries Best Sellers

Fire-Valkyrie — Sun, 02 Aug 2009 09:28:20 CDT

These items have sold from 650 copies up to 1500. It probably helped my number one best-seller that it was free. :P Sales dropped drastically after CT went pay and has continued to drop ever since. I think all these items were uploaded while CT was still free. Nowadays I'm lucky to sell even 20 copies, which is quite saddening, really.

Return to Fire-Valkyrie Creations (main)

Fire-Valkyries Designer Homes

Fire-Valkyrie — Sun, 02 Aug 2009 09:27:49 CDT

For someone who has about a dozen started worlds (houses) on her computer and several finished "blueprints" for more in her book shelf, I haven't managed to contribute much to the Designer Homes of Cybertown. This has nothing to do with the DH rules, except in the case of one world which I belatedly realised was about 4 times the allowed size... Rather, every time I start a home/world I get a whole bunch of ideas for other places I also want to build. Consequently I keep starting new ones without finishing the previous ones. Juniper Lane was uploaded when the DH store was still fairly new (2003). It's taken me until 2009 to finish another home, the Chestnut Grove, below.
	I do have a few other finished worlds on my conscience, though. In the Cybertown Suburbs you can find the very first house I ever built (the ChinaHouse). In the Clubs you can choose a shop design by yours truly. And I have built two gallery worlds, one for the Art Hood (where I have been NL) and one for my own website. Several small worlds can also be viewed on my personal website. The one 4 times too large for DH is not there yet, though. It still needs some further additions. But I hope to finish it one day - it's not just one house but a whole village and a huge palace. Items I made for that world were uploaded to the CT Mall though - the Mayet series.

For someone who has about a dozen started worlds (houses) on her computer and several finished "blueprints" for more in her book shelf, I haven't managed to contribute much to the Designer Homes of Cybertown. This has nothing to do with the DH rules, except in the case of one world which I belatedly realised was about 4 times the allowed size... Rather, every time I start a home/world I get a whole bunch of ideas for other places I also want to build. Consequently I keep starting new ones without finishing the previous ones.

Juniper Lane was uploaded when the DH store was still fairly new (2003). It's taken me until 2009 to finish another home, the Chestnut Grove, below.

I do have a few other finished worlds on my conscience, though. In the Cybertown Suburbs you can find the very first house I ever built (the ChinaHouse). In the Clubs you can choose a shop design by yours truly. And I have built two gallery worlds, one for the Art Hood (where I have been NL) and one for my own website.

Several small worlds can also be viewed on my personal website. The one 4 times too large for DH is not there yet, though. It still needs some further additions. But I hope to finish it one day - it's not just one house but a whole village and a huge palace. Items I made for that world were uploaded to the CT Mall though - the Mayet series.

Return to Fire-Valkyrie Creations (main)

Fire-Valkyrie Creations, Furniture

Fire-Valkyrie — Sun, 02 Aug 2009 09:26:48 CDT

Furniture is probably the largest category of items I've made, with both standalone items and several series, including two indian ones and a low-price range called Quality Bargains, as well as some "companion pieces" such as vases, vacuum cleaners and kitchen appliances. The very first item I ever made for Cybertown was a small bedside table. Ten years later I made a new version (First Item Redux) to celebrate how much I have learned in those years.

Return to Fire-Valkyrie Creations (main)

VRML code tutorials

Fire-Valkyrie — Sun, 02 Aug 2009 06:01:21 CDT

If you prefer hand coding to using different programs or if you just want to get the hang of the code so that you can tweak items made with a program of some sort then these tutorials are for you. To handcode VRML all you need is a text editor that allows you to save wrl files. Notepad works, but I (Fire-Valkyrie) would recommend VRMLpad or something like Crimson Editor. I use Crimson Editor, which is freeware. It both numbers the lines and highlights the code with different colours which helps you find and correct mistakes. VRMLpad isn't free but can be downloaded as an evaluation version with limited funcionality.

General Tutorials by wiki members	Off-site tutorials (links open in new window)
Handcoding Tutorial by Fire-Valkyrie	Particles tutorial by Bashkirtsev
Specific Tutorials by wiki members	Other off-site resources (links open in new window)
VRML Glossary (in progress)

Return to the Tutorials main page
Return to the wiki front page

Got a question? Post it on the VRML FAQ page!

Handcoding Tutorial by Fire-Valkyrie

Fire-Valkyrie — Sun, 02 Aug 2009 05:58:01 CDT

This coding tutorial was first begun years ago, and made for the Mall Crafter's Guild website. Since the guild is no longer active, I decided to move the tutorial over to my Yahoo website but as that will now be closed, I move the tutorial here. I hope it can work both as a means for beginners to get started and as a reference to those who just need to remind themselves of a detail or two. It's always a work in progress as I am still learning new things myself.

Fire-Valkyrie 2009

CONTENT
The Basics
Primitives
Materials
Simple Textures
Transforms
More on Rotations
TextureTransforms
Group, Switch & Referencing (DEF/USE)
Text
IndexedFaceSets (IFS)
Extrusions
Animated Textures
PixelTextures
IFS Texturemapping
PROTOs

Hopefully coming in time:
Animation, intro
Sensors
Interpolators
ROUTEs
Scripting
Worlds & Avatars (intro)
World Nodes
Other Nodes
Avatars
Avatar Gestures in CT

Although the resources can no longer be found online, I'd like to give credit to the two sources that helped me learn most of what I know of VRML: Floppy's VRML Guide and Dr Clue's VRML Help.

PROTOs

Fire-Valkyrie — Sun, 02 Aug 2009 05:54:28 CDT

Return to Index	(no next)

Return to Index

(no next)

A PROTO is similar to a Group, but more versatile, and useful e.g. when scripting animations. Avatars with gestures are always done by using PROTOs. There are two kinds of PROTOs; EXTERNPROTO and PROTO. I like to think of them as the stylesheets of VRML. They can be anything from very simple (e.g. a definition of colour) to very, very complex (and that's beyond this guide and beyond me!)

The best thing about PROTOs, in my opinion, is when you have several instances of the same object and want them all animated independently. I once made a chocolate box and animated each piece of chocolate separately, to disappear when clicked. If I had used references, all of the pieces would have dissappeared when any one of them were clicked. But with PROTOs, you can make one piece of chocolate, animate it to dissappear and then use 30 PROTOs - each one will only dissappear when you click that one, and it will save you time and make the filesize smaller. Too bad I didn't know that, when I made the chocolate box! (I also use it for things like doors, where of course clicking on a door should open only that door and not every door in the house...) Another example of when PROTOs come in handy, is when you have two or more items that consist of several parts (e.g. a table) and you want several tables in your scene, but they should all have different colours. You could build each table of referenced geometries with new colours, or you could use a PROTO. Here's an example with two simple PROTOs (Note that the word is always in all-caps in the code):

#VRML V2.0 utf8 WorldInfo { title "PROTO" info ["handcoding vrml - using PROTOs"]} PROTO blue_mat [] { Material { diffuseColor 0 0 1 }} PROTO box_geo [] { Box { size 1 1 1 }} Shape { appearance Appearance { material blue_mat {} } geometry box_geo {} }

#VRML V2.0 utf8 WorldInfo {
title "PROTO"
info ["handcoding vrml - using PROTOs"]}

PROTO blue_mat [] { Material { diffuseColor 0 0 1 }}
PROTO box_geo [] { Box { size 1 1 1 }}

Shape { appearance Appearance { material blue_mat {} }
geometry box_geo {} }

Take note of the "pattern" of writing a PROTO: first you declare that it's a PROTO, then comes the name of the PROTO, then the [ ] brackets that can include additional info (see below: the brackets should always be included, even when empty) and then the part of code that you've turned into a PROTO. As always, make sure the number of { brackets corresponds to the number of } brackets and note that the code that makes up a PROTO corresponds to the part of code that you could DEFine, e.g. Group, Shape, Material (but not material Material) etc... You can name the PROTO anything you want, as long as you stay away from the reserved terms (such as PROTO itself or Group, etc.). I usually name colours as above; with _mat for material or _app for an appearance, _tex for texture and sometimes _geo for geometry. It helps me remember the names of the PROTOs and keep track of what is what. (I've also noticed that other people and some programs do the same so I can't take credit for the clever idea...) To call on the PROTO you only need the name (blue_mat, box_geo) and the {} that represents the code inside the PROTO brackets. Another example:

#VRML V2.0 utf8 WorldInfo { title "two tables" info ["handcoding vrml - using PROTOs"]} PROTO Table [ field SFColor leg_color 0.4 0.2 0.1 field SFColor top_color 0.5 0.1 0.1 ] { Group { children [ Transform { translation -0.5 0.5 0.5 children [ DEF table_leg Shape { appearance Appearance { material Material { diffuseColor IS leg_color }} geometry Box { size 0.08 1 0.08 }} ]} Transform { translation 0.5 0.5 0.5 children [ USE table_leg ]} Transform { translation -0.5 0.5 -0.5 children [ USE table_leg ]} Transform { translation 0.5 0.5 -0.5 children [ USE table_leg ]} #table top Transform { translation 0 1 0 children [ Shape { appearance Appearance { material Material { diffuseColor IS top_color }} geometry Box { size 1.1 0.1 1.1 }} ]} ]} #(end group) } #end of PROTO Table {} Transform { translation 1.5 0 0 children [ Table { top_color 0.1 0.1 0.5 } ]}

#VRML V2.0 utf8
WorldInfo { title "two tables"
info ["handcoding vrml - using PROTOs"]}

PROTO Table
[
field SFColor leg_color 0.4 0.2 0.1
field SFColor top_color 0.5 0.1 0.1
]
{
Group { children [
Transform { translation -0.5 0.5 0.5 children [
DEF table_leg Shape { appearance Appearance {
material Material { diffuseColor IS leg_color }}
geometry Box { size 0.08 1 0.08 }} ]}
Transform { translation 0.5 0.5 0.5 children [ USE table_leg ]}
Transform { translation -0.5 0.5 -0.5 children [ USE table_leg ]}
Transform { translation 0.5 0.5 -0.5 children [ USE table_leg ]}
#table top
Transform { translation 0 1 0 children [
Shape { appearance Appearance {
material Material { diffuseColor IS top_color }}
geometry Box { size 1.1 0.1 1.1 }} ]}
]} #(end group)
} #end of PROTO

Table {}
Transform { translation 1.5 0 0 children [
Table { top_color 0.1 0.1 0.5 } ]}

The table in the above PROTO is the same as I've used before (in "Group, Switch & Referencing"). But as you can see I've now added a couple of fields in between those first [] brackets. There are other fields than colour, which can be included here, but I refer you to a vrml reference manual or something for those. I don't really have the hang of them myself... Anyway, colours are easy enough. You tell the computer you will define something by writing "field" and then what type of field it will be - "SFColor" (note the three caps in a row). Then you give a name to your colour, e.g. top_color, and the RGB values that will produce said colour. In the appearance nodes then, you type diffuseColor IS top_color and this will tell the computer that unless some other colour is specified when the PROTO is called, the table should have this colour. In this case brown legs and a red top. Then, when you call the PROTO, you can choose to define another colour, as is done in the last row of code, above. Notice how all you have to do now, is write the name of the colour you want to change, and the RGB values, inside the {} brackets of the PROTO? No need to rebuild the table top.

A tip and a note: You can use a previously defined PROTO within a subsequent PROTO. It's a good idea to define colours and textures first, appearances later (because they can call on the colours and textures) and then shapes (that can call on appearances). You can also use DEF/USE within a PROTO but you can't USE something in the rest of the file or a subsequent PROTO that was DEFined in another.

EXTERNPROTOs are basically the same thing as a PROTO, only it's located in a file of its own and is called from your file. It can be another file of yours, or it can be from e.g. the Blaxxun Platform. The Cybertown Designer Homes, Avatars and items with SharedEvents (animations that all users in the world can see, regardless of who triggers it) need such Blaxxun EXTERNPROTOs. If you're making a world consisting of multiple files (and hosted on your own server), a separate file with a list of EXTERNPROTOS for materials and items that are used in more than one file can be very useful. If you decide you want to change a colour, for instance, you'd only need to do it in one place, not in every file where that colour was used. Name your file of EXTERNPROTOs something like "protos.wrl" (for example). Then, at the top of the files where you'd otherwise list PROTOs, you'll list the EXTERNPROTOs instead, and to call on it, you use them same code as for an ordinary PROTO:

EXTERNPROTO blue_mat [] "protos.wrl#blue_mat"
material blue_mat {}

To end this section, here's an excellent use of an EXTERNPROTO: Bashkirtsev's Particle Tutorial (useful for animated flames, smoke, bingo balls and whatever else you can think of!)

Return to Index	(no next)

Return to Index

(no next)

IFS Texturemapping

Fire-Valkyrie — Sun, 02 Aug 2009 05:38:19 CDT

Return to Index	Next (PROTOs)

Return to Index

Next (PROTOs)

I mentioned in the "Simple Textures" section that there's a "complex" way to texturemap. It really depends on whether the IFS shape is very complex or not; if it's simple it's not much of a problem. Anyway, what you do is give a set of (2D) coords "on your texture" that will correspond to coordinates in your shape. The code will look like this:

#VRML V2.0 utf8 WorldInfo { title "Pyramid" info ["handcoding vrml - Texturemapping"] } Shape { appearance Appearance { material Material { diffuseColor 0.7 0.6 0.3 } texture ImageTexture { url "texture.jpg" } } #end appearance geometry IndexedFaceSet { coord Coordinate { point [ 0 0.5 0, -0.5 0 -0.5, -0.5 0 0.5, 0.5 0 0.5, 0.5 0 -0.5, ]} #end coords coordIndex [ 0,1,2,-1, 0,2,3,-1, 0,3,4,-1, 0,4,1,-1, 4,3,2,1,-1, ] #end coordIndex texCoord TextureCoordinate { point [ 0.5 0.5, 0 1, 0 0, 1 0, 1 1, ]} #end texcoords creaseAngle 0 solid TRUE } } #end IFS and shape

#VRML V2.0 utf8
WorldInfo { title "Pyramid"
info ["handcoding vrml - Texturemapping"] }
Shape {
appearance Appearance {
material Material { diffuseColor 0.7 0.6 0.3 }
texture ImageTexture { url "texture.jpg" }
} #end appearance
geometry IndexedFaceSet {
coord Coordinate { point [
0 0.5 0, -0.5 0 -0.5, -0.5 0 0.5, 0.5 0 0.5, 0.5 0 -0.5,
]} #end coords
coordIndex [
0,1,2,-1, 0,2,3,-1, 0,3,4,-1, 0,4,1,-1, 4,3,2,1,-1,
] #end coordIndex
texCoord TextureCoordinate { point [
0.5 0.5, 0 1, 0 0, 1 0, 1 1,
]} #end texcoords
creaseAngle 0
solid TRUE
} } #end IFS and shape

As you can see, the code for the texture's coordinates follows the same pattern as the code for the 3D coordinates of the shape. In this case, the first 3D coordinate is the top of the pyramid, followed by back left corner, front left, front right and back right. The texture coordinates are given in the same order, but since textures are two-dimensional they consist of x and y values only. In this example, the center of the texture is placed at the top of the pyramid; 0.5 textures along the x-axis and 0.5 textures along the y-axis. The corners of the pyramid corresponds to the corners of the textures (in this case with "back" corresponding to "up" and "front" to "down" on the texture, but doing it the other way - with "back" being "down" - would get you the same result since the texture is symmetrical). For a simple shape like this, texturemapping should not be too troublesome, but it can be very tricky if you are making shapes such as a box (but with an IFS instead of the primitive geometry). Since the box's sides join with 4 other sides, you'll find that you need more coordinates than you would if you had no texture. Actually it is the same if you make only three sides of a box (a corner). See below.

#VRML V2.0 utf8 WorldInfo { title "Box Corner" info ["handcoding vrml - Texturemapping"] } Shape { appearance Appearance { material Material { diffuseColor 0.7 0.6 0.3 } texture ImageTexture { url "texture.jpg" } } #end appearance geometry IndexedFaceSet { coord Coordinate { point [ -0.5 0.5 0, -0.5 -0.5 0, 0 0.5 0.5, 0 -0.55 0.5, 0.5 0.5 0, 0.5 -0.5 0, 0 0.5 -1, 0.5 0.5 0, ]} #end coords coordIndex [ 0,1,3,2,-1, 2,3,5,4,-1, 0,2,7,6,-1, ] #end coordIndex texCoord TextureCoordinate { point [ 0 1, 0 0, 1 1, 1 0, 2 1, 2 0, 0 2, 1 2, ]} #end texcoords creaseAngle 0 solid TRUE } } #end IFS and shape

#VRML V2.0 utf8
WorldInfo { title "Box Corner"
info ["handcoding vrml - Texturemapping"] }
Shape {
appearance Appearance {
material Material { diffuseColor 0.7 0.6 0.3 }
texture ImageTexture { url "texture.jpg" }
} #end appearance
geometry IndexedFaceSet {
coord Coordinate { point [
-0.5 0.5 0, -0.5 -0.5 0, 0 0.5 0.5, 0 -0.55 0.5, 0.5 0.5 0, 0.5 -0.5 0, 0 0.5 -1, 0.5 0.5 0,
]} #end coords
coordIndex [
0,1,3,2,-1, 2,3,5,4,-1, 0,2,7,6,-1,
] #end coordIndex
texCoord TextureCoordinate { point [
0 1, 0 0, 1 1, 1 0, 2 1, 2 0, 0 2, 1 2,
]} #end texcoords
creaseAngle 0
solid TRUE
} } #end IFS and shape

The top image shows in what order I described the coordinates - as you can see the fourth (or rather 5th, since you start counting at 0) coordinate is repeated again, as the last coordinate. Also note that this means that the two faces (the one to the right, and the top one) are not really "in contact" - they do not share more than one coordinate. This is necessary in order to apply the texture nicely. Imagine that you didn't add the last coordinate; then you would have the same part of the texture along two perpendicular edges on one of the faces - it's impossible and the texture would get distorted. If this doesn't make any sense to you, try imagining that you have a piece of paper that you wish to wrap around a cube. You can't do this without cutting away parts of the paper - the corners along the cut paper shape will correspond to your needed texture coordinates - and even if they meet once you fold the paper, they aren't located in the same place on the paper to begin with. And since each texture coordinate needs to correspond to a 3D coordinate, you'll need extra 3D coordinates even if THEY are in the same place. I hope this helps :o)

Return to Index	Next (PROTOs)

Return to Index

Next (PROTOs)

PixelTextures

Fire-Valkyrie — Sun, 02 Aug 2009 05:27:02 CDT

Return to Index	Next (IFS Texturemapping)

Return to Index

Next (IFS Texturemapping)

PixelTextures are textures that you describe inside the code, instead of refer to outside of your file. They can be very useful, but most of the time they look best on small items. For example, if you make a bookcase, with several vases and other items in it, you might not be able to use your ordinary texture for all the items - but perhaps you can add a PixelTexture to some of them! PixelTextures can be greyscale or color and with or without transparency. I'll start with the simplest, smallest PixelTexture there is:
texture PixelTexture { image 1 1 1 0xffffff }

Now, that doesn't look too complicated does it? The numbers refer to the size, the type and the colour of the image. The first number gives the number of pixels along the x-axis, and the second the number of pixels along the y-axis. The third number refers to the "type" of image; a 1 means it is a greyscale image (which, as usual, means that the item will display the given diffuseColor); a 2 would mean that it's greyscale with transparency; 3 means colour and 4 means colour with transparency. The 0xffffff is the HEX value of the colour (the colour code you use in html, with 0x in front of it, obviously) - you should have as many such values as you have defined number of pixels - in this simple example 1*1=1.

PixelTextures can be scaled, translated and rotated like any other texture, and of course also texturemapped onto an IndexedFaceSet. If different coloured pixels are used, there will be a gradient between the colours which depend on the viewers machine. Since the blurriness of the gradient vaires I find it best to use pixelTextures where such things don't matter too much, usually on smaller items. The texture can be from the small one-pixel above to as large and complex as you want it, but you'd have to be a masochist to want to paint portraits with it (it seems some programs, e.g. 3ds Max, does it for you, though). Anyway, if you make them very large they will add considerably to your file-size.

A few more examples of non-transparent PixelTextures:

texture PixelTexture { image 2 1 3 0xffffff 0x000000 }
If you repeat the above texture along the x-axis you will get a white/black stripes effect (even if the material isn't white).

texture PixelTexture { image 2 2 3
0xffffff 0x000000
0x000000 0xffffff }
A checkerboard pattern; note that once you start building larger pixeltextures it might help to keep each row of the texture on its own row in the code, but it's not necessary.

And below, a greyscale texture with transparency. This one will start with the diffuseColor given under material but become more and more transparent. The "darker" the RBG value the more transparent the texture.
texture PixelTexture { image 6 1 2 0xffffff 0xcccccc 0x999999 0x666666 0x333333 0x000000 }

If you wish to make a multicoloured image with transparency, you have to add a few numbers... The colours are given as the usual HEX values (ffffff and so on), but then you add two more numbers at the end, to define level of transparency. FF means no transparency, while 00 means the colour turns out totally transparent. A checkerboard pattern with two colours, where the red is non-transparent and the blue semi-transparent, would have this code:
texture PixelTexture { image 2 2 4
0xff0000ff 0x0000ff99
0x0000ff99 0xff0000ff }

To illustrate how PixelTextures can be used, here's a thumbnail of one of my favourite items. It's a favourite simply because I learned so much making it - it was the first where I managed to use PixelTextures (my then source not getting the code right and I had to guess how to do it). I used Pixeltextures on all patterened items on the table (bowls, cups, food, chop sticks and cloth). Another thing I often use Pixeltextures for is when I want to make something transparent, like glass... On most machines transparent items look smooth, but on older ones it looks "cross-hatched" - and adding a texture removes this problem. In such cases I usually use the 1*1 pixel one that I mentioned at the beginning of this page.

	PS: Look what I found! [Dec 2008] At this VRML 2.0 PROTO Library there's a download link for a very handy little PixelTexture maker for Windows. Just download it to the folder where you want it. Drag the image files to the app and within a few seconds you get a wrl file with the texture on a cube so you can see if it worked. Then just copy the texture code to the file you're working on!

PS: Look what I found! [Dec 2008]

At this VRML 2.0 PROTO Library there's a download link for a very handy little PixelTexture maker for Windows. Just download it to the folder where you want it. Drag the image files to the app and within a few seconds you get a wrl file with the texture on a cube so you can see if it worked. Then just copy the texture code to the file you're working on!

Return to Index	Next (IFS Texturemapping)

Return to Index

Next (IFS Texturemapping)

Animated Textures

Fire-Valkyrie — Sun, 02 Aug 2009 05:09:18 CDT

Return to Index	Next (PixelTextures)

Return to Index

Next (PixelTextures)

First of all, I'll have to admit that I don't really understand the MovieTexture node. It makes use of either an mpeg file (which cannot be uploaded to the CT mall) or an animated gif. Only, it seems that animated gifs won't work like they're supposed to. I used to think it was my old computer or a faulty vrml guide, but the guides still say the same thing and my new computer still won't listen... :P

If you only want to make use of a texture that repeats its animation over and over again, it's no more difficult than using any other texture, really. The only difference is that you have to use the word MovieTexture instead of ImageTexture. Then there are some modifiers you can add - if you can get them to work... And to be honest I'm not sure why there are [] brackets around the texture url - there isn't when you use a non-animated texture... and it seems to work without it. But then again it works with it too... (It might be because multiple urls can be given, but then the same should hold true for ImageTextures as well...)

texture MovieTexture { url ["animated.gif"] loop TRUE speed 1 startTime 0 stopTime 0 }

texture MovieTexture { url ["animated.gif"]
loop TRUE
speed 1
startTime 0
stopTime 0
}

Regarding the modifiers, this is how they should work, in theory: If you set loop to FALSE the animation will only "play" once (they happily repeat themselves for me, though). Speed determines (yes, you guessed it) how fast the animation plays. Higher values mean faster, and negative values supposedly means backwards but if I try that the animation stops... StartTime and stopTime is given in seconds and should be useful for animations but setting startTime to less than stopTime and loop to FALSE (which will usually disable an animation until triggered) doesn't have any effect for me. Perhaps these modifiers only work with mpegs or perhaps I'm missing some vital piece of information. Feel free to tell me, if you know what it is!

You can animate textures in at least two ways. With MovieTextures, as described rather sketchily above, or with scripting. I'm still learning scripting myself, though, so I'll just send you along to Epi's tutorial on the subject, immediately: Animating Flowing Water.

Return to Index	Next (PixelTextures)

Return to Index

Next (PixelTextures)

Extrusions

Fire-Valkyrie — Sun, 02 Aug 2009 05:00:15 CDT

Return to Index	Next (Animated Textures)

Return to Index

Next (Animated Textures)

With an Extrusion node you can make relatively complex shapes in an easy way, by defining a crossSection and then a spine which this crossSection will be "translated along". The crossSection can be scaled at each point in the spine, so that a circular crossSection can give you a vase or a goblet (see code below) instead of just a cylinder (or rather a tube, since a cylinder wouldn't be a cylinder if you bend it). It took years before I started using Extrusions, but today I use them as often as I can and I find them very useful. (I'm not called "Queen of Extrusions" for nothing! :P )

Note: Extrusions can't have a spine that moves up and down "in the same place" even if you scale the crossSection; you can make a snake that crosses it's own body, but you can't make a "volcano-shape" with both crater and slopes, without using two Extrusions.

#VRML V2.0 utf8 WorldInfo { title "Goblet" info ["handcoding vrml - Extrusion"] } Shape { appearance Appearance { material Material { diffuseColor 0.8 0.5 0.2 } } #end material and appearance geometry Extrusion { crossSection [ -0.1 0, -0.07 0.07, 0 0.1, 0.07 0.07, 0.1 0, 0.07 -0.07, 0 -0.1, -0.07 -0.07, -0.1 0, ] #ends crossSection spine [ 0 0 0, 0 0.02 0, 0 0.04 0, 0 0.06 0, 0 0.08 0, 0 0.1 0, 0 0.12 0, 0 0.14 0, 0 0.16 0, ]#ends spine scale [ 0.6 0.6, 0.35 0.35, 0.28 0.28, 0.35 0.35, 0.7 0.7, 0.9 0.9, 1 1, 1 1, 0.9 0.9, #as many values as there are in the spine ] #end scale creaseAngle 1.6 solid FALSE beginCap TRUE endCap FALSE } } #end extrusion and shape

#VRML V2.0 utf8
WorldInfo { title "Goblet"
info ["handcoding vrml - Extrusion"] }
Shape {
appearance Appearance {
material Material { diffuseColor 0.8 0.5 0.2
} } #end material and appearance
geometry Extrusion {
crossSection [
-0.1 0, -0.07 0.07, 0 0.1, 0.07 0.07, 0.1 0, 0.07 -0.07, 0 -0.1, -0.07 -0.07, -0.1 0,
] #ends crossSection
spine [
0 0 0, 0 0.02 0, 0 0.04 0, 0 0.06 0, 0 0.08 0, 0 0.1 0, 0 0.12 0, 0 0.14 0, 0 0.16 0,
]#ends spine
scale [
0.6 0.6, 0.35 0.35, 0.28 0.28, 0.35 0.35, 0.7 0.7, 0.9 0.9, 1 1, 1 1, 0.9 0.9,
#as many values as there are in the spine
] #end scale
creaseAngle 1.6
solid FALSE
beginCap TRUE endCap FALSE
} } #end extrusion and shape

I hope that didn't overwhelm you. Let's go through the new geometry nodes, one by one. The crossSection is, in this case, a full circle (though somewhat angular). Note that the first coordinate is identical to the last; this means the crossSection is a closed shape. Also note that crossSections are always given with 2D coordinates, not 3D. It is the spine that creates the 3-dimensional shape. I've been told the coordinates should be given in a counter clockwise (ccw) direction, although this may depend on the shape of the spine, as well (if you look at the above example, the values are given in a clockwise direction, not counterclockwise). If your Extrusion looks odd, or "turned in side out", try switching the x and y values around or changing positive values to negative and vice versa.

The spine is given as a set of 3D values, separated by commas. The distance between coordinates do not have to be the same all through the spine but if you use a texture, it will look better that way. The texture will be applied with an equal amount of texture between each coordinate/crossSection, so if you vary the distances the texture will appear drawn out or compressed in some places. (In fact, to make the texture look nice it might be necessary to NOT have the same distance between coordinates in the spine - the scale will also affect how "long" an area the texture will be applied to.) You don't have to use the scale property if you want the shape to have the same thickness everywhere. If you do want the thickness to vary, however, you should give as many scale values as you had coordinates in the spine. If you have less, all subsequent crossSections will be the same size as the last one. The scale values are again only 2-dimensional since it affects the crossSection and not the overall shape. (One (1) is not the maximum value, it is only what I used as a maximum in the example. You could use the above crossSection and scale it 1000 times to make it a huge object, if you wanted to.) Sometimes, when the spine is bending and curving, especially if the crossSection is not a circle, but rather a rectangle or oval shape, the overall shape will get distorted. The crossSection may seem rotated or squashed. If this happens you might be able to fix it by using orientation. Orientation will rotate the crossSection around the defined axis. Personally I try to avoid having to do this, at least on long and complex extrusions, but the code is added in the same way as for scale and looks like this:
orientation [ 1 0 0 1.57, 0 0 1 1.57, ... ]

In this example, the crossSection is first rotated 90 degrees around the x axis, and then 90 degrees around the z axis. Sometimes, all you need to do is rotate the crossSection 90 degrees - 1.57 radians - around the y-axis; if this is the case, you will only need one orientation value. If you're making a long bendy shape and it looks differently squashed in different places, you may however need to use as many orientation values as you have spine values... Now, at the end of the file there are some new statements. First, creaseAngle (not really new - I mentioned this in the previous part as well) refers to how smooth the object will look. As you know VRML tends to look angular (or it is made up of so many coordinates and faces that your browser is bogged down). Well, the creaseAngle partly alleviates this. On my computer there seem to be only two options for extrusions, which is angular or smooth (below 0.5 and above 0.5) but I think this is different on better computers so I suggest using 1.6 if you want it really smooth, and lower values for more angular shapes. A creaseAngle value of 1.57 means that edges between faces will be drawn smooth if the angle between the faces is 90 degrees or more. Next comes solid, beginCap and endCap. All have TRUE or FALSE values and defaults are TRUE, so you only need to include them when you want to set them to FALSE. If you want your extrusion to be a vase, you'll set the solid and the endCap values to FALSE. This means the shape will be open at the end of the spine and that you can see the inside of the vase as well. If the shape is completely closed (for example a ring) you can set solid to TRUE as nobody will ever see the inside of the extrusion anyway. This saves on browser performance :)

Return to Index	Next (Animated Textures)

Return to Index

Next (Animated Textures)

IndexedFaceSets

Fire-Valkyrie — Sun, 02 Aug 2009 04:22:16 CDT

Return to Index	Next (Extrusions)

Return to Index

Next (Extrusions)

IndexedFaceSets (IFS's) are a set of coordinates bound together into faces that make up the item. (Two related shapes - IndexedLineSets and PointSets will be discussed at the end of this section.) IFS's are unbeatable for complex objects that cannot be described by a single crossSection (see next part), but they can also be very very tedious to handcode... Simple IFS's are not very difficult however, and in the following example I will make a pyramid.

#VRML V2.0 utf8 WorldInfo { title "Pyramid" info ["handcoding vrml - IndexedFaceSet"] } Shape { appearance Appearance { material Material { diffuseColor 0.7 0.6 0.3 } } #end material and appearance geometry IndexedFaceSet { coord Coordinate { point [ 0 0.5 0, -0.5 0 -0.5, -0.5 0 0.5, 0.5 0 0.5, 0.5 0 -0.5, ]} #end coords coordIndex [ 0,1,2,-1, 0,2,3,-1, 0,3,4,-1, 0,4,1,-1, 4,3,2,1,-1, ] #end coordIndex creaseAngle 0 solid TRUE } } #end IndexedFaceSet and Shape

#VRML V2.0 utf8
WorldInfo { title "Pyramid"
info ["handcoding vrml - IndexedFaceSet"] }
Shape {
appearance Appearance {
material Material { diffuseColor 0.7 0.6 0.3
} } #end material and appearance
geometry IndexedFaceSet {
coord Coordinate { point [
0 0.5 0, -0.5 0 -0.5, -0.5 0 0.5, 0.5 0 0.5, 0.5 0 -0.5,
]} #end coords
coordIndex [
0,1,2,-1, 0,2,3,-1, 0,3,4,-1, 0,4,1,-1, 4,3,2,1,-1,
] #end coordIndex
creaseAngle 0
solid TRUE
} } #end IndexedFaceSet and Shape

Now that doesn't look too difficult, does it? Just remember the capitalization of IndexedFaceSet. Again the coordinates are given as 3D vales, separated by commas. When you first start out you might want to keep one value on each line, and put a # and number after it. The numbering starts at 0. Always make sketches of the shape you want and mark the coordinates and number them, so you know which coordinates form faces. These faces are defined in the coordIndex node. Faces can be made up by anything from 3 to, well, plenty of coordinates, as long as they are in the same plane (since a face will always be flat). It is adviseable to use triangels, though (3 coordinates). You give the coordinates' numbers in counterclockwise order, and separated by commas. End each face with a -1 (this is how the browser knows you've finished describing one face). In the above code, the 0 (first) coordinate is the apex of the pyramid, and it forms triangular faces with the four corners. And then there's a square bottom face made up of the corner coordinates.

In this case I chose creaseAngle 0 and solid TRUE, and both of these values are defaults and could have been excluded. A higher creaseAngle makes the shape look "softer"; if you give the creaseAngle a value of 1.6, which is slightly larger than 90 degrees (it's given in radians, like all VRML angles) all angles that are 90 degrees or larger will seem smooth. The solid field determines whether you can see both sides of the faces; since the pyramid is a closed shape where we can't see the inside, there's no point setting the value to FALSE.

And now, as promised, I will briefly mention IndexedLineSet and PointSet. These work just as the IndexedFaceSet, with a bunch of coordinates, only in the IndexedLineSet, the faces are replaced by lines (but it can still be made from several coordinates). In the PointSet (no Indexed before Point) it is even simpler. Only the coordinates themselves show and there is no coordIndex. Neither of these nodes make use of creaseAngle or solid.

Sometimes when you work with IFS's, you might wish you could see the lines that connect the coordinates. Well, you can. You don't have to make the shape's double in linesets or pointsets, to see what it would look like. You can just right click your screen and choose Graphics >> Wireframe or Vertices*. The wireframe view can be very helpful when fine-tuning the location of the coordinates (and it works on all shapes, not just IFS's)

Sometimes when you work with IFS's, you might wish you could see the lines that connect the coordinates. Well, you can. You don't have to make the shape's double in linesets or pointsets, to see what it would look like. You can just right click your screen and choose Graphics >> Wireframe or Vertices*. The wireframe view can be very helpful when fine-tuning the location of the coordinates (and it works on all shapes, not just IFS's)

* This goes for the Blaxxun Contact viewer: If you can't find "Graphics" on your menu, choose Settings and Preferences instead and on the General tab, set the User Interface Level to "Expert". You'll need that setting if you are to create your own items!

Return to Index	Next (Extrusions)

Return to Index

Next (Extrusions)

Text

Fire-Valkyrie — Sun, 02 Aug 2009 04:09:07 CDT

Return to Index	Next (IndexedFaceSets)

Return to Index

Next (IndexedFaceSets)

The text node will allow you to include text in your objects, but the text will be 2-dimensional. It will not create the type of 3d text that you can create in programs such as Spazz; that text is really made with IndexedFaceSets. Going through this code, you'll notice that it has a whole lot of "extras" - bits of code that aren't applicable to any other VRML object. But remember that you don't need to use all of them. You only need to use those nodes that differ from the default values. (Note that the text node demands a lot of computer power - don't use it to write essays!)

#VRML V2.0 utf8 Shape { appearance Appearance { material Material { diffuseColor 0 0.7 0.1 }} geometry Text { fontStyle FontStyle { family "SERIF" #SERIF, SANS or TYPEWRITER style "PLAIN" #PLAIN, BOLD, ITALIC or BOLDITALIC justify "FIRST" #FIRST, BEGIN, MIDDLE or END leftToRight TRUE #FALSE = arabic way topToBottom TRUE #FALSE = chinese way size 1 spacing 0.5 } #end fontStyle string [ "text row one" "text row two" "text row three" ] length [ 3, 6, 0, ] maxExtent 6 }}

#VRML V2.0 utf8
Shape {
appearance Appearance {
material Material { diffuseColor 0 0.7 0.1 }}
geometry Text {
fontStyle FontStyle {
family "SERIF" #SERIF, SANS or TYPEWRITER
style "PLAIN" #PLAIN, BOLD, ITALIC or BOLDITALIC
justify "FIRST" #FIRST, BEGIN, MIDDLE or END
leftToRight TRUE #FALSE = arabic way
topToBottom TRUE #FALSE = chinese way
size 1
spacing 0.5
} #end fontStyle
string [
"text row one"
"text row two"
"text row three"
]
length [ 3, 6, 0, ]
maxExtent 6
}}

Text is the name of the geometry node. To describe the text, you use the fontStyle node (which is duplicated, just like appearance and material; this enables you to define a fontstyle and use it again, later). In the above code, the default value (which the browser will use if you don't define it) is the one used for the text shown in the image and the available options are all shown after the #'s.

The fontStyle families are, as you can see, SERIF (similar to Times New Roman), SANS (more like Arial) and TYPEWRITER (which, strangely enough, looks like old-fashioned typewriter text). The style hardly needs presenting, but here goes anyway: PLAIN = normal, BOLD = fat, ITALIC = cursive and BOLDITALIC = fat cursive. Justify on the other hand might need a short explanation. What it does, is tell the browser which part of your text string is at the zero coordinate. If Justify is "FIRST" or "BEGIN" the text will be left-aligned and extend from the zero coordinate towards the right. (I'm not sure what the difference is between FIRST and BEGIN.) If you choose "END", the text will be right-aligned and extend towards the left. And finally, if you choose "MIDDLE" the text will be centered.

leftToRight and topToBottom describes how the text is written out. No strange things here. If you set leftToRight to FALSE, the text will be written backwards. If you choose to set topToBottom to FALSE, the lines of text will be written in the opposite order (i.e. row three in the above example, will become the top row) but the letters will still be written from left to right.

size, spacing, length and maxExtent, all deal with the size of the text. The size is, as usual, given in meters, so in the above example, each text row is 1 meter tall. Spacing refers to the distance between rows and is also given in meters. length is sort of working the same way. Here you have a chance to give different lengths to each text row, like I've done in the above example. [3,6,0] means the first row is 3 meters, the second is 6 meters and the last becomes the default length for the text string at that size. Finally, the maxExtent, gives the maximum width of your text rows. If they are longer than this value, they will be scaled down. If you have several rows and only some are longer, they will still all be scaled down equally.

Last but not least, we have the string. This is where your text goes. If you want to write a single word, you don't need to use the citation marks, but if you want to write one or more rows, each row must be surrounded by them. If you write text row one without the " ", you'll get each word on a new row.

Return to Index	Next (IndexedFaceSets)

Return to Index

Next (IndexedFaceSets)