webfx-demo-cube

A simple WebGL demo (available online) coded with WebFX. It has been realised as followed:

• The cube scene has first been created by following the WebGL tutorial, and then the following additions have been made:

  • multi-textures (applying a different texture on each cube face)
  • mouse steering (rotating the cube with the mouse)
  • keyboard steering (moving the camera with the arrow keys)
  • Code door (adding a double-faces door inside the cube to access this GitHub repo)

JOML has been used for the 3D matrix computations (to be more accurate this GWT-compatible fork of JOML).

• The smoke scene is a modification of this original demo made by Pavel Dobryakov, with the following additions:

  • transparency management (so it can be displayed over the cube scene)
  • new texture width & height factors [0..1] to have different effect amplitudes

While in the original demo the effect is driven by the mouse, in this demo it is driven by the pen (see below).

• The text scene is a completely new JavaFX code. The handwriting effect has been realised as followed:

  • This single-stroke online text generator (font = Work Sans) has been used to create a SVG version of the text (as a series of SVG paths).
  • The global SVG transform has been applied on each SVG path (using Inkscape Extensions > Modify Path > Apply Transform)
  • The JavaFX code analyses the SVG file and maps each SVG path into a JavaFX Path.
  • The handwriting effect is achieved by increasing the value of each Path.strokeDashArray.
  • The exact position of the pen is computed using some Path interpolation code.

The main application code assembles these 3 scenes into the JavaFX scene graph, and program the animation timer. It drives the smoke effect from the pen position. A menu with controls is also displayed using a GridPane.

Running the demo on your local machine

The webapp is generated by running the following Maven command:

mvn package -P gwt-compile

The generated index.html file is located at:

webfx-demo-cube-application-gwt/target/webfx-demo-cube-application-gwt-0.1.0-SNAPSHOT/webfx_demo_cube_application_gwt/index.html

Locate and open this file from your IDE, or any webserver (pictures & videos will be blocked by CORS if just using the file:// protocol).

Question?

Feel free to ask here any question related to the usage of WebGL in WebFX.