Copacabana Beach Scenes 1-5

Scene01: View of Copacabana Beach with Cable Car and Waves

The viewing is as defined by the Path_ology scene definition as follows:

Starting scene of Copacabana Beach with Cable Car moving to top of Sugar Loaf. Waves looking like Ws are coming in to the shore. Detailed and realistic view of the focal point of the scene outside the Windsor Atlantica Hotel. Coordinates are centred towards the beach near the Hotel. This is where the Olympic Beach Volley Ball Stadium is to be built.

The perspective transformation is defined by the perspective element and this also defines any post processing to be applied after the conversion back to 2D. The 3D axes have the Y-axis downwards as shown below. After the perspective transformation, the origin is in the centre of the screen. This can be adjusted by (Newx, Newy and Scale).

SVG 3D Axes

The perspective transformation is defined by the parameters in the following diagram:

Perspective Transformation

The complete scene with the clipped area that is visible is shown below:

Scene01

Sea and land are flat on the Y=0 plane while the sky surrounds the area in the vertical plane. Houses near the Windsor were taken from real estate photos of the houses stored in the apartments folder. The additional houses are just outlines. The set shown are needed for scene02 when the viewpoint moves around. Mountains were taken from actual photographs converted to SVG then simplified.

(Opening this in Chrome sometimes demonstrates one of the Chrome bugs on the view of the mountains at the point.)

Final Version of Mountain Behind Copacabana Beach

An early attempt modelled all the mountains in 3D but the patches on them never looked realistic so they were replaced by these flat cutouts. Starting from a photograph, this was converted into SVG and then continually simplified until the rendering was not taking up too much computation. To avoid some Chrome bugs, it was necessary to ensure the number of areas rendered on top of other areas was kept to a minimum. Even now the Chrome bug occasionally appears for no apparent reason. You run the same file again and it appears OK.

Simplification of Sugar Loaf

Positions of Mountains behind Copacabana Beach

Below is a map of Copacabana Beach showing the positions of the buildings that have been modelled and centred on the Windsor Atlantica. This was used to calculate the orientation of each building on the main road, Avenue Atlantica. The road that has the turnround to the North of Copacabana Beach is the base of Urca from which the Cable Car goes first to the top of Urca then on to Sugar Loaf.

Building Positions

Below is a detail of the area immediately in front of the Windsor Hotel showing the pattern on the sidewalk and the beach where the volley ball court will appear. Houses on either side of the hotel are drawn approximately to their true scale and number of floors.

Units used are 1 unit is about 5 metres. So the initial viewpoint is 3500 metres. This viewpoint is over 2 miles away from the Atlantica Hotel but using a telephoto lens with a magnification of 4 it appears much closer.

Around Hotel Windsor Atlantica

Windsor Sign

Windsor Hotel

Aerial View Showing Pattern on Front

Windsor Hotel Sign

The sea waves were generated by defining the positions of cubics at various distances from the shore, splitting the cubics in half repeatedly. Then making the individual cibic beziers as separate paths and then animating between the positions using slightly different timings.

Sea Cubics

The cable car is a simplified version of the actual cable car currently being used.

Sugar Loaf Cable Car

Scene02: Moving Viewpoint

The main purpose of this transformation is to start the zoom in towards the Windsor Hotel. The viewpoint is moved to about 2500 metres keeping the viewplane the same distance away. The orientation is changes by 10 degrees. Moving it any closer will cause part of the scene to be behind the viewpoint and the perspective transformation used assumes that is not the case. This intermediate stage gives the ability to adjust the scene removing some of the scene that is no longer visible.

Scene02 End After Change of Orientation and Movement of Viewpoint

The sea, land and front change in each scene as the viewpoint moves closer while buildings are removed. Below shows the progress of the scene over the first four scenes. The black circle on the diagram of the end of scene03 shows the continuing movement in of the viewpoint duing scene04.

Scene02 End After Change of Orientation and Movement of Viewpoint

Doing a fair in and out of the change of viewpoint was tried but the support in Opera and Firefox was so bad that it was removed.

Scene03: Moving viewpoint further

Scene04: Moving viewpoint further

Scene04 After the Zoom In

Scene05: Zoom in on Hotel Windsor Atlantica

This large zoom in and move around gets us to the view of the Hotel Windsor and the frontage at Copacabana Beach.

The move Up ensures that the only background is the mountain. In consequence the size of the scene in terms of drawing is much reduced. From the start of scene01 where the drawing commands were 228Kbytes in size, the start of scene06 has dropped that down to 51Kbytes. This gives us the ability to perform some animation without using too much rendering time.

Scene05 After the Zoom In

This particular site was chosen as it is where the volley ball stadium will be erected for the Olympics in 2016.

Volley Ball Stadium, Olympics 2016

The pattern on the front had to be changed a few times due to the viewpoint still being quite a way from the front. In consequence, the design did not stand out as much as it should. Final design is shown below. All the paths are filled areas as using line thickness does not work too well as you zoom in.

Front Design