Time for action — creating a transparent wall

  1. Open ch6_Transparency_Initial.html in your HTML5 web browser. We have two completely opaque objects: a cone behind a wall. Click-and-drag on the canvas to move the camera behind the wall and see the cone as shown in the following screenshot:
    Time for action — creating a transparent wall
  2. Change the wall alpha value by using the provided slider.
  3. As you can see, modifying the alpha value does not produce any transparency. The reason for this is that the alpha blending is not being enabled. Let's edit the source code and include alpha blending. Open the file ch6_Transparency_Initial.html using your preferred source code editor. Scroll to the configure function and below these lines:
    gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);

    Add: 

    gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);
  4. Save your changes as ch6_Transparency_Final.html and load this page on your web browser.
  5. As expected, the wall changes its transparency as you modify its alpha value using the respective slider.
  6. A note on rendering order: Remember that in order for transparency to be effective the objects need to be rendered back to front. Let's take a look at the source code. Open ch6_Transparency_Final.html in your source code editor.

    The cone is the farthest object in the scene. Hence, it is loaded first. You can check that by looking at the load function: 

    Scene.loadObject('models/geometry/cone.json','cone'),
Scene.loadObject('models/geometry/wall.json','wall',{diffuse:[0.5,0.5,0.2,1.0], ambient:[0.2,0.2,0.2,1.0]});

    Therefore it occupies a lower index in the Scene.objects list. In the draw function, the objects are rendered in the order in which they appear in the Scene.objects list like this: 

    for (var i = 0, max=Scene.objects.length; i < max; i++){
var object = Scene.objects[i];
...
  7. What happens if we rotate the scene so the cone is closer to the camera and the wall is farer away? Open ch6_Transparency_Final.html and rotate the scene such that the cone appears in front of the wall. Now decrease the alpha value of the cone while the alpha value of the wall remains at 1.0.
  8. As you can see, the blending is inconsistent. This does not have to do with alpha blending because in ch6_Transparency_Final.html the blending is enabled (you just enabled it on step 3). It has to do with the rendering order. Click on the Wall First button. The scene should appear consistent now.

    The Cone First and Wall First buttons use a couple of new functions that we have included in the Scene object to change the rendering order. These functions are renderSooner and renderFirst.

    In total, we have added these functions to the Scene object to deal with rendering order:

    • renderSooner(objectName) — moves the object with name objectName one position before in the Scene.objects list.
    • renderLater(objectName) — moves the object with name objectName one position after in the Scene.objects list.
    • renderFirst(objectName) — moves the object with name objectName to the first position of the list (index 0).
    • renderLast(objectName) — moves the object with name objectName to the last position of the list.
    • renderOrder() — lists the objects in the Scene.objects list in the order in which they are rendered. This is the same order in which they are stored in the list. For any two given objects, the object with the lower index will be rendered first.

    You can use these functions from the JavaScript console in your browser and see what effect these have on the scene.

What just happened?

We have taken a simple scene where we have implemented alpha blending. After that we have analyzed the importance of the rendering order in creating consistent transparencies. Finally, we have presented the new methods of the Scene object that control the rendering order.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.23.127.197