Month: September 2018

In this chapter, we will talk about applying textures with diffuse map. In 3D programming, texture is one of the most important parts because it provides that actual look and feel of an object by adding details on its surface.

JavaFX and PhongMaterial

In the javafx.scene.paint package, you can see a class that extends Material abstract class, the PhongMaterial. PhongMaterial allows to create virtual materials that can be applied over your 3D object to create real-world like objects.

Before diving directly in to the code, let’s have a look at what exactly is the Diffuse Map.

What is a Diffuse Map ?

According to the definition, Diffuse mapping (also know as texture mapping) refers to a computer graphics method that simply wrapped and mapped pixels from a texture to a 3D surface. It defines the color property of the surface. For example, if you want to color your object to red, you simply apply red diffuse map over it, it will become red.

If you would like to read more about it, have a look at cryengine doc.

Apply Color Over The Surface

JavaFX PhongMaterial provides two option to apply a diffuse map. Either using a color or using an image. If you use a color, then the whole object will be painted with that color.

Let’s see how setting a color works.

//Create Material
PhongMaterial material = new PhongMaterial();
//Applying JavaFX Diffuse Map with Color Royal Blue[/caption] Royal blue color
material.setDiffuseColor(Color.ROYALBLUE));
Box box = new Box(100, 20, 50);
//Apply material for the box
box.setMaterial(material);

So, using the PhongMaterial’s setDiffuseColor(Color.ROYALBLUE), we set the color of the surface. You can set any color you want.

Apply Texture Over The Surface

Colors are suitable in some cases. But, in most cases, we need something more complex than some simple colors. JavaFX provides option to set diffuse map using an Image. You can simply apply any image as texture for your object.

Let’s see how a wooden texture works on our box.

//Create Material
PhongMaterial material = new PhongMaterial();
//Applying wooden texture
material.setDiffuseMap(new Image(getClass().getResourceAsStream("wood.jpg")));
Box box = new Box(100, 20, 50);
//Apply material for the box
box.setMaterial(material);

And it looks as follows. Pretty awesome, right?

and that’s it. It is just 3 lines of code to apply a complex texture on your object. If you look at the set* methods of PhongMaterial, you will find a lot more methods. The thing is, diffuse map is just a start. You can make your objects with great amount of detail with these options. We will discover those methods in the upcoming chapters.

Visit JavaFX 3D Course Index Page

In this chapter, we will talk about applying transformation on the 3D objects. JavaFX provides following transforms

1. Affine
2. Rotate
3. Scale
4. Shear
5. Translate

For now, we make use of Rotate transformation. All the transformations can be applied in a similar manner.

Applying Transforms

All JavaFX nodes have the method getTransforms() that will return an observable list of all the transforms applied on that. You can simple add a new transform by

 Transform whatever = new Transform();
 yourObject.getTransforms().add(whatever);

When applying transform, it is important that you take care of existing transformation. Let’s say, your object is currently rotated 30 degrees, when you rotate it again by 10, you have to add with 30.

This can be achieved using createConcatenation() method that combines two transformations.

Transformable Container

When we work on 3D programming, we will have to do the transformation regularly. The following class helps to do this in the easy way.

class SmartGroup extends Group {
    Rotate r;
    Transform t = new Rotate();

    void rotateByX(int ang) {
      r = new Rotate(ang, Rotate.X_AXIS);
      t = t.createConcatenation(r);
      this.getTransforms().clear();
      this.getTransforms().addAll(t);
    }

    void rotateByY(int ang) {
      r = new Rotate(ang, Rotate.Y_AXIS);
      t = t.createConcatenation(r);
      this.getTransforms().clear();
      this.getTransforms().addAll(t);
    }
  }

With this SmartGroup, you can separate the rotation logic. It also remembers previous rotation values.

With this, you can rotate an object or a set of objects (the whole container) as follows.

    SmartGroup group = new SmartGroup();
    //Add all the components
    group.getChildren().addAll(box, sphere);

    //Rotate by X - 10 degrees
    group.rotateByX(10);
    //Make it 20
   group.rotateByX(10); 

Listen for Keyboard Inputs

You can register for keyboard press events using KeyEvent.KEY_PRESSED. We have to attach a keyboard listener to the stage itself so that all the key events can be tracked.

primaryStage.addEventHandler(KeyEvent.KEY_PRESSED, event -> {
   //Process according to the key pressed.
   switch (event.getCode()) {
   }
});

Working Example

import javafx.application.Application;
import javafx.scene.Camera;
import javafx.scene.Group;
import javafx.scene.PerspectiveCamera;
import javafx.scene.Scene;
import javafx.scene.input.KeyEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.Box;
import javafx.scene.transform.Rotate;
import javafx.scene.transform.Transform;
import javafx.stage.Stage;


/**
 * @author afsal villan
 * @version 1.0
 *
 * https://genuinecoder.com
 */
public class Rotation3D extends Application {

  private static final int WIDTH = 1400;
  private static final int HEIGHT = 800;

