12.4 - Transparency¶

Transparency in the Z-buffer Algorithm¶

If a surface allows light to pass through it, a viewer sees some of the light reflected from the surface and some of the light reflected from the object that is behind the surface. Therefore, transparency requires the combining of light from two sources. Let’s review the z-buffer algorithm – which looks like this:

void renderPixel(x, y, z, color) {
  if (z < z_buffer[x][y]) {
    z_buffer[x][y]     = z;
    color_buffer[x][y] = color;
  }
}

Notice that the algorithm contains two colors: 1) color_buffer[x][y], which is the color already in the color buffer, and 2) color, which is the color of the surface being rendered. If surfaces are rendered in a “back-to-front” order, the graphics pipeline can combine the colors using the amount of transparency of the foreground surface. The z-buffer rendering algorithm changes to this:

void renderPixel(x, y, z, color) {
  if (z < z_buffer[x][y]) {
    z_buffer[x][y] = z;
    color_buffer[x][y] = color * transparency_percent
                       + color_buffer[x][y] * (1.0 - transparency_percent);
  }
}

The transparency_percent is the alpha component of the surface’s color. The “alpha” value represents the percentage of light that is reflected from the surface. If alpha is 1.0, 100% of the light is reflected and the surface is “opaque”. If the alpha value is 0.75, the surface reflects 75% of the light that strikes it and allows 25% of the light to pass through. This “blending of colors” is called alpha blending and the z-buffer rendering algorithm becomes:

void renderPixel(x, y, z, color) {
  if (z < z_buffer[x][y]) {
    z_buffer[x][y] = z;
    color_buffer[x][y].rgb = color.rgb * color.a  // or color[3]
                           + color_buffer[x][y].rgb * (1.0 - color.a);
  }
}

This command enables alpha blending in the graphics pipeline:

gl.enable(gl.BLEND)

WebGL uses the term source (or src) to refer to a surface that is being rendered, while it uses the term destination (or dst) to refer to the color buffer. When alpha blending is enabled, the calculation

color.rgb * color.a + color_buffer[x][y].rgb * (1.0 - color.a);

is written generically as

color.rgb * src_percent + color_buffer[x][y].rgb * dst_percent;

The values used for the percentages of the “source” and “destination” colors can be set to a variety of options – which we will explain in detail in the next lesson. For transparency, the percentages need to be color.a and 1.0 - color.a. To specify these percentages, the gl.blendFunc() command is called with predefined ENUM constants used to specify the percentage values:

gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

Rendering a Scene That Contains Transparent Surfaces¶

Transparent surfaces are not visible if they are behind opaque objects. Therefore, hidden surface removal is needed to render a scene correctly. However, if there are multiple transparent surfaces in a scene, and they are aligned behind each other in relationship to the camera’s view, it is possible for the color of a pixel to be determined by light that has traveled through many (or all) of them. To calculate the correct final color we need to process the surfaces in order from furthest from the camera to the closest to the camera. This requires sorting the transparent surfaces before rendering them. If the models or the camera is moving between renderings, the sorting must be done for each render. Here are the major steps needed to render a scene that contains transparent surfaces.

1. Clear the color buffer and the depth-buffer - gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
2. Disable blending - gl.disable(gl.BLEND);
3. Render all of the opaque models in the scene. (The order does not matter.) Blending should be disabled and updates to the depth buffer must be enabled.
4. Enable blending and set the blending percentages.
   gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
5. Sort the transparent models based on their distance from the camera. (Greatest to least distance.)
6. Keep the z-buffer algorithm active, but disable changes to the zbuffer array. (gl.depthMask(false))
7. Render each transparent model.
   1. Sort the graphic primitives in a model based on their distance from the camera. (Greatest to least distance.)
   2. Render the transparent model.

The sorting in steps 5 and 7a slows down rendering significantly. Careful analysis of specific scenes might allow you to eliminate the sorting. For example, consider these special scenarios:

