1

Exploring JavaFX 3D

Jim WeaverJava Technology AmbassadorOracle Corporation

@JavaFXpertjames.weaver@oracle.com

2Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 16

ProgramAgenda

Introduction to JavaFX 3D

Nuts and Bolts of JavaFX 3D

More Fun with JavaFX 3D

3 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.

4

Introduction to JavaFX 3D

5 5

Start Here: http://javafxcommunity.com

6 6

Download JDK 8 Early Access Release

7 7

Visit the 3D Features for JavaFX 8 Wikihttps://wikis.oracle.com/display/OpenJDK/3D+Features

8 8

Visit Here: http://fxexperience.com

Tip: This site is authored by Oracle JavaFX Engineers

9

“JavaFX 3D gives you the ability to use 3D geometry, cameras, and lights in JavaFX.”

Jasper PottsJavaFX Engineer, Oracle Corporation

10

JavaFX 3D Application Example

10

http://fxexperience.com/2013/02/javafx-3d-early-access-available/

11

JavaFX 3D Use Cases

■ Inventory and Process Visualization

■ Scientific and Engineering Visualization

■ 3D Charting

■ Mechanical CAD and CAE

■ Medical Imaging

11

12

More JavaFX 3D Use Cases

■ Product Marketing

■ Architectural Design and Walkthroughs

■ Advanced User Experience

■ Mission Planning

■ Training

■ Entertainment

12

13

Nuts and Bolts of JavaFX 3D

(Shapes, Materials, Textures, Lights, Cameras)

14

Mesh Geometry (3D Shapes)

■ Predefined shapes■ Box

■ Cylinder

■ Sphere

■ User-defined shapes■ Using TriangleMesh / MeshView

14

https://wikis.oracle.com/display/OpenJDK/SphereAndBox.java

15 15

Creating Primitive Shapes and Materials

16 16

Rotating the 3D ShapesTip: Use lambda expressions as shown here to simplify event handling

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

17

https://wikis.oracle.com/display/OpenJDK/3D+Features

18

UV Mapping Textures to Shapes

18

Tip: A texture is a 2D image to be mapped on a 3D surface

Source: http://en.wikipedia.org/wiki/File:UVMapping.png

19

Placing a Texture on a Sphere

19

20

Placing a Texture on a Sphere

20

21

Placing a Texture on a Cylinder

21

radius height

Note that the texture is mapped three times to the cylinder

22

Specifying Divisions on a Cylinder

22

radius height divisions

23

Placing an Image on a Box

23

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

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

24

25

UV Mapping on a Cube

25

26

Understanding TriangleMesh

26

8 points

12 faces

14 texCoords

12 faces

Image

0, 0

0, 1

1, 0

1, 1

Tip: Best practice for texture map dimensions is powers of two

(e.g. 1024x512)

27

Using TriangleMesh Points

27

Tip: The API for points, texCoords, and faces is currently being modified, primarily to hold this data in different structures.

(For example)

28

Using TriangleMesh Texture Coords

28

(For example)

29

Using TriangleMesh Faces

29

0, 2, 1 are points[] indices

10, 5, 9 are texCoords[] indices

30

Using TriangleMesh Smoothing Groups

30

These are faces[] indices

(and putting all the pieces together of our user-defined shape)

31 31

Real-World Example of Mesh Geometry

32

3D Lights

■ Lights are nodes in the scene graph■ PointLight

■ AmbientLight

■ Default light provided if no active lights

32

https://wikis.oracle.com/display/OpenJDK/3D+Features

33 33

Lights, Camera, Action!

Tip: The camera is also a node in the scene graph, so it is moveable

34

More Fun with JavaFX 3D

35

Using a SubScene

35

■ 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

36

Creating a SubScene

36

37

Behavior of this SubScene

37

38

3D Node Picking

38

■ 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

39

3D Node Picking

39

40

Platonic Solids

40

Tip: Sample code for loading a 3D format will be made available. Third-party loaders are available as well.

41

Example 3D / multi-touch app: ZenGuitar3D

42 42

Showing the Picker (TouchEvent)

43 43

Rotating Instrument Picker with Scroll Gesture

44 44

Playing Strings (TouchEvent / TouchPoint)

45 45

Switching Modes (TouchPoint#belongsTo)

GuitarString3D instance

46 46

Setting up to Rotate on Three Axes

47 47

Using Scroll Gesture for X/Y Rotate

48 48

Using Rotate Gesture for Z Rotate

49 49

Using Zoom Gesture for Scaling

50 50

Using Timeline to Transform to Home Position

51 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 http://JFugue.org

52

Questions?

53

Exploring JavaFX 3D

Jim WeaverJava Technology AmbassadorOracle Corporation

@JavaFXpertjames.weaver@oracle.com

54