How to create a Video Wall like in the JavaFX 2.0

Question

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.

Answer 1

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.

Answer 2

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:

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:

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:

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.

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);
        }

    }   

}