2

How do you create a video wall like in the JavaFX 2.0 demo here:

https://www.youtube.com/watch?v=UXSmJYFrulY#t=411

For a start it doesn't have to be videos, it can be images as well. All I'd like to have is to place the nodes like they are in the video, i. e. in a curved shape like the insides of a cylinder or a sphere.

Or is the source of that demo available somewhere?

Thank you very much.

2
  • Super awesome demo. Your best bet is probably to ask on the openjfx-dev JavaFX developer mailing list. Perhaps some of the demo developers are still subscribed to the developer list and could provide you some information on how they accomplished that particular piece of awesomeness.
    – jewelsea
    Jan 30, 2015 at 16:29
  • Didn't get it so far, neither some code fragments for translation/rotation of the images. Maybe starting a bounty will help :-)
    – Roland
    Feb 10, 2015 at 5:58

2 Answers 2

5

I researched and found a very awesome site with the relevant information:

http://paulbourke.net/geometry/transformationprojection/

The relevant part was the Coordinate System Transformation, in particular the equations for converting between cartesian and spherical coordinates.

double x = r * Math.sin(angle1) * Math.cos(angle2);
double y = r * Math.sin(angle1) * Math.sin(angle2);
double z = r * Math.cos(angle1);

In my example below y isn't used from the formula, since the image rows are stacked.

Note: By using these formulas in 2 nested for-loops from -Math.PI to Math.PI you can lay out the nodes around a sphere. The difficult part regarding the full sphere was to rotate the nodes towards the center, that one I couldn't figure out.

Since I wasn't familiar with Java3D I also checked out the Building a 3D Sample Application.

In the end I got a video wall, the code is reduced to this:

public class VideoWall extends Application {

    Random rand = new Random();

    Group root = new Group();
    PerspectiveCamera camera;

    private static final double CAMERA_INITIAL_DISTANCE = -850;
    private static final double CAMERA_NEAR_CLIP = 0.1;
    private static final double CAMERA_FAR_CLIP = 10000.0;

    Image[] images = new Image[] {
            new Image("http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Siberischer_tiger_de_edit02.jpg/320px-Siberischer_tiger_de_edit02.jpg"),
            new Image("http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/White_Lion.jpg/320px-White_Lion.jpg"),
            new Image("http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Lion_female.jpg/319px-Lion_female.jpg")

    };

    public VideoWall(){

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

    /**
     * Create ImageView with random Image.
     * @return
     */
    private ImageView createImageView() {

        Image image = images[ rand.nextInt(images.length)];

        ImageView c = new ImageView( image);

        c.setFitWidth(140);
        c.setFitWidth(100);
        c.setPreserveRatio(true);

        return c;
    }

    @Override
    public void start(Stage primaryStage) {

        // build camera
        camera = new PerspectiveCamera(true);
        camera.setNearClip(CAMERA_NEAR_CLIP);
        camera.setFarClip(CAMERA_FAR_CLIP);
        camera.setTranslateZ(CAMERA_INITIAL_DISTANCE);

        // we display any node (imageview, webview, etc)
        Node node;

        // create a single webview; we only add it once because we don't want to flood youtube
        WebView webView = new WebView();
        webView.getEngine().load(
          "http://www.youtube.com/embed/utUPth77L_o?autoplay=1"
        );
        webView.setPrefSize(100, 70);

        // wall. the degrees depend on the distance, image size, translate start points, etc. so these values were just as they fit
        double ringBeginDeg = -30;
        double ringEndDeg = 38;

        double r = 1300; 
        double yOffset = 80; // offset per image row
        double yOffsetInitial = 120; // initial y offset from "floor"

        int count=0;

        for( double angle1=Math.toRadians(ringBeginDeg); angle1 <Math.toRadians(ringEndDeg); angle1+=0.08)
        {

            double angle2 = Math.PI;

            for( int i=-3; i <= 3; i++)
            {

                double x = r * Math.sin(angle1) * Math.cos(angle2);
                // double y = r * Math.sin(angle1) * Math.sin(angle2);
                double z = r * Math.cos(angle1);

                // add 1 webview, the rest imageviews 
                if( count == 16) {
                    node = webView;
                } else {
                    node = createImageView();
                }

                node.setTranslateX(x);
                node.setTranslateY(yOffset * i - yOffsetInitial);
                node.setTranslateZ(z);

                // rotate towards viewer position
                Rotate rx = new Rotate();
                rx.setAxis(Rotate.Y_AXIS);
                rx.setAngle(Math.toDegrees( -angle1));

                node.getTransforms().addAll(rx);

                root.getChildren().add( node);

                count++;
            }

        }

        Scene scene = new Scene(root, 1600, 900, Color.BLACK);

        primaryStage.setScene( scene);
        primaryStage.show();

        scene.setCamera(camera);
    }

}

You can add whatever node you prefer. I added a youtube webview for testing. It plays, but the video doesn't get loaded, so all you see is static noise (the grey tile in the screenshot). So in theory you could make the nodes all webview with youtube videos, but that would mean flooding youtube. Better use some offline videos.

Here's a screenshot:

enter image description here

I also toyed around with the full 3d example and creating a ring. That's how it looked like (with always the same image) from an outer view:

enter image description here

Having the camera in the center you can nicely scroll the ring.

If someone wants to toy around, here's a quick & dirty gist with the navigable ring. Use left/right/middle mouse buttons for navigation.

And if you'd like to toy around with a full sphere, you may use this:

// full sphere
for (double angle1 = -Math.PI; angle1 <= Math.PI; angle1 += 0.15) {
    for (double angle2 = -Math.PI; angle2 <= Math.PI; angle2 += 0.15) {

        double x = r * Math.sin(angle1) * Math.cos(angle2);
        double y = r * Math.sin(angle1) * Math.sin(angle2);
        double z = r * Math.cos(angle1);

        c = createImageView();

        c.setTranslateX(x);
        c.setTranslateY(y);
        c.setTranslateZ(z);

        Rotate rx = new Rotate();
        rx.setAxis(Rotate.Y_AXIS);
        rx.setAngle(Math.toDegrees(-angle1));

        c.getTransforms().addAll(rx);

        world.getChildren().add(c);
    }
}

Which looks like this:

enter image description here

But as mentioned, I haven't figured out yet how to rotate all tiles so that they look into the center. And they'd need to be equally distributed. But that's just for fun and off-topic.


Since it's part of the video in my question, it was only a matter of keeping a list of parallel transitions to create the "build-up" animation of the tiles. The bottom row has a reflection now.

enter image description here

The extended code:

public class VideoWall extends Application {

