Making of X3Diamond
This page of notes outlines some of the more technical aspects of project development, such as:
[x3diamond home]
Technologies used
- VRML/X3D - Virtual Reality Modelling Language and eXtensible 3D (classic ASCII encoding)
- ECMAScript (in this context also known as javascript and vrmlscript) - used for all interactivity and simulation code
- HLSL - Microsoft's High Level Shader Language
- PHP - server-side scripting (used to populate the XHTML report with data from X3Diamond, and generate the barcode)
- XHTML and CSS - accessible standards for web page presentation
[top of page]
Custom nodes written
The following nodes were written specifically for this project:
C3D_DiamondRoundBrilliant
This PROTO does all the hard work. It accepts input in the form of GIA standard diamond characteristics (such as girdleDiameter, crownHeightPercent etc) and generates wireframe previews (top, bottom and side) plus a complete and mathematically accurate 3D diamond model. It also calculates statistics and outputs strings for the various characteristics that are formatted to conform with GIA classifications, which are then fed back into the user interface and used within the XHTML report.
C3D_Sparkler and C3D_Sparkle
These PROTOs together, dynamically create and control the diamond sparkle effect. C3D_Sparkler takes the diamond facet center points and normal vectors (from the C3D_DiamondRoundBrilliant PROTO above) and outputs position, scale, rotation, transparency and (optionally) color to the individual C3D_Sparkle flares in screen coordinate space, based on the angle of incidence between viewer and each diamond facet. The sparkles scale uniformly with view distance and diamond size, and are correctly occluded by foreground geometry. Both sparkler nodes are general purpose and can be used on any arbitrary geometry (given the aforementioned input requirements).
LogoAnimAD
Simple PROTO to animate the American Diamond logo in the same way as the Macromedia Flash logo animations contained in the premium jewelry galleries on the American Diamond website.
[top of page]
Custom nodes reused
The following nodes were reused from Construct 3D's library framework. These nodes and more will be released as open-source, free software as soon as they are adequately documented.
- C3D_GuiScrollbar - increment and decrement values within a specifiable range
- C3D_GuiToggleButton - a toggle button - on or off. Useful for checkboxes and tabs
- C3D_GuiRadioButton - basically a toggle button but intended for use as a child of a C3D_GuiRadioGroup
- C3D_GuiRadioButtonGroup - clicking one button in a radio group, deactivates any siblings
- C3D_GuiMomentaryButton - click it then it returns to off state
- C3D_GuiIcon - four-state icon logic used by buttons and scrollbars
- C3D_GuiBar - four-state icon logic applied to stretchable bar geometry used by scrollbars, progress bars and the like
- C3D_GuiHud - dynamically (re)positions GUI elements in relation to screen edges and aspect ratio
- C3D_GuiProgressIndicator - simple 'loading bar' used in conjunction with C3D_ResourceLoader
- C3D_GuiHelpText - nice fade on/off help text
- C3D_Fader - used by help text and other items. Fade on/off starts from current transparency value
- C3D_Plane - simple 1x1 quad plane built in the XY axes
- C3D_DragSensor - used by scrollbar. Rewrite of standard PlaneSensor as drag sensors don't work correctly with BS Layer3D at this time
- C3D_Toggle - turn things on and off easily with a boolean true/false input (i.e. without using a Switch node)
- C3D_ResourceLoader - loads ImageTextures and Inlines
- C3D_Timer - non-looping TimeSensor that outputs finishedTime, thereby enabling easy event sequencing
- C3D_Viewpoint - combination of standard Viewpoint and NavigationInfo.type field
- C3D_ViewpointController - liquid smooth, non-linear transitions between C3D_Viewpoints
- C3D_WorldEntrySensor - trigger events soon after the world has been loaded and initialised
- C3D_CrossFadeLayer - allows "fade to color", hidden scene change, then "fade from color" new scene reveal effects
- C3D_DisableContextMenu - disables BS Contact's right mouse button context menu, as it could interfere with mouse wheel zooming in EXAMINE navigation mode
- C3D_BooleanFilter - similar to X3D's BooleanFilter in that it enables easy conditional routing but also adds time outputs for greater flexibility
[top of page]
Proprietary nodes used
The following Bitmanagement Software proprietary nodes were used:
- DrawGroup + DrawOp (for better blending control over diamond back and front faces)
- Layer3D (for user interface and sparkle overlays)
- Selection (useful to prevent some foreground overlay items like sparkles getting in the way of background touch and drag sensors)
- ShaderAppearance (now part of X3D)
- VertexShader (now part of X3D)
[top of page]
Extensions used
The following Bitmanagement Software node and scripting extensions were used:
Standard node field extensions
- NavigationInfo.avatarSize[3-5] (Viewpoint type "EXAMINE" center of rotation SFVec3f) - nice to keep the viewer centered on the diamond while allowing them to spin around freely
- ImageTexture.isLoaded - used by C3D_ResourceLoader
- Inline.isLoaded - used by C3D_ResourceLoader
- FontStyle.style " USE_TEXTURE" suffix - creates nice texture text rather than VRML's geometry text which results in unsightly 'jaggies' if user doesn't have antialiasing turned on
- Material.transparency is blended with texture alpha (non-standard) - sparkles use alpha texture but also need to be faded out depending on angle of incidence
Scripting extensions
- exposedField in Script node (valid X3D, invalid VRML97) - fewer lines of code (and much more readable in my opinion)
- Browser.viewpointPosition - used by C3D_Sparkler to position sparkles and calculate angle of incidence
- Browser.viewpointOrientation - used by C3D_Sparkler to rotate sparkles
- Browser.computeRayHit() - used by C3D_Sparkler to ensure diamond facet is not obscured by foreground geometry
- Browser.getWindowAspect() - used by C3D_GuiHud for dynamic GUI element realignment on window resize
- Browser.prefetch() - used by C3D_ResourceLoader
- Browser.getScript() - used everywhere as replacement for the usual self-referencing scripting practice of
field SFNode self USE thisScript
- Inline - can access children and fields of Inline file
- Math.noise(x) - nothing's perfect so I added some noise to the diamond sparkles
[top of page]
Licensed commercial software used
Note: It is my opinion that this project could just as easily have been developed with all free and open-source software alternatives such as Xj3D, X3D-Edit, Blender, The Gimp, CinePaint, Crimson Editor, PSPad and the like. I only used the above commercial software because I own it and know it better than the free alternatives at the present time.
[top of page]
Free software used
[top of page]
3rd-party digital assets used
The following textures, 3D models, shaders and PROTOs were used to enhance the project (and save me development time):
- Female hand model by Admir Hasanovic - TurboSquid purchase (the model came unposed with a polygon count and material hierarchy incompatible with real-time 3D so I optimised, rigged, skinned, posed and rendered the materials to a single diffuse map in 3ds max with Cebas finalRender)
- NVIDIA glass.fx shader (I added extra fields materialDiffuse and blendFactor)
- NVIDIA metalRefl.fx shader
- barcode.php - server-side barcode generation script by Charles J. Scheffold
- Damper PROTOs by Herbert Stocker
- Saint Blasien cathedral spherical panorama by Helmut Dersch (I rendered to cube faces in 3ds max then assembled and converted to DDS format using NVIDIA DDS Photoshop plugin)
[top of page]
3D models created
- Diamond - ideal round brilliant. Modelled more for geometry analysis and reference purposes. This static model was not used in the final project. The X3Diamond is generated mathematically in real-time, based on user input.
- Ring - 'cathedral' style ring setting
[top of page]
User interface created
A custom GUI was created to match the 'look and feel' of the AmericanDiamond.com website. The colors and style of the X3D should embed seamlessly into the existing HTML. Click the image to the right to see how HTML style and color elements were accurately matched to their X3D/VRML counterparts.
The functionality of the various user interface elements is achieved by using the Construct 3D library framework. PROTOs such as C3D_GuiScrollbar, C3D_GuiRadioButton and many more work together to provide an attractive and intuitive user experience.
[top of page]
Primary online references
The following resources were the primary references used throughout the research and development of the X3Diamond simulation:
[top of page]
Development time
Approximately 150 hours
[top of page]
A custom GUI was created to match the 'look and feel' of the AmericanDiamond.com website. The colors and style of the X3D should embed seamlessly into the existing HTML. Click the image to the right to see how HTML style and color elements were accurately matched to their X3D/VRML counterparts. 