  @Override
  public void start(Stage primaryStage) {
    //Create box
    Box box = new Box(100, 20, 50);

    //Prepare transformable Group container
    SmartGroup group = new SmartGroup();
    group.getChildren().add(box);

    Camera camera = new PerspectiveCamera();
    Scene scene = new Scene(group, WIDTH, HEIGHT);
    scene.setFill(Color.SILVER);
    scene.setCamera(camera);

    //Move to center of the screen
    group.translateXProperty().set(WIDTH / 2);
    group.translateYProperty().set(HEIGHT / 2);
    group.translateZProperty().set(-1200);

    //Add keyboard control.
    primaryStage.addEventHandler(KeyEvent.KEY_PRESSED, event -> {
      switch (event.getCode()) {
        case W:
          group.translateZProperty().set(group.getTranslateZ() + 100);
          break;
        case S:
          group.translateZProperty().set(group.getTranslateZ() - 100);
          break;
        case Q:
          group.rotateByX(10);
          break;
        case E:
          group.rotateByX(-10);
          break;
        case NUMPAD6:
          group.rotateByY(10);
          break;
        case NUMPAD4:
          group.rotateByY(-10);
          break;
      }
    });

    primaryStage.setTitle("Genuine Coder");
    primaryStage.setScene(scene);
    primaryStage.show();
  }


  public static void main(String[] args) {
    launch(args);
  }

  class SmartGroup extends Group {

    Rotate r;
    Transform t = new Rotate();

    void rotateByX(int ang) {
      r = new Rotate(ang, Rotate.X_AXIS);
      t = t.createConcatenation(r);
      this.getTransforms().clear();
      this.getTransforms().addAll(t);
    }

    void rotateByY(int ang) {
      r = new Rotate(ang, Rotate.Y_AXIS);
      t = t.createConcatenation(r);
      this.getTransforms().clear();
      this.getTransforms().addAll(t);
    }
  }
}

Visit JavaFX 3D Course Index Page

By default, JavaFX provides a camera that allows to view the world from the negative z position. When we have to look at the world from our own angle, we need a custom camera.

JavaFX camera component extends javafx.scene.Node. It can be added to the scene graph just like any other JavaFX components. We have 2 different cameras available.

1: Parallel Camera

Parallel Camera always render the objects in same size. This camera defines a viewing volume for a parallel (orthographic) projection; a rectangular box. This camera is always located at center of the window and looks along the positive z-axis. It is not really useful when you want to look at the objects from a certain point.

ParallelCamera camera = new ParallelCamera();
//..Attach to scene
scene.setCamera(camera);

2: Perspective Camera

This camera allows to look at the object from a point. As per the documentation,
“This camera defines a viewing volume for a perspective projection; a truncated right pyramid. The fieldOfView value can be used to change viewing volume. This camera is always located at center of the scene and looks along the positive z-axis. The coordinate system defined by this camera has its origin in the upper left corner of the panel with the Y-axis pointing down and the Z axis pointing away from the viewer (into the screen).”

It has two constructors

• PerspectiveCamera()
• PerspectiveCamera(boolean fixedEyeAtCameraZero)

If fixedEyeAtCameraZero is true, the eye position is fixed at (0, 0, 0) in the local coordinates of the camera. A fixedEyeAtCameraZero as true guarantees that after the eye of the PerspectiveCamera moves along with it, and remains at the camera’s zero position.

PerspectiveCamera camera = new PerspectiveCamera(true);
//..Attach to scene
scene.setCamera(camera);

Field of View

Field of view defines how much we can see in the 3D scene. A larger field of view angles provides a wider view –> you can see more things. This can be set as

 
camera.setFieldOfView(double value);

Clipping Planes

Clipping planes allows to defines that part of the 3D world that we are interested to see. Anything closer to the eye than the near clipping distance isn’t displayed (it’s too close), and anything further away from the eye than the far clipping distance isn’t displayed either (it’s too far away).

 
 camera.setNearClip(double value);
 camera.setFarClip(double value);

Example Code

import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.input.KeyEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.Sphere;
import javafx.stage.Stage;

/**
 * @author afsal villan
 * @version 1.0
 *
 * https://genuinecoder.com
 */
public class Camera3D extends Application {
    private static final int WIDTH = 1400;
    private static final int HEIGHT = 800;

    @Override
    public void start(Stage primaryStage) throws Exception {
        Sphere sphere = new Sphere(50);

        Group group = new Group();
        group.getChildren().add(sphere);

        //Create new Camera
        Camera camera = new PerspectiveCamera(true);
        Scene scene = new Scene(group, WIDTH, HEIGHT);
        scene.setFill(Color.SILVER);
        //Attach to scene
        scene.setCamera(camera);

        //Move back a little to get a good view of the sphere
        camera.translateZProperty().set(-500);

        //Set the clipping planes
        camera.setNearClip(1);
        camera.setFarClip(1000);

        primaryStage.addEventHandler(KeyEvent.KEY_PRESSED, event -> {
            switch (event.getCode()) {
                case W:
                    camera.translateZProperty().set(camera.getTranslateZ() + 100);
                    break;
                case S:
                    camera.translateZProperty().set(camera.getTranslateZ() - 100);
                    break;
            }
        });

        primaryStage.setTitle("Genuine Coder");
        primaryStage.setScene(scene);
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

Visit JavaFX 3D Course Index Page