    Random rand = new Random();

    Group root = new Group();
    PerspectiveCamera camera;

    private static final double CAMERA_INITIAL_DISTANCE = -850;
    private static final double CAMERA_NEAR_CLIP = 0.1;
    private static final double CAMERA_FAR_CLIP = 10000.0;

    Image[] images = new Image[] {
            new Image("http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Siberischer_tiger_de_edit02.jpg/320px-Siberischer_tiger_de_edit02.jpg"),
            new Image("http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/White_Lion.jpg/320px-White_Lion.jpg"),
            new Image("http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Lion_female.jpg/319px-Lion_female.jpg")

    };

    List<ParallelTransition> transitionList = new ArrayList<>();

    public VideoWall(){

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

    /**
     * Create ImageView with random Image.
     * @return
     */
    private ImageView createImageView() {

        Image image = images[ rand.nextInt(images.length)];

        ImageView c = new ImageView( image);

        c.setFitWidth(140);
        c.setFitWidth(100);
        c.setPreserveRatio(true);

        return c;
    }

    @Override
    public void start(Stage primaryStage) {

        // build camera
        camera = new PerspectiveCamera(true);
        camera.setNearClip(CAMERA_NEAR_CLIP);
        camera.setFarClip(CAMERA_FAR_CLIP);
        camera.setTranslateZ(CAMERA_INITIAL_DISTANCE);

        // we display any node (imageview, webview, etc)
        Node node;

        // wall. the degrees depend on the distance, image size, translate start points, etc. so these values were just as they fit
        double ringBeginDeg = -30;
        double ringEndDeg = 38;

        double r = 1300; 
        double yOffset = 80; // offset per image row
        double yOffsetInitial = 120; // initial y offset from "floor"

        int min = -3;
        int max = 3;

        for( double angle1=Math.toRadians(ringBeginDeg); angle1 <Math.toRadians(ringEndDeg); angle1+=0.08)
        {

            double angle2 = Math.PI;

            for( int i=min; i <= max; i++)
            {

                double x = r * Math.sin(angle1) * Math.cos(angle2);
                // double y = r * Math.sin(angle1) * Math.sin(angle2);
                double z = r * Math.cos(angle1);

                node = createImageView();

                node.setTranslateX(x);
                node.setTranslateY(yOffset * i - yOffsetInitial);
                node.setTranslateZ(z);

                // rotate towards viewer position
                Rotate rx = new Rotate();
                rx.setAxis(Rotate.Y_AXIS);
                rx.setAngle(Math.toDegrees( -angle1));

                node.getTransforms().addAll(rx);

                // reflection on bottom row
                if( i==max) {
                    Reflection refl = new Reflection();
                    refl.setFraction(0.8f);
                    node.setEffect(refl);
                }

                // build the wall using a transition 
                node.setVisible(false);
                transitionList.add( createTransition( node));

                root.getChildren().add( node);

            }

        }

        Scene scene = new Scene(root, 1600, 900, Color.BLACK);

        primaryStage.setScene( scene);
        primaryStage.show();

        scene.setCamera(camera);

        AnimationTimer timer = createAnimation();
        timer.start();

    }

    private AnimationTimer createAnimation() {

        Collections.sort(transitionList, new Comparator<ParallelTransition>() {

            @Override
            public int compare(ParallelTransition arg0, ParallelTransition arg1) {

                // bottom right to top left
                Point2D ref = new Point2D(1000,1000);
                Point2D pt0 = new Point2D( arg0.getNode().getTranslateX(), arg0.getNode().getTranslateY());
                Point2D pt1 = new Point2D( arg1.getNode().getTranslateX(), arg1.getNode().getTranslateY());

                return Double.compare(ref.distance(pt0), ref.distance(pt1));

                // bottom row first
                // return -Double.compare( arg0.getNode().getTranslateY(), arg1.getNode().getTranslateY());

            }

        });


        AnimationTimer timer = new AnimationTimer() {

            long last = 0;

            @Override
            public void handle(long now) {

                //if( (now - last) > 1_000_000_000) 
                if( (now - last) >   40_000_000) 
                {
                    if( transitionList.size() > 0) {

                        ParallelTransition t = transitionList.remove(0);
                        t.getNode().setVisible(true);
                        t.play();

                    }
                    last = now;

                }

                if( transitionList.size() == 0) {
                    stop();
                }
            }

        };

        return timer;
    }

    private ParallelTransition createTransition( final Node node) {

        Path path = new Path();
        path.getElements().add(new MoveToAbs( node, node.getTranslateX() - 1000, node.getTranslateY() - 900));
        path.getElements().add(new LineToAbs( node, node.getTranslateX(), node.getTranslateY()));

        Duration duration = Duration.millis(1500);

        PathTransition pt = new PathTransition( duration, path, node);

        RotateTransition rt = new RotateTransition( duration, node);
        rt.setByAngle(720);
        rt.setAutoReverse(true);

        ParallelTransition parallelTransition = new ParallelTransition();
        parallelTransition.setNode(node);
        parallelTransition.getChildren().addAll(pt, rt);

        return parallelTransition;

    }

    public static class MoveToAbs extends MoveTo {

        public MoveToAbs( Node node, double x, double y) {
            super( x - node.getLayoutX() + node.getLayoutBounds().getWidth() / 2, y - node.getLayoutY() + node.getLayoutBounds().getHeight() / 2);
        }

    }

    public static class LineToAbs extends LineTo {

        public LineToAbs( Node node, double x, double y) {
            super( x - node.getLayoutX() + node.getLayoutBounds().getWidth() / 2, y - node.getLayoutY() + node.getLayoutBounds().getHeight() / 2);
        }

    }   

}
3
  • 1
    Thanks. Would be great if someone could re-use the code and improve it. I'm not totally happy with it. eg the images should be located by center and not by top/left coordinate. That's why the wall ranges from -30 deg to 38. And the image dimensions are also only some values that worked. However, I'm impressed that it is really that easy to do it. Also to use a video instead of an image. JavaFX is awesome.
    – Roland
    Feb 11, 2015 at 17:41
  • The Affine transform is really nice and powerful for 3d transforms, though quite a bit more difficult to use.. There is an effect called Billboarding (probably heard of it), where you can set the transform to always look at (X)point .. I have an implementation, but needs to be re-worked.. I'll post the code below in my previous answer. (it also centers coordinates for non 3d shapes like images)
    – jdub1581
    Feb 11, 2015 at 19:10
  • Ok Roland, I added some code below for you to play with.. hope you enjoy.. Not 100% perfect (mainly due to image layout), but it works.. :)
    – jdub1581
    Feb 12, 2015 at 16:57
3
+150

Well to me it seems to be a matter of creating a Grid, or "Mesh" out of ImageViews. Then you would Map all the Viewport's to the Image('s) you want to display.

