Download presentation
Presentation is loading. Please wait.
1
Exploring JavaFX 3D Jim Weaver Java Technology Ambassador
Oracle Corporation @JavaFXpert
2
Program Agenda Introduction to JavaFX 3D Nuts and Bolts of JavaFX 3D
More Fun with JavaFX 3D First, we’ll give you a brief introduction to JavaFX 3D, including how you may obtain an early access release that contains it. Then we’ll drill down into some of the main features of JavaFX 3D. Finally, we’ll explore more 3D-related features.
3
Please note The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle. 3
4
Introduction to JavaFX 3D
5
Start Here: http://javafxcommunity.com
The JavaFX Community site is a great home page for JavaFX developers, as it contains links to resources, and the latest blog posts, tweets and videos from the JavaFX community. 5
6
Download JDK 8 Early Access Release
6
7
Visit the 3D Features for JavaFX 8 Wiki
Here is a page on the OpenJDK wiki that contains features in JavaFX 3D. This page is available from a link on the site. 7
8
Visit Here: http://fxexperience.com
Tip: This site is authored by Oracle JavaFX Engineers 8
9
“JavaFX 3D gives you the ability to use 3D geometry, cameras, and lights in JavaFX.”
Jasper Potts This is quote by Jasper Potts, one of the JavaFX engineers. In it he mentions the three main features of JavaFX 3D, which are 3D geometry, cameras, and lights. JavaFX Engineer, Oracle Corporation
10
JavaFX 3D Application Example
This is a screen shot of the 3D proof of concept that Oracle did in conjuction with Canoo and Navis. It uses a 3D interface to help the user visualize the containers and processes in the shipping yard. 10
11
JavaFX 3D Use Cases Inventory and Process Visualization
Scientific and Engineering Visualization 3D Charting Mechanical CAD and CAE Medical Imaging Here are some use cases for leveraging JavaFX 3D in applications 11
12
More JavaFX 3D Use Cases Product Marketing
Architectural Design and Walkthroughs Advanced User Experience Mission Planning Training Entertainment More use cases 12
13
Nuts and Bolts of JavaFX 3D (Shapes, Materials, Textures, Lights, Cameras)
Now we’ll drill down into the three main features of JavaFX 3D, which are 3D geometry (shapes, materials, textures), lights, and cameras.
14
Mesh Geometry (3D Shapes)
Predefined shapes Box Cylinder Sphere User-defined shapes Using TriangleMesh / MeshView In JavaFX 3D there are three predefined shapes (Box, Cylinder, and Sphere). You can also create your own user-defined shapes, which consist of a mesh of triangles and a MeshView to be able to view the TriangleMesh. 14
15
Creating Primitive Shapes and Materials
Note to presenter: This demo may be seen by running the SphereAndBox project 15
16
Rotating the 3D Shapes Tip: Use lambda expressions as shown here to simplify event handling Here is the code used to rotate the 3D shapes when the user drags a mouse or finger horizontally. 16
17
3D Materials and Textures
PhongMaterial has these properties Ambient color Diffuse color, diffuse map Specular color, specular map Specular power Bump map Self-illumination map The top sphere contains a diffuse color and a specular color. The middle sphere contains a diffuse map, which is an image. The bottom sphere contains a bump map, which is an image that when render give the illusion that the shape contains bumps. Note that the bumps are not part of the geometry of the shape. 17
18
UV Mapping Textures to Shapes
Tip: A texture is a 2D image to be mapped on a 3D surface A technique known as UV mapping is used to map a 2D image onto a 3D shape. Source: 18
19
Placing a Texture on a Sphere
Here’s an example of mapping an image onto a sphere. Note to presenter: This demo may be seen by running the EarthSphere project. 19
20
Placing a Texture on a Sphere
Here is the code used to create the diffuse map and the PhongMaterial instance that will contain the diffuse map. 20
21
Placing a Texture on a Cylinder
Note that the texture is mapped three times to the cylinder radius height Here we place the same texture on a Cylinder. Note that the texture is mapped three times to the cylinder. Note to presenter: This demo may be seen by running the EarthCylinder project. 21
22
Specifying Divisions on a Cylinder
radius height divisions A Cylinder may have a number of sides (divisions) rather than having a smooth circular appearance. Note to presenter: This demo may be seen by running the EarthCylinderDivisions project. 22
23
Placing an Image on a Box
Note that the texture is mapped six times to the box Tip: A Box doesn’t have to be a cube. It may have different width, height and depth args Here we place the same texture on a Box. Note that the texture is mapped six times to the box. Note to presenter: This demo may be seen by running the EarthBox project. 23
24
Using TriangleMesh / MeshView
If the same texture on all sides of the cube isn’t desired, a user-defined shape may be created using TriangleMesh and MeshView So far, we’ve associated textures with the primitive shapes. Now we’ll create a user-defined shape, which in this case happens to be a cube for simplicity, and map a texture to it. Note to presenter: This demo may be seen by running the MeshCube project. 24
25
UV Mapping on a Cube As a fun exercise we’ll map a cubic representation of the earth, created by Carlos Furuti, onto the a cube. 25
26
Understanding TriangleMesh
8 points 0, 0 1, 0 14 texCoords Image 12 faces Tip: Best practice for texture map dimensions is powers of two (e.g. 1024x512) 12 faces A TriangleMesh is defined by supplying values that represent the points on a 3D shape, the points on a 2D texture (image), and the faces being mapped from the 2D image to the 3D shape. 0, 1 1, 1 26
27
Using TriangleMesh Points
Tip: The API for points, texCoords, and faces is currently being modified, primarily to hold this data in different structures. (For example) This is a closer look at how the points on the the 3D shape are identified. Note that the API for points, texCoords, and faces is currently being modified, primarily to hold this data in different structures. 27
28
Using TriangleMesh Texture Coords
(For example) This is a closer look at how the points on the the 2D texture are identified. 28
29
Using TriangleMesh Faces
0, 2, 1 are points[] indices 10, 5, 9 are texCoords[] indices This is a closer look at how the faces on the the 3D shape and associated faces on the texture are identified. 29
30
Using TriangleMesh Smoothing Groups
(and putting all the pieces together of our user-defined shape) These are faces[] indices 30
31
Real-World Example of Mesh Geometry
This is a screen shot of the space shuttle represented by a 3D model, without texture. It was created in 3D modeling software (e.g. Maya), and loaded into a JavaFX application. Note to presenter: This demo may be seen by running the TestViewer application located in the executable TestViewer.jar file, and opening (Ctrl-O) the SpaceShuttle.ma file. 31
32
3D Lights Lights are nodes in the scene graph
Lights are nodes in the scene graph PointLight AmbientLight Default light provided if no active lights Now that we’ve explored the first feature in JavaFX 3D (mesh geometry), we’ll take a look at other two features mentioned earlier (cameras and lighting). Note to presenter: This demo may be seen by running the FX8-3DAPI project. 32
33
Lights, Camera, Action! Here is the code used to create the lights and camera. Note that lights and cameras are nodes in the scene graph, so they are moveable. Tip: The camera is also a node in the scene graph, so it is moveable 33
34
More Fun with JavaFX 3D
35
Using a SubScene SubScene is a special node for scene separation
Renders part of the scene with a different camera Some use cases are: Overlay for UI controls Underlay for background "Heads-up" display 35
36
Creating a SubScene Here we’re using a SubScene to hold an Hbox that contains couple of UI controls: The slider modifies that Z position of the cube, and the check box shows the wireframe of the cube when checked. Note to presenter: This demo may be seen by running the MeshCubeSubScene project. 36
37
Behavior of this SubScene
Binding is employed here to keep the UI controls and the model in sync. 37
38
3D Node Picking Some events (e.g. MouseEvent and TouchEvent) have a getPickResult() method PickResult contains info such as Node picked 3D point picked on node Distance of point from camera Face # of node picked Some input events contain information about the “pick”, represented in a PickResult instance. Note to presenter: This demo may be seen by running the MeshCubePickDemo project. 38
39
3D Node Picking Here, for example, we’re ascertaining and displaying which of the 12 triangular faces of the cube is clicked. 39
40
Platonic Solids Tip: Sample code for loading a 3D format will be made available. Third-party loaders are available as well. This is a screen shot of another 3D model loaded into a JavaFX 3D application. In this case, the 3D model contains a number of platonic solids and a chess board. Note to presenter: This demo may be seen by running the TestViewer application located in the executable TestViewer.jar file, and opening (Ctrl-O) the platonic_simulation.ma file. 40
41
Example 3D / multi-touch app: ZenGuitar3D
42
Showing the Picker (TouchEvent)
42
43
Rotating Instrument Picker with Scroll Gesture
43
44
Playing Strings (TouchEvent / TouchPoint)
44
45
Switching Modes (TouchPoint#belongsTo)
GuitarString3D instance 45
46
Setting up to Rotate on Three Axes
46
47
Using Scroll Gesture for X/Y Rotate
47
48
Using Rotate Gesture for Z Rotate
48
49
Using Zoom Gesture for Scaling
49
50
Using Timeline to Transform to Home Position
50
51
ZenGuitar3D Uses the JFugue5 Library
An open-source Java API for programming music without the complexities of MIDI Developed by David Koelle Available at 51
52
Questions?
53
Exploring JavaFX 3D Jim Weaver Java Technology Ambassador
Oracle Corporation @JavaFXpert
Similar presentations
