RC Viper ACR - Viper 2.0
Final part of RC Viper ACR Technologies & Systems shows version Viper 2.0 with live 3D model.
In version 2.0 we completely changed the graphic of the app. We took full advantage of the 3D rotating model script, so we created a 3D version of our car along with the garage, where we placed it. We’ve also added counting of driven distance and top speed to the program.
3D model of Viper
First of all, we created a 3D model of our Dodge Viper and the garage where we show it. We created the models in 3ds MAX, then we imported them into Cinema4D, where we rendered them.
After we created the models in 3ds, we created a scene in Cinema4D, and we added light to the garage - halogen reflectors with a light set to Volumetric, which makes the spotlight visible. We also created a camera, which moves around the model along the circle. Then only, which left to do, was rendering, that means creating a picture, moving the camera, creating a picture… This way we continued until we had a rendered image from all positions on circle, which means 50 pictures. One render in average takes 1.20 minute. We repeated the procedure for individual lights, so we finally got 250 pictures.
We have the images inside separate layers on the page, so it was necessary to adjust all the images for the lights so that only the changed part is displayed and the individual lights are not overlapped. We have edited the images in Paint.net. Also we’ve combined the images for the blinkers with a transparent image to get the GIF, which makes the flashing effect of blinker. After editing all the lights images, everything for a 3D model in the app was prepared.
By modifying the threesixty.js program already in the first version of app, we only needed to assign the correct paths to the images, which we wanted to use and set the number of frames. Long hours of graphical work have taken place in rotating 3D model, where we can see the lights, we can notice the reflection on the floor, the range of lights, the blindness from the reflectors and many other details.
The highest speed and driven distance now display on the telemetry screen, similarly to the speed in version 1.0, it is also a <h3> element in which is inserted value from Pubnub.
In Python, this is a simple script which, when receiving speed from the rpm channel, compares this speed with the highest measured speed, if it is higher, program sends speed to the application. In addition, it calculates the traveled distance, adds it to the total distance and also sends it to the application. Of course, this information is also stored in the firstload.info file and sent when model is started along with other important data.
Unlike version 1.0, in version 2.0 is not used speedometer.js. Rotating of the needle is solved using rotate.js, which is a classic feature known from CSS. When the speed is received through the rpm channel, the needle is continuously rotated from the last value to the new. The speedometers have been modified, left one for speed was deleted, there is only one for rpm under which is the speed display. All data is still available in miles or kilometers, the switch button is located in the startup section.
Compared with version 1.0, we removed from the aerodynamic adjustment screen the right-side view, which replaced the full screen 3D view for which we’ve created the view switch button. After clicking on it, the 3D model rotates and zoom in, then wing moves to the manual setting. When we manually adjust aerodynamics, the wing moves responding to the real model.
For this we had to return to Cinema4D and add a camera that brought us closer to the model. We’ve rendered the video from it. Then we converted it to mp4 and created a copy of it, which goes backwards so we can zoom in and out. Next, we have independently rendered the car without a wing as well as parts of the wing and lights in this view. We also had to edit all these parts in Paint.net.
The next step was to create the code, which turned our 3D model to the position where the video begins. To do this, we used the demo mode built into threesixty.js. We created a callback which starts after clicking the button, setting a frame in which we want to turn the model and run the demo mode.
Subsequently, we created a script which will wait for the model to rotate, then display, play, and hide the video for zooming, display the images with the wings and moves them to the appropriate position. With the second click, it moves the parts to the position on the video, hides them, displays the video for the zoom out, plays it, then hides all parts and we find ourselves back in the 3D model view. This has created a smooth animation for manual aerodynamics adjustment.
Now when we’ve had the transition to the wings setting, we could go to the setting itself. This works in a similar way to the 1.0 version, when the slider moves, it changes the offset and rotation of the image, causing it to move, each section moves separately, creating a more realistic view.
So that was it, all technologies used in Viper are explained. Remains only final conclusion. So stay tuned and have a nice day!