Here for example is a Skybox for 3D implementation using this approach. Note that this is just a simple Cube. The image is setup similar to this, though I made it into 6 separate Images.

If you wanted to use video, I recommend you use VLCJ, They have samples for JavaFX setup Here For this you would apply the same principals to the WritableImage(s)

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

I added a couple things for you to play with ...

/**
* A self initializing First Person Shooter camera
*
* @author Jason Pollastrini aka jdub1581
*/
public class SimpleFPSCamera extends Parent {

public SimpleFPSCamera() {
    initialize();
}

private void update() {
    updateControls();
}

private void updateControls() {
    if (fwd && !back) {
        moveForward();
    }
    if (strafeL) {
        strafeLeft();
    }
    if (strafeR) {
        strafeRight();
    }
    if (back && !fwd) {
        moveBack();
    }
    if (up && !down) {
        moveUp();
    }
    if (down && !up) {
        moveDown();
    }
}
/*==========================================================================
 Initialization
 */
private final Group root = new Group();
private final Affine affine = new Affine();
private final Translate t = new Translate(0, 0, 0);
private final Rotate rotateX = new Rotate(0, Rotate.X_AXIS),
        rotateY = new Rotate(0, Rotate.Y_AXIS),
        rotateZ = new Rotate(0, Rotate.Z_AXIS);

private boolean fwd, strafeL, strafeR, back, up, down, shift;

private double mouseSpeed = 1.0, mouseModifier = 0.1;
private double moveSpeed = 10.0;
private double mousePosX;
private double mousePosY;
private double mouseOldX;
private double mouseOldY;
private double mouseDeltaX;
private double mouseDeltaY;

private void initialize() {
    getChildren().add(root);
    getTransforms().addAll(affine);
    initializeCamera();
    startUpdateThread();
}

public void loadControlsForSubScene(SubScene scene) {
    sceneProperty().addListener(l -> {
        if (getScene() != null) {
            getScene().addEventHandler(KeyEvent.ANY, ke -> {
                if (ke.getEventType() == KeyEvent.KEY_PRESSED) {
                    switch (ke.getCode()) {
                        case Q:
                            up = true;
                            break;
                        case E:
                            down = true;
                            break;
                        case W:
                            fwd = true;
                            break;
                        case S:
                            back = true;
                            break;
                        case A:
                            strafeL = true;
                            break;
                        case D:
                            strafeR = true;
                            break;
                        case SHIFT:
                            shift = true;
                            moveSpeed = 20;
                            break;
                    }
                } else if (ke.getEventType() == KeyEvent.KEY_RELEASED) {
                    switch (ke.getCode()) {
                        case Q:
                            up = false;
                            break;
                        case E:
                            down = false;
                            break;
                        case W:
                            fwd = false;
                            break;
                        case S:
                            back = false;
                            break;
                        case A:
                            strafeL = false;
                            break;
                        case D:
                            strafeR = false;
                            break;
                        case SHIFT:
                            moveSpeed = 10;
                            shift = false;
                            break;
                    }
                }
                ke.consume();
            });
        }
    });
    scene.addEventHandler(MouseEvent.ANY, me -> {
        if (me.getEventType().equals(MouseEvent.MOUSE_PRESSED)) {
            mousePosX = me.getSceneX();
            mousePosY = me.getSceneY();
            mouseOldX = me.getSceneX();
            mouseOldY = me.getSceneY();

        } else if (me.getEventType().equals(MouseEvent.MOUSE_DRAGGED)) {
            mouseOldX = mousePosX;
            mouseOldY = mousePosY;
            mousePosX = me.getSceneX();
            mousePosY = me.getSceneY();
            mouseDeltaX = (mousePosX - mouseOldX);
            mouseDeltaY = (mousePosY - mouseOldY);

            mouseSpeed = 1.0;
            mouseModifier = 0.1;

            if (me.isPrimaryButtonDown()) {
                if (me.isControlDown()) {
                    mouseSpeed = 0.1;
                }
                if (me.isShiftDown()) {
                    mouseSpeed = 1.0;
                }
                t.setX(getPosition().getX());
                t.setY(getPosition().getY());
                t.setZ(getPosition().getZ());

                affine.setToIdentity();

                rotateY.setAngle(
                        Utils.clamp(-360, ((rotateY.getAngle() + mouseDeltaX * (mouseSpeed * mouseModifier)) % 360 + 540) % 360 - 180, 360)
                ); // horizontal                
                rotateX.setAngle(
                        Utils.clamp(-45, ((rotateX.getAngle() - mouseDeltaY * (mouseSpeed * mouseModifier)) % 360 + 540) % 360 - 180, 35)
                ); // vertical
                affine.prepend(t.createConcatenation(rotateY.createConcatenation(rotateX)));

            } else if (me.isSecondaryButtonDown()) {
                /*
                 init zoom?
                 */
            } else if (me.isMiddleButtonDown()) {
                /*
                 init panning?
                 */
            }
        }
    });

    scene.addEventHandler(ScrollEvent.ANY, se -> {

        if (se.getEventType().equals(ScrollEvent.SCROLL_STARTED)) {

        } else if (se.getEventType().equals(ScrollEvent.SCROLL)) {

        } else if (se.getEventType().equals(ScrollEvent.SCROLL_FINISHED)) {

        }
    });
}

public void loadControlsForScene(Scene scene) {
    scene.addEventHandler(KeyEvent.ANY, ke -> {
        if (ke.getEventType() == KeyEvent.KEY_PRESSED) {
            switch (ke.getCode()) {
                case Q:
                    up = true;
                    break;
                case E:
                    down = true;
                    break;
                case W:
                    fwd = true;
                    break;
                case S:
                    back = true;
                    break;
                case A:
                    strafeL = true;
                    break;
                case D:
                    strafeR = true;
                    break;
                case SHIFT:
                    shift = true;
                    moveSpeed = 20;
                    break;
            }
        } else if (ke.getEventType() == KeyEvent.KEY_RELEASED) {
            switch (ke.getCode()) {
                case Q:
                    up = false;
                    break;
                case E:
                    down = false;
                    break;
                case W:
                    fwd = false;
                    break;
                case S:
                    back = false;
                    break;
                case A:
                    strafeL = false;
                    break;
                case D:
                    strafeR = false;
                    break;
                case SHIFT:
                    moveSpeed = 10;
                    shift = false;
                    break;
            }
        }
        ke.consume();
    });
    scene.addEventHandler(MouseEvent.ANY, me -> {
        if (me.getEventType().equals(MouseEvent.MOUSE_PRESSED)) {
            mousePosX = me.getSceneX();
            mousePosY = me.getSceneY();
            mouseOldX = me.getSceneX();
            mouseOldY = me.getSceneY();

        } else if (me.getEventType().equals(MouseEvent.MOUSE_DRAGGED)) {
            mouseOldX = mousePosX;
            mouseOldY = mousePosY;
            mousePosX = me.getSceneX();
            mousePosY = me.getSceneY();
            mouseDeltaX = (mousePosX - mouseOldX);
            mouseDeltaY = (mousePosY - mouseOldY);

            mouseSpeed = 1.0;
            mouseModifier = 0.1;

            if (me.isPrimaryButtonDown()) {
                if (me.isControlDown()) {
                    mouseSpeed = 0.1;
                }
                if (me.isShiftDown()) {
                    mouseSpeed = 1.0;
                }
                t.setX(getPosition().getX());
                t.setY(getPosition().getY());
                t.setZ(getPosition().getZ());

                affine.setToIdentity();

                rotateY.setAngle(
                        Utils.clamp(-360, ((rotateY.getAngle() + mouseDeltaX * (mouseSpeed * mouseModifier)) % 360 + 540) % 360 - 180, 360)
                ); // horizontal                
                rotateX.setAngle(
                        Utils.clamp(-45, ((rotateX.getAngle() - mouseDeltaY * (mouseSpeed * mouseModifier)) % 360 + 540) % 360 - 180, 35)
                ); // vertical
                affine.prepend(t.createConcatenation(rotateY.createConcatenation(rotateX)));

            } else if (me.isSecondaryButtonDown()) {
                /*
                 init zoom?
                 */
            } else if (me.isMiddleButtonDown()) {
                /*
                 init panning?
                 */
            }
        }
    });

    scene.addEventHandler(ScrollEvent.ANY, se -> {

        if (se.getEventType().equals(ScrollEvent.SCROLL_STARTED)) {

        } else if (se.getEventType().equals(ScrollEvent.SCROLL)) {

        } else if (se.getEventType().equals(ScrollEvent.SCROLL_FINISHED)) {

        }
    });
}

private void initializeCamera() {
    getCamera().setNearClip(0.1);
    getCamera().setFarClip(100000);
    getCamera().setFieldOfView(42);
    getCamera().setVerticalFieldOfView(true);
    //getCamera().getTransforms().add(new Rotate(180, Rotate.Z_AXIS));
    root.getChildren().add(getCamera());
}

private void startUpdateThread() {
    new AnimationTimer() {
        @Override
        public void handle(long now) {
            update();
        }
    }.start();
}
/*==========================================================================
 Movement
 */

private void moveForward() {
    affine.setTx(getPosition().getX() + moveSpeed * getN().getX());
    affine.setTy(getPosition().getY() + moveSpeed * getN().getY());
    affine.setTz(getPosition().getZ() + moveSpeed * getN().getZ());
}

private void strafeLeft() {
    affine.setTx(getPosition().getX() + moveSpeed * -getU().getX());
    affine.setTy(getPosition().getY() + moveSpeed * -getU().getY());
    affine.setTz(getPosition().getZ() + moveSpeed * -getU().getZ());
}

private void strafeRight() {
    affine.setTx(getPosition().getX() + moveSpeed * getU().getX());
    affine.setTy(getPosition().getY() + moveSpeed * getU().getY());
    affine.setTz(getPosition().getZ() + moveSpeed * getU().getZ());
}

private void moveBack() {
    affine.setTx(getPosition().getX() + moveSpeed * -getN().getX());
    affine.setTy(getPosition().getY() + moveSpeed * -getN().getY());
    affine.setTz(getPosition().getZ() + moveSpeed * -getN().getZ());
}

private void moveUp() {
    affine.setTx(getPosition().getX() + moveSpeed * -getV().getX());
    affine.setTy(getPosition().getY() + moveSpeed * -getV().getY());
    affine.setTz(getPosition().getZ() + moveSpeed * -getV().getZ());
}

private void moveDown() {
    affine.setTx(getPosition().getX() + moveSpeed * getV().getX());
    affine.setTy(getPosition().getY() + moveSpeed * getV().getY());
    affine.setTz(getPosition().getZ() + moveSpeed * getV().getZ());
}

/*==========================================================================
 Properties
 */
private final ReadOnlyObjectWrapper<PerspectiveCamera> camera = new ReadOnlyObjectWrapper<>(this, "camera", new PerspectiveCamera(true));

public final PerspectiveCamera getCamera() {
    return camera.get();
}

public ReadOnlyObjectProperty cameraProperty() {
    return camera.getReadOnlyProperty();
}

/*==========================================================================
 Callbacks    
 | R | Up| F |  | P|
 U |mxx|mxy|mxz|  |tx|
 V |myx|myy|myz|  |ty|
 N |mzx|mzy|mzz|  |tz|

 */
//Forward / look direction    
private final Callback<Transform, Point3D> F = (a) -> {
    return new Point3D(a.getMzx(), a.getMzy(), a.getMzz());
};
private final Callback<Transform, Point3D> N = (a) -> {
    return new Point3D(a.getMxz(), a.getMyz(), a.getMzz());
};
// up direction
private final Callback<Transform, Point3D> UP = (a) -> {
    return new Point3D(a.getMyx(), a.getMyy(), a.getMyz());
};
private final Callback<Transform, Point3D> V = (a) -> {
    return new Point3D(a.getMxy(), a.getMyy(), a.getMzy());
};
// right direction
private final Callback<Transform, Point3D> R = (a) -> {
    return new Point3D(a.getMxx(), a.getMxy(), a.getMxz());
};
private final Callback<Transform, Point3D> U = (a) -> {
    return new Point3D(a.getMxx(), a.getMyx(), a.getMzx());
};
//position
private final Callback<Transform, Point3D> P = (a) -> {
    return new Point3D(a.getTx(), a.getTy(), a.getTz());
};

private Point3D getF() {
    return F.call(getLocalToSceneTransform());
}

public Point3D getLookDirection() {
    return getF();
}

private Point3D getN() {
    return N.call(getLocalToSceneTransform());
}

public Point3D getLookNormal() {
    return getN();
}

private Point3D getR() {
    return R.call(getLocalToSceneTransform());
}

private Point3D getU() {
    return U.call(getLocalToSceneTransform());
}

private Point3D getUp() {
    return UP.call(getLocalToSceneTransform());
}

private Point3D getV() {
    return V.call(getLocalToSceneTransform());
}

public final Point3D getPosition() {
    return P.call(getLocalToSceneTransform());
}
}