• There is only one transparent model in a scene. The primitives in the model must be sorted, but you can simply render the transparent model last in the scene.
• There are multiple transparent models in a scene, but none of them overlap each other from the current camera view. Therefore, render the transparent models in any order after all of the opaque models have been rendered.
• If a model contains some opaque surfaces and some transparent surfaces, then the following situations might apply:
  • The transparent surfaces never face the camera. Therefore ignore the transparent surfaces.
  • The transparent surfaces face the camera but always have another opaque surface behind them that are part of the same model. Therefore sorting the graphic primitives of this model is sufficient; the sorting of all the transparent models can be ignored, assuming that models do not intersect in 3D space.

To summarize, rendering a complex scene that contains transparent surfaces may not be possible in real-time. In some cases, knowledge of the scene can be used to avoid or minimize sorting to regain real-time rendering.

Sorting for Transparency¶

There are two types of sorts required for rendering transparency:

• sorting models relative to each other, and
• sorting graphic primitives (points, lines, and triangles) within a model.

The implementation details for each sorting task are very different. However, in both cases the sorting needs to be as efficient as possible. Using a Quicksort for these sorting tasks is a big mistake. A Quicksort can have awful performance on data that is almost sorted. Consider that if models in a scene are moving (or if the camera is moving), the changes from one frame to the next in an animation are typically small. Given a sorted list of models from a previous rendering, the sorted order for a new frame is probably very similar. A model’s position in the list might shift a couple of locations. The best sorting algorithm for “almost sorted” data is the insertion sort which has O(n) time complexity for “almost sorted” data. We will use an “insertion sort” for sorting models and for sorting graphic primitives within a model.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// ---------------------------------------------------------------------
function _calculateDistanceFromCamera () {
  let position;

  for (let j = 0; j < number_transparent_cubes; j += 1) {
    position = transparent_cubes[j].position;

    // Create the needed transformation matrices.
    matrix.translate(translate_matrix,
                     position[0], position[1], position[2]);

    // Create a single transformation for all model and camera transforms.
    matrix.multiplySeries(camera_model_transform,
                          to_camera_space, translate_matrix);

    // Transform the center point of the cube into camera space.
    matrix.multiplyP4(result, camera_model_transform, position);

    // The z component represents the distance to the camera.
    transparent_cubes[j].z = result[2];  // z-component
  }
}

