FREELessons: 8Length: 41 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Colors

In this lesson, I'll show you how to alter the OpenGL code to change how the app defines the colors on the shapes within the VR scene. We'll change the color for the cube appearance when the user looks at it, editing the float array of color values for each side of the shape.

2.2 Colors

Hello. Welcome back to the Tuts+ VR for Google Cardboard on Android course. My name's Sue Smith. In this course, we are exploding VR development for Android using the sample cardboard project. Last time we looked around the project structure and identified the key elements. In this lesson, we will start making some changes to the sample code. The sample uses OpenGL graphics to define the 3D shapes. In your own projects, you might prefer to define your shapes another way, for example using Unity. We would spend too long learning how the OpenGL code works. But we will take an overview and make a few small changes to better understand how the shapes are defined. So far we focused on the main activity class in the project. But there are two other Java classes so let's take a look at them now. The cardboard overlay view class defines the overlay view we saw in the layout file earlier. It defines the text animation that we saw in the sample up, when the user looks at the cube. The other Java file is the world layout data class. This class defines some of the data that 3D shapes use. If you look through it, you see that it defines various aspects of the cube and floor, including coordinates, colors, and normals. Normals are used to calculate the shading and lighting on each surface in the scene. Let's have a look at the cube phone colors. These are the colors the cube has when the user looks at it. As you can see, the colors on the cube are all the same, yellow. If you compare this to the colors above, you'll see that it has three different colors, red, green, and blue, when the user isn't looking at it. Let's make a small change to the cube phone colors. We'll set the cube to turn white instead of yellow. So we make each RGBA, that's red, green, blue, alpha value, one. And you can run the app now to see the change. We go back to the color code now. Notice that the shading is not indicated here. That's done in the main activity, using the normal's data. If we look at the on surface created method, which the class implements as part of the stereo renderer interface, we see where the app uses the world layout data to model the scene. It models the cube and the floor, preparing the app to apply transformation matrices to draw the shapes and shade them to create the 3D effect. If we look at the LoadGL shader method, we see that it, in turn, uses data from the project's raw resources. The onSurfaceCreated method prepares all of the data that the other methods in the class use to present the shapes inside the 3D scene. Try changing more of the colors in the world layout data and run the app to see the effects. Each color value is a float between 0 and 1. Next time we'll explore more of the app's shape code.

Back to the top