Your Modified code:

public class VideoWall extends Application {

Random rand = new Random();

Group root = new Group();
PerspectiveCamera camera;
SimpleFPSCamera fpsCam;

private static final double CAMERA_INITIAL_DISTANCE = -10000;
private static final double CAMERA_NEAR_CLIP = 0.1;
private static final double CAMERA_FAR_CLIP = 100000.0;

Image[] images = new Image[]{
    new Image("http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Siberischer_tiger_de_edit02.jpg/320px-Siberischer_tiger_de_edit02.jpg"),
    new Image("http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/White_Lion.jpg/320px-White_Lion.jpg"),
    new Image("http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Lion_female.jpg/319px-Lion_female.jpg")

};

List<ParallelTransition> transitionList = new ArrayList<>();
List<ImageView> imageList = new ArrayList<>();
public VideoWall() {

}

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

/**
 * Create ImageView with random Image.
 *
 * @return
 */
private ImageView createImageView() {

    Image image = images[rand.nextInt(images.length)];

    ImageView c = new ImageView(image);

    c.setFitWidth(140);
    c.setFitWidth(100);
    c.setPreserveRatio(true);

    return c;
}

private BillboardImage createBillboardImage() {
    Image image = images[rand.nextInt(images.length)];

    BillboardImage c = new BillboardImage(image);

    c.setFitWidth(140);
    c.setFitWidth(100);
    c.setPreserveRatio(true);

    return c;
}

@Override
public void start(Stage primaryStage) {

    // build camera
    //camera = new PerspectiveCamera(true);
    //camera.setNearClip(CAMERA_NEAR_CLIP);
    //camera.setFarClip(CAMERA_FAR_CLIP);
    //camera.setTranslateZ(CAMERA_INITIAL_DISTANCE);
    fpsCam = new SimpleFPSCamera();

    // we display any node (imageview, webview, etc)
    Node node;

    // wall. the degrees depend on the distance, image size, translate start points, etc. so these values were just as they fit
    double ringBeginDeg = -30;
    double ringEndDeg = 38;

    double r = 1300;
    double yOffset = 80; // offset per image row
    double yOffsetInitial = 120; // initial y offset from "floor"

    int min = -3;
    int max = 3;
    /*
     for (double angle1 = Math.toRadians(ringBeginDeg); angle1 < Math.toRadians(ringEndDeg); angle1 += 0.08) {

     double angle2 = Math.PI;

     for (int i = min; i <= max; i++) {

     double x = r * Math.sin(angle1) * Math.cos(angle2);
     // double y = r * Math.sin(angle1) * Math.sin(angle2);
     double z = r * Math.cos(angle1);

     node = createImageView();

     node.setTranslateX(x);
     node.setTranslateY(yOffset * i - yOffsetInitial);
     node.setTranslateZ(z);

     // rotate towards viewer position
     Rotate rx = new Rotate();
     rx.setAxis(Rotate.Y_AXIS);
     rx.setAngle(Math.toDegrees(-angle1));

     node.getTransforms().addAll(rx);

     // reflection on bottom row
     if (i == max) {
     Reflection refl = new Reflection();
     refl.setFraction(0.8f);
     node.setEffect(refl);
     }

     // build the wall using a transition 
     node.setVisible(false);
     transitionList.add(createTransition(node));

     root.getChildren().add(node);

     }

     }*/

    // full sphere
    for (double angle1 = -Math.PI; angle1 <= Math.PI; angle1 += 0.48) {
        for (double angle2 = -Math.PI; angle2 <= Math.PI; angle2 += 0.48) {

            double x = r * Math.sin(angle1) * Math.cos(angle2);
            double y = r * Math.sin(angle1) * Math.sin(angle2);
            double z = r * Math.cos(angle1);

            BillboardImage c = createBillboardImage();

            c.setTranslateX(x);
            c.setTranslateY(y);
            c.setTranslateZ(z);


            imageList.add(c);
        }
    }
    root.getChildren().add(fpsCam);
    root.getChildren().addAll(imageList);
    Scene scene = new Scene(root, 1600, 900, true, SceneAntialiasing.BALANCED);
    scene.setFill(Color.BLACK);
    scene.setCamera(fpsCam.getCamera());
    fpsCam.loadControlsForScene(scene);

    primaryStage.setScene(scene);
    primaryStage.show();

    AnimationTimer timer = createBillboardTimer();
    timer.start();

}

private AnimationTimer createBillboardTimer() {
    return new AnimationTimer() {
        @Override
        public void handle(long now) {
            if(!imageList.isEmpty()){
                imageList.stream().forEach(bbi ->{
                    ((BillboardImage)bbi).updateMatrix(bbi, fpsCam);
                });
            }
        }
    };
}

private AnimationTimer createAnimation() {

    Collections.sort(transitionList, new Comparator<ParallelTransition>() {

        @Override
        public int compare(ParallelTransition arg0, ParallelTransition arg1) {

            // bottom right to top left
            Point2D ref = new Point2D(1000, 1000);
            Point2D pt0 = new Point2D(arg0.getNode().getTranslateX(), arg0.getNode().getTranslateY());
            Point2D pt1 = new Point2D(arg1.getNode().getTranslateX(), arg1.getNode().getTranslateY());

            return Double.compare(ref.distance(pt0), ref.distance(pt1));

            // bottom row first
            // return -Double.compare( arg0.getNode().getTranslateY(), arg1.getNode().getTranslateY());
        }

    });

    AnimationTimer timer = new AnimationTimer() {

        long last = 0;

        @Override
        public void handle(long now) {

            //if( (now - last) > 1_000_000_000) 
            if ((now - last) > 40_000_000) {
                if (transitionList.size() > 0) {

                    ParallelTransition t = transitionList.remove(0);
                    t.getNode().setVisible(true);
                    t.play();

                }
                last = now;

            }

            if (transitionList.size() == 0) {
                stop();
            }
        }

    };

    return timer;
}

private ParallelTransition createTransition(final Node node) {

    Path path = new Path();
    path.getElements().add(new MoveToAbs(node, node.getTranslateX() - 1000, node.getTranslateY() - 900));
    path.getElements().add(new LineToAbs(node, node.getTranslateX(), node.getTranslateY()));

    Duration duration = Duration.millis(1500);

    PathTransition pt = new PathTransition(duration, path, node);

    RotateTransition rt = new RotateTransition(duration, node);
    rt.setByAngle(720);
    rt.setAutoReverse(true);

    ParallelTransition parallelTransition = new ParallelTransition();
    parallelTransition.setNode(node);
    parallelTransition.getChildren().addAll(pt, rt);

    return parallelTransition;

}

public static class MoveToAbs extends MoveTo {

