Tesla antenna power visualization, powered by Verold Studio + three.js

(checkout the visualization here)

It takes two antennas to unlock your car’s doors remotely: a transmitter antenna inside the vehicle and a receiver antenna inside the handheld controller. Both antennas communicate in a low frequency.

The production for the new Tesla Model X is starting soon, and Premo has designed the antennas that will be installed in this model. Each car will have five to six transmitter antennas: one in the driver’s door, one in the passenger’s door, one in the bumper, one in the trunk and one more in the interior.

Traditional antennas work in low frequency (125/134 kHz) but for highest precision and low susceptibility to low frequency noise, Premo has adopted a 20kHz technology. To test the antenna prototypes, the Premo QA team built a custom testing platform to measure the strength of the controller’s signal around the car.

The original graph that Premo was using to visually represent the data from the measurements looked like this.

Can’t figure out what these stacked slopes mean? We don’t blame you. The main reason why this render of a 3D graph is hard to read is that there is no correlation between the real 3D space where the measurements were taken and the 3D space represented by the axis of this graph.

RSSI stands for Received Signal Strength Indication. The experiment basically consisted of measuring the RSSI value up to 10k different points in space. So, each measurement had four parameters: RSSI value, and X, Y, Z coordinates. Each slope in the image represents all the measurements for a given Z axis value. The peak of the slope represents the highest RSSI value and the bottom represents the lowest.

The problem is you can’t do much better with traditional graph generating tools. In this case, you either distort space like this graph does or end up getting a solid block where only the outer measurements are visible.

But fortunately, if you are a JS developer, you can use three.js to generate more realistic 3D graphs. Combine that with the power of Verold Studio, and you’ll be creating mindblowing 3D graphs sooner than you think.

We’ve used Verold Studio to help Premo showcase their new antennas at Electronica 2014. The result is an interactive application that runs in your browser. And it looks like this.

How we made it

Unlike the original graph, this scene is self-explanatory. Each point in the cloud represents one measurement. As the legend indicates, colour is used to represent the strength of the RSSI value. The highest values are purple and the lowest ones are red.

Thanks to Verold Studio, we were able to implement this simulation in just a few hours. The first thing we did was import the 3D model of the car and tweak the materials to make it look as realistic as possible. On this alternative version of the project, we modified some meshes to open the car’s doors.

The next step was setting up the scene. This included applying a ground texture and setting up the scene lighting.

Once the model and the scene were ready, we set up the camera. Premo wanted the camera to automatically orbit the car. There is a ‘Camera Controls’ component in our Asset Library that does exactly that, so we didn’t have to write any code. We just downloaded the component and attached it to the scene. This component allows users to stop the automatic rotation (clicking anywhere on the scene) and take control of the camera.

The next thing we had to do was transform the test data into a 3D graph. For that we used Verold Studio’s Code Editor. We had a CSV file with all the raw data in a table and downloaded it with a standard XMLHttpRequest. Once we had the position and strength for each data point, it was simply a matter of creating billboard particles and placing them in the scene, next to the car. The strength of each data point was translated into a colour for each particle and made slightly transparent to give it an ethereal quality.

We’ve been using web technology all the way, so publishing the project and integrating it in a larger application or just adding some custom UI is quite easy. In this case, the last thing we needed to do was include a title, some logos and the graph legend, so we grabbed the code from the project and added some HTML/CSS using a code editor.

This project is just one example of the potential of three.js + Verold Studio for data visualization. Join the Verold community and start creating your own simulations today!

(This post was originally posted on the Verold blog by Carlos Sánchez, our lead designer and the developer behind this awesome project)