// ---------------------------------------------------------------------
function _sortTransparentModels () {

  // Update the distance of each model from the camera.
  _calculateDistanceFromCamera();

  // Do an insertion sort on the list of cube properties.
  let k, temp;

  for (let j = 0; j < number_transparent_cubes; j += 1) {
    temp = transparent_cubes[j];
    k = j - 1;
    while (k >= 0 && transparent_cubes[k].z > temp.z) {
      transparent_cubes[k + 1] = transparent_cubes[k];
      k -= 1;
    }
    transparent_cubes[k + 1] = temp;
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function _sortTriangles (number_triangles, camera_space) {

  if (sort_indexes == null) _initializeSorting(number_triangles);

  _updateDistanceFromCamera(number_triangles, camera_space);

  _indexedInsertionSort(number_triangles);

  _reorderVerticesInBufferObjects(number_triangles);
}

Experimentation¶

Please experiment with the following WebGL program by disabling the animation and rotating the models to study the transparency. Rotate to a view that allows you to see through multiple transparent models with an opaque model in the background. Is the rendering correct? Do you see any models that are rendered incorrectly?

Re-start Show: Code   Canvas   Run Info Download Files Download Edited Files

• transparency1_scene.js
• render_transparency.js

/** * transparency1_scene.js, By Wayne Brown, Spring 2018 */ /** * The MIT License (MIT) * * Copyright (c) 2015 C. Wayne Brown * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in all * copies or substantial portions of the Software. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ "use strict"; /** ----------------------------------------------------------------------- * Create a WebGL 3D scene, store its state, and render its models. * * @param id The id of the webglinteractive directive * @param download An instance of the SceneDownload class * @param vshaders_dictionary A dictionary of vertex shaders. * @param fshaders_dictionary A dictionary of fragment shaders. * @param models A dictionary of models. * @constructor */ window.Transparency1Scene = function (id, download, vshaders_dictionary, fshaders_dictionary, models) { // Private variables let self = this; let out = download.out; let gl = null; let visible_program = null; let cube = null; let gpuModel; let number_opaque_cubes = 10; let opaque_cubes = new Array(number_opaque_cubes); let number_transparent_cubes = 10; let transparent_cubes = new Array(number_transparent_cubes); let matrix = new GlMatrix4x4(); let transform = matrix.create(); let camera_model_transform = matrix.create(); let projection = matrix.createPerspective(45.0, 1.0, 0.1, 100.0); let camera = matrix.create(); let scale_matrix = matrix.create(); let translate_matrix = matrix.create(); let rotate_x_matrix = matrix.create(); let rotate_y_matrix = matrix.create(); let to_camera_space = matrix.create(); let cube_rotate_x = matrix.create(); let cube_rotate_y = matrix.create(); // Public variables that will possibly be used or changed by event handlers. self.canvas = null; self.angle_x = 0.0; self.angle_y = 0.0; self.animate_active = true; // Light model let P4 = new GlPoint4(); let V = new GlVector3(); self.light_position = P4.create(10, 10, 10, 1); self.light_color = V.create(1, 1, 1); // white light self.shininess = 30; self.ambient_color = V.create(0.2, 0.2, 0.2); // low level white light // Temporary variable for calculating the distance of models from the camera. let result = P4.create(); /** --------------------------------------------------------------------- * Update the distance from each transparent cube to the camera. * NOTE: IMPORTANT! * Since rotation and scaling do not affect the center point, * these properties are not included in the transformations. If * a point other than the center point of a model is used, make * sure all necessary transformations are included. * @private */ function _calculateDistanceFromCamera () { let position; for (let j = 0; j < number_transparent_cubes; j += 1) { position = transparent_cubes[j].position; // Create the needed transformation matrices. matrix.translate(translate_matrix, position[0], position[1], position[2]); // Create a single transformation that includes all model and camera transforms. matrix.multiplySeries(camera_model_transform, to_camera_space, translate_matrix); // Transform the center point of the cube into camera space. matrix.multiplyP4(result, camera_model_transform, position); // The z component represents the distance to the camera. transparent_cubes[j].z = result[2]; // z-component } } /** --------------------------------------------------------------------- * Update the distance from each transparent cube to the camera. This * uses the center of the cube for the distance, which causes problems * if two transparent cubes overlap in 3D space. * @private */ function _sortTransparentModels () { // Update the distance of each model from the camera. _calculateDistanceFromCamera(); // Do an insertion sort on the list of cube properties. let k, temp; for (let j = 0; j < number_transparent_cubes; j += 1) { temp = transparent_cubes[j]; k = j - 1; while (k >= 0 && transparent_cubes[k].z > temp.z) { transparent_cubes[k + 1] = transparent_cubes[k]; k -= 1; } transparent_cubes[k + 1] = temp; } // Debugging //for (let j = 0; j < number_transparent_cubes; j += 1) { // console.log("cube[", j, "] = ", transparent_cubes[j].z); //} } //----------------------------------------------------------------------- function _renderOpaqueModels () { let size, position, color; // Draw a set of cubes with different locations, sizes, and colors. for (let j = 0; j < number_opaque_cubes; j += 1) { size = opaque_cubes[j].size; position = opaque_cubes[j].position; color = opaque_cubes[j].color; matrix.scale(scale_matrix, size, size, size); matrix.translate(translate_matrix, position[0], position[1], position[2]); matrix.rotate(cube_rotate_x, opaque_cubes[j].x_angle, 1.0, 0.0, 0.0); matrix.rotate(cube_rotate_y, opaque_cubes[j].y_angle, 0.0, 1.0, 0.0); // Combine the transforms into a single transformation matrix.multiplySeries(camera_model_transform, to_camera_space, translate_matrix, scale_matrix, cube_rotate_y, cube_rotate_x); matrix.multiplySeries(transform, projection, camera_model_transform); cube.render(transform, camera_model_transform, color, false); } } //----------------------------------------------------------------------- function _renderTransparentModels () { let size, position, color; // Draw a set of cubes with different locations, sizes, and colors. for (let j = 0; j < number_transparent_cubes; j += 1) { size = transparent_cubes[j].size; position = transparent_cubes[j].position; color = transparent_cubes[j].color; matrix.scale(scale_matrix, size, size, size); matrix.translate(translate_matrix, position[0], position[1], position[2]); matrix.rotate(cube_rotate_x, transparent_cubes[j].x_angle, 1.0, 0.0, 0.0); matrix.rotate(cube_rotate_y, transparent_cubes[j].y_angle, 0.0, 1.0, 0.0); // Combine the transforms into a single transformation matrix.multiplySeries(camera_model_transform, to_camera_space, translate_matrix, scale_matrix, cube_rotate_y, cube_rotate_x); matrix.multiplySeries(transform, projection, camera_model_transform); cube.render(transform, camera_model_transform, color, true); } } //----------------------------------------------------------------------- self.render = function () { // Set up common transformations for the entire scene. matrix.rotate(rotate_x_matrix, self.angle_x, 1.0, 0.0, 0.0); matrix.rotate(rotate_y_matrix, self.angle_y, 0.0, 1.0, 0.0); matrix.multiplySeries(to_camera_space, camera, rotate_x_matrix, rotate_y_matrix); // Clear the entire canvas window background with the clear color. gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Disable blending and render the opaque models. gl.disable(gl.BLEND); gl.depthMask(true); _renderOpaqueModels(); // Enable blending to render the transparent models gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); // Disable updates to the depth buffer gl.depthMask(false); // Render the transparent models back to front _sortTransparentModels(); _renderTransparentModels(); }; //----------------------------------------------------------------------- self.delete = function () { // Clean up shader programs gl.deleteShader(visible_program.vShader); gl.deleteShader(visible_program.fShader); gl.deleteProgram(visible_program); // Delete each model's VOB cube.delete(gl); events.removeAllEventHandlers(); // Disable any animation self.animate_active = false; }; /**---------------------------------------------------------------------- * Create random positions, colors, rotations, and sizes for a group of cubes. * @param number {number} the number of cube properties to create. * @param list {array} the list to put the properties in. * @param transparent {boolean} are the cubes transparent? * @private */ function _createRandomCubes(number, list, transparent = false) { let position_x, position_y, position_z, alpha; for (let j = 0; j < number; j += 1) { position_x = Math.random() * 10 - 5.0; position_y = Math.random() * 10 - 5.0; position_z = Math.random() * 10 - 5.0; if (transparent) { alpha = Math.random(); } else { alpha = 1.0; } list[j] = { position: P4.create(position_x, position_y, position_z, 1.0), size: Math.random() + 0.2, color: new Float32Array([0.0, Math.random(), Math.random(), alpha]), x_angle: Math.random() * 180.0 - 90.0, y_angle: Math.random() * 360.0, z: 0.0 }; } } //----------------------------------------------------------------------- // Object constructor. One-time initialization of the scene. // Get the rendering context for the canvas self.canvas = download.getCanvas(id + "_canvas"); if (self.canvas) { gl = download.getWebglContext(self.canvas); } if (!gl) { return; } self.animate_active = $('#' + id + '_animate').prop('checked'); // Set up the rendering programs visible_program = download.createProgram(gl, vshaders_dictionary["uniform_color_with_lighting"], fshaders_dictionary["uniform_color_with_lighting"]); gl.enable(gl.DEPTH_TEST); gl.clearColor(0.98, 0.98, 0.98, 1.0); matrix.lookAt(camera, 0.0, 0.0, 20.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); // Create Vertex Object Buffers for the models gpuModel = new ModelArraysGPU(gl, models["cube2"], out); cube = new RenderUniformTransparency(gl, visible_program, gpuModel, download.out); // Create a set of random positions, colors, and sizes for a group of cubes. _createRandomCubes(number_opaque_cubes, opaque_cubes, false); _createRandomCubes(number_transparent_cubes, transparent_cubes, true); // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // The light source is static, so set it once. gl.useProgram(visible_program); gl.uniform3f(visible_program.u_Light_position, self.light_position[0], self.light_position[1], self.light_position[2]); gl.uniform3fv(visible_program.u_Light_color, self.light_color); gl.uniform3fv(visible_program.u_Ambient_color, self.ambient_color); gl.uniform1f(visible_program.u_Shininess, self.shininess); // Set up callbacks for user and timer events let events; events = new Transparency1Events(id, self); if (self.animate_active) events.animate(); };

/** * render_uniform_color_lighting.js, By Wayne Brown, Spring 2018 */ /** * The MIT License (MIT) * * Copyright (c) 2015 C. Wayne Brown * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in all * copies or substantial portions of the Software. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ "use strict"; /**------------------------------------------------------------------------ * A class to render models using an ambient, diffuse, and specular lighting model. * @param gl {WebGLRenderingContext} WebGL context * @param program {WebGLProgram} a shader program * @param model_buffers {ModelArraysGPU} GPU object buffers that hold the model data * @param out {ConsoleMessages} display messages to the web page * @constructor */ window.RenderTransparency = function (gl, program, model_buffers, out) { let self = this; // To delete this rendering context, call the model_buffers delete function. self.delete = model_buffers.delete; //----------------------------------------------------------------------- // One-time pre-processing tasks: // IMPORTANT: Assumes these shader programs: // lighting.vert // lighting.frag // Set the specular shininess exponent self.shininess = 30.0; // default value if (model_buffers && model_buffers.triangles && model_buffers.triangles.material) { self.shininess = model_buffers.triangles.material.Ns; // specular exponent } // Get the location of the shader program's uniforms and attributes program.u_To_clipping_space = gl.getUniformLocation(program, "u_To_clipping_space"); program.u_To_camera_space = gl.getUniformLocation(program, "u_To_camera_space"); program.u_Light_position = gl.getUniformLocation(program, "u_Light_position"); program.u_Light_color = gl.getUniformLocation(program, "u_Light_color"); program.u_Shininess = gl.getUniformLocation(program, "u_Shininess"); program.u_Ambient_intensities = gl.getUniformLocation(program, "u_Ambient_intensities"); program.a_Vertex = gl.getAttribLocation(program, 'a_Vertex'); program.a_Normal = gl.getAttribLocation(program, 'a_Normal'); program.a_Color = gl.getAttribLocation(program, 'a_Color'); // For sorting the vertices of a triangle let matrix = new GlMatrix4x4(); let P4 = new GlPoint4(); let v = P4.create(0.0, 0.0, 0.0, 1.0); let v2 = P4.create(); let sort_indexes = null; let reordered_vertices = null; let reordered_normals = null; let reordered_colors = null; /**---------------------------------------------------------------------- * Compare two elements of the sort_indexes for a quicksort algorithm * @param a {array} one element of the sort_indexes array, [index, distance] * @param b {array} one element of the sort_indexes array, [index, distance] * @returns {number} result of comparision of a and b * @private */ function _compare(a, b) { if (a[1] < b[1]) { return -1; } else if (a[1] > b[1]) { return 1; } return 0; // a must be equal to b } /**---------------------------------------------------------------------- * Perform a Quicksort on the sort_indexes. * @private */ function _quicksort(sort_indexes) { sort_indexes.sort(_compare); } /**---------------------------------------------------------------------- * Initialize the sort_indexes array for sorting the model's triangles. * This array is re-sorted before each render of a transparent model. * @param number_triangles {number} * @private */ function _initializeSorting(number_triangles) { sort_indexes = new Array(number_triangles); for (let j = 0; j < number_triangles; j += 1) { sort_indexes[j] = [j, 0.0]; // [index to triangle, distance from camera] } reordered_vertices = new Float32Array(number_triangles * 3 * 3); reordered_normals = new Float32Array(number_triangles * 3 * 3); reordered_colors = new Float32Array(number_triangles * 3 * 4); } /**---------------------------------------------------------------------- * Update the distance of each triangle from the camera. * @param number_triangles {number} * @param camera_space {Float32Array} The transformation to apply to the model vertices. */ function _updateDistanceFromCamera (number_triangles, camera_space) { let k, which_triangle, max_z, vertices; vertices = model_buffers.raw_data.triangles.vertices; for (let j = 0; j < number_triangles; j += 1) { which_triangle = sort_indexes[j][0]; k = which_triangle * 3 * 3; max_z = 10e10; for (let n = 0; n < 3; n += 1, k += 3) { v[0] = vertices[k]; v[1] = vertices[k + 1]; v[2] = vertices[k + 2]; matrix.multiplyP4(v2, camera_space, v); if (v2[2] < max_z) { max_z = v2[2]; } } // Remember this triangle's distance from the camera sort_indexes[j][1] = max_z; } } /**---------------------------------------------------------------------- * Sort the triangles of a model, back to front, based on their distance * from the camera. * @param number_triangles {number} */ function _indexedInsertionSort (number_triangles) { let k, temp; for (let j = 0; j < number_triangles; j += 1) { temp = sort_indexes[j]; k = j - 1; while (k >= 0 && sort_indexes[k][1] > temp[1]) { sort_indexes[k + 1] = sort_indexes[k]; k -= 1; } sort_indexes[k + 1] = temp; } } /**---------------------------------------------------------------------- * Update the GPU object buffer that holds the model's vertices * @param number_triangles {number} * @private */ function _reorderVerticesInBufferObjects (number_triangles) { let m, k; // Reorder the vertices based on the sort_indexes. let vertices = model_buffers.raw_data.triangles.vertices; let normals = model_buffers.raw_data.triangles.smooth_normals; let colors = model_buffers.raw_data.triangles.colors; m = 0; for (let j = 0; j < number_triangles; j += 1) { k = sort_indexes[j][0] * 3 * 3; for (let n = 0; n < 9; n += 1) { reordered_vertices[m] = vertices[k + n]; reordered_normals[m] = normals[k + n]; m++; } } m = 0; for (let j = 0; j < number_triangles; j += 1) { k = sort_indexes[j][0] * 3 * 4; for (let n = 0; n < 12; n += 1) { reordered_colors[m++] = colors[k + n]; } } // Save the new vertices into its associated GPU buffer object gl.bindBuffer(gl.ARRAY_BUFFER, model_buffers.triangles.vertices.id); gl.bufferData(gl.ARRAY_BUFFER, reordered_vertices, gl.DYNAMIC_DRAW); // Save the new normal vectors into its associated GPU buffer object gl.bindBuffer(gl.ARRAY_BUFFER, model_buffers.triangles.smooth_normals.id); gl.bufferData(gl.ARRAY_BUFFER, reordered_normals, gl.DYNAMIC_DRAW); // Save the new colors into its associated GPU buffer object gl.bindBuffer(gl.ARRAY_BUFFER, model_buffers.triangles.colors.id); gl.bufferData(gl.ARRAY_BUFFER, reordered_colors, gl.DYNAMIC_DRAW); } /**---------------------------------------------------------------------- * Sort the triangles of a model, back to front, based on their distance * from the camera. * @param number_triangles {number} * @param camera_space {Float32Array} The transformation to apply to the model vertices. */ function _sortTriangles (number_triangles, camera_space) { let first_sort = false; if (sort_indexes == null) { _initializeSorting(number_triangles); first_sort = true; } _updateDistanceFromCamera(number_triangles, camera_space); if (first_sort) { _quicksort(sort_indexes); } else { _indexedInsertionSort(number_triangles); } _reorderVerticesInBufferObjects(number_triangles); } /**---------------------------------------------------------------------- * Render the individual points in the model. * @private */ function _renderPoints() { if (model_buffers.points !== null && model_buffers.points.number > 0) { let vertices = model_buffers.points.vertices; let colors = model_buffers.points.colors; // Activate the model's vertex object buffer (VOB) gl.bindBuffer(gl.ARRAY_BUFFER, vertices.id); // Bind the vertices VOB to the 'a_Vertex' shader variable gl.vertexAttribPointer(program.a_Vertex, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(program.a_Vertex); // Draw all of the lines gl.drawArrays(gl.POINTS, 0, vertices.number_values / 3); } } /**---------------------------------------------------------------------- * Render the individual lines in the model. * @private */ function _renderLines() { if (model_buffers.lines !== null && model_buffers.lines.number > 0) { let vertices = model_buffers.lines.vertices; let colors = model_buffers.lines.colors; // Activate the model's line vertex object buffer (VOB) gl.bindBuffer(gl.ARRAY_BUFFER, vertices.id); // Bind the vertices VOB to the 'a_Vertex' shader variable gl.vertexAttribPointer(program.a_Vertex, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(program.a_Vertex); // Draw all of the lines gl.drawArrays(gl.LINES, 0, vertices.number_values / 3); } } /**---------------------------------------------------------------------- * Render the triangles in the model. * @private */ function _renderTriangles() { let vertices = model_buffers.triangles.vertices; let normals = model_buffers.triangles.smooth_normals; let colors = model_buffers.triangles.colors; // Activate the model's triangle vertex object buffer (VOB) gl.bindBuffer(gl.ARRAY_BUFFER, vertices.id); // Bind the vertices VOB to the 'a_Vertex' shader variable gl.vertexAttribPointer(program.a_Vertex, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(program.a_Vertex); // Activate the model's color object buffer (VOB) gl.bindBuffer(gl.ARRAY_BUFFER, colors.id); gl.vertexAttribPointer(program.a_Color, 4, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(program.a_Color); // Activate the model's normal vector object buffer (VOB) gl.bindBuffer(gl.ARRAY_BUFFER, normals.id); gl.vertexAttribPointer(program.a_Normal, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(program.a_Normal); // Draw all of the triangles gl.drawArrays(gl.TRIANGLES, 0, vertices.number_values / 3); } /**---------------------------------------------------------------------- * Render the model under the specified transformation. * @param clipping_space {Float32Array} - A 4x4 transformation matrix. * @param camera_space {Float32Array} - A 4x4 transformation matrix. */ self.render = function (clipping_space, camera_space) { gl.useProgram(program); gl.uniformMatrix4fv(program.u_To_clipping_space, false, clipping_space); gl.uniformMatrix4fv(program.u_To_camera_space, false, camera_space); gl.uniform1f(program.u_Shininess, self.shininess); _renderPoints(); _renderLines(); if (model_buffers.triangles !== null && model_buffers.triangles.number > 0) { _sortTriangles(model_buffers.triangles.number, camera_space); _renderTriangles(); } }; };

../_static/12_transparency1/transparency1.html

Experiment with transparent surfaces.

Please use a browser that supports "canvas"
Animate

Show: Process information    Warnings    Errors

Open this webgl program in a new tab or window

Experiments on the transparency1_scene.js code:

• Restart the program to get different combinations of random cubes.
• In lines 53 and 56 set the number of opaque cubes and the number of transparent cubes. Try several different number combinations. If a large number of transparent cubes are rendered, some of them will probably overlap. In such cases the rendering will change as the sorted order of the models change. Rotate the scene slowly and watch for the “flipping” of one transparent model in front of another one.
• In line 220, comment out the call to _sortTransparentModels(). Notice that the transparent models still look transparent, but their physical location in 3D space becomes confusing. (After you are finished experimenting, remove the comments you added.)
• In line 213, comment out gl.enable(gl.BLEND);. Notice that all transparency is now gone. Without color “blending” there is no transparency. (Enable blending before continuing.)

Experiments on the render_transparency.js code:

• In line 304, comment out the call to _sortTriangles(). Notice the incorrect rendering of some of the cubes, such as the examples to the right. The triangles are being rendered in the order they are defined in the buffer object. This causes some of the triangles that are closest to the camera to be rendered before surfaces that are further away. This causes the wrong colors to be blended together.
• In line 131, change the “greater than” sign in sort_indexes[k][1] > temp[1] to a “less than” sign, as in sort_indexes[k][1] < temp[1]. This sorts the vertices in the opposite direction and the triangles closest to the camera are rendered first. Notice that the resulting rendering is not accurate.

Transparency in Overlapping Models¶

The algorithm presented above works well for transparent models that do not intersect in 3D space. If models do intersect, it will typically not render the models correctly. There are two extra requirements to correctly render intersecting models:

• The models must have high resolution triangular meshes with as much detail as possible in the areas where the model’s intersect.
• The triangular meshes of the intersecting models must be combined into a single mesh to allow the triangles to be rendered in a back-to-front order.

If transparent models are moving independently between frames, the models must be re-combined and re-sorted on each rendering which typically prevents real-time rendering.

Models with high resolution polygonal meshes are problematic to sort efficiently, especially for the initial sorting which does not have an “almost sorted” list as its starting point. For random data, a selection sort has O(n²) time complexity which can cause a web page to “hang” for several minutes (or longer) when rendering high resolution models. The following example code solves the problem by performing a Quicksort for the initial sorting and then uses an insertion sort for all future sorts. (JavaScript’s builtin sorting algorithm is a Quicksort.)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

/**----------------------------------------------------------------------
 * Compare two elements of the sort_indexes for a quicksort algorithm
 * @param a {array} one element of the sort_indexes array, [index, distance]
 * @param b {array} one element of the sort_indexes array, [index, distance]
 * @returns {number} result of comparision of a and b
 * @private
 */
function _compare(a, b) {
  if (a[1] < b[1]) {
    return -1;
  } else if (a[1] > b[1]) {
    return 1;
  }
  return 0; // a must be equal to b
}

/**----------------------------------------------------------------------
 * Perform a Quicksort on the sort_indexes.
 * @private
 */
function _quicksort(sort_indexes) {
  sort_indexes.sort(_compare);
}

/**----------------------------------------------------------------------
 * Sort the triangles of a model, back to front, based on their distance
 * from the camera.
 * @param number_triangles {number}
 * @param camera_space {Float32Array} The vertices transformation matrix.
 */
function _sortTriangles (number_triangles, camera_space) {
  let first_sort = false;

  if (sort_indexes == null) {
    _initializeSorting(number_triangles);
    first_sort = true;
  }

  _updateDistanceFromCamera(number_triangles, camera_space);

  if (first_sort) {
    _quicksort(sort_indexes);
  } else {
    _indexedInsertionSort(number_triangles);
  }

  _reorderVerticesInBufferObjects(number_triangles);
}

Summary¶

Rendering transparent surfaces can be achieved using a combination of sorting and alpha blending. However, if transparent surfaces intersect in 3D space they must be defined by high resolution triangular meshes and the models must be combined into a single model to render the surfaces accurately.

Glossary¶

transparency

A percentage of the light that strikes a surface passes through the surface and reflects off other surfaces.

opaque

All light that strikes a surface is reflected. Opaque means no transparency.

insertion sort algorithm

The fastest, general purpose algorithm for sorting data that is already close to being sorted.

index sort

A collection of data values is sorted without moving the data in memory. The sort order is described as an array of indexes into the array that holds the data.

source color (src)

A color value to be rendered for a surface.

destination color (dst)

A color value stored in the color buffer of the draw buffer.

alpha blending

The color of a pixel is calculated as a combination of two colors: the the destination color and the source color.

Self Assessment¶