    public MoveToAbs(Node node, double x, double y) {
        super(x - node.getLayoutX() + node.getLayoutBounds().getWidth() / 2, y - node.getLayoutY() + node.getLayoutBounds().getHeight() / 2);
    }

}

public static class LineToAbs extends LineTo {

    public LineToAbs(Node node, double x, double y) {
        super(x - node.getLayoutX() + node.getLayoutBounds().getWidth() / 2, y - node.getLayoutY() + node.getLayoutBounds().getHeight() / 2);
    }

}

/*

 */
public enum BillboardMode {
    SPHERICAL,
    CYLINDRICAL;
}

private class BillboardImage extends ImageView{

// Add transform to Node that needs to look at target..
    public Affine affine = new Affine();

    public BillboardImage() {
        this.getTransforms().add(affine);
    }

    public BillboardImage(String url) {
        super(url);
        this.getTransforms().add(affine);
    }

    public BillboardImage(Image image) {
        super(image);
        this.getTransforms().add(affine);
    }


// set up to look at camera, can change to any other Node

    protected void updateMatrix(Node billBoardNode, Node other) {
        Transform self = billBoardNode.getLocalToSceneTransform(),
                oth = other.getLocalToSceneTransform();
        Bounds b;
        double cX, cY, cZ;
        if (!(billBoardNode instanceof Shape3D)) {
            b = billBoardNode.getBoundsInLocal();
            cX = b.getWidth() / 2;
            cY = b.getHeight() / 2;
            cZ = b.getDepth() / 2;
        } else {
            cX = self.getTx();
            cY = self.getTy();
            cZ = self.getTz();
        }
        Point3D otherPos = Point3D.ZERO.add(oth.getTx(), oth.getTy(), oth.getTz());
        Point3D selfPos = new Point3D(cX, cY, cZ);
        Point3D up = Point3D.ZERO.add(0, -1, 0),
                forward = new Point3D(
                        (selfPos.getX()) - otherPos.getX(),
                        (selfPos.getY()) - otherPos.getY(),
                        (selfPos.getZ()) - otherPos.getZ()
                ).normalize(),
                right = up.crossProduct(forward).normalize();
        up = forward.crossProduct(right).normalize();
        switch (getBillboardMode()) {
            case SPHERICAL:
                affine.setMxx(right.getX()); affine.setMxy(up.getX());affine.setMzx(forward.getX());
                affine.setMyx(right.getY());affine.setMyy(up.getY()); affine.setMzy(forward.getY());
                affine.setMzx(right.getZ());affine.setMzy(up.getZ());affine.setMzz(forward.getZ());
                affine.setTx(cX * (1 - affine.getMxx()) - cY * affine.getMxy() - cZ * affine.getMxz());
                affine.setTy(cY * (1 - affine.getMyy()) - cX * affine.getMyx() - cZ * affine.getMyz());
                affine.setTz(cZ * (1 - affine.getMzz()) - cX * affine.getMzx() - cY * affine.getMzy());
                break;
            case CYLINDRICAL:
                affine.setMxx(right.getX());affine.setMxy(0);affine.setMzx(forward.getX());
                affine.setMyx(0);affine.setMyy(1);affine.setMzy(0);
                affine.setMzx(right.getZ()); affine.setMzy(0);affine.setMzz(forward.getZ());
                affine.setTx(cX * (1 - affine.getMxx()) - cY * affine.getMxy() - cZ * affine.getMxz());
                affine.setTy(cY * (1 - affine.getMyy()) - cX * affine.getMyx() - cZ * affine.getMyz());
                affine.setTz(cZ * (1 - affine.getMzz()) - cX * affine.getMzx() - cY * affine.getMzy());
                break;
        }
    }

    public BillboardMode getBillboardMode() {
        return BillboardMode.SPHERICAL;
    }
}
}

At least now the Images are billboarded to the Camera.. Feel free to play with my FPSCamera as well ..

Controls are like any standard 1st person shooter

w = forward, s = back, a = left-strafe, d = right-strafe, q & e are up and down.

8
  • Thank you. Yes, it's a simple matter of mapping all images to a grid. The Skybox is a trivial 90 degree rotation example. The problem is creating a grid / mesh that represents parts of a sphere or a cylinder and calculating the translations as well as the rotation of the nodes at given points of the mesh. Do you know how to do that? Whether the node is an image, a video or a shape shouldn't matter.
    – Roland
    Feb 10, 2015 at 17:36
  • Perhaps try projecting points onto a sphere, wish I had some time to play around with this...
    – jewelsea
    Feb 10, 2015 at 18:17
  • I'll see what I can do.. Note you can use a 3d shape as well, supplying it the required Image as a diffuseMap, but care needs to be taken as the Images dont like to scale to large sizes.
    – jdub1581
    Feb 10, 2015 at 19:35
  • Thanks guys, for some reason SO didn't notify me about your comments. I had some spare time left, so I researched and created a working example. It would be a solution, I'm not sure it's a proper one. I'm not very familiar with the 3d stuff.
    – Roland
    Feb 11, 2015 at 7:15
  • Thank you jdub1581. It's a lot of math. I'll try to include that. You don't happen to have a minimal, full working example?
    – Roland
    Feb 12, 2015 at 6:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.