diff --git a/doc/json-config-parameters.md b/doc/json-config-parameters.md index e3de97e..a6544bd 100644 --- a/doc/json-config-parameters.md +++ b/doc/json-config-parameters.md @@ -377,7 +377,8 @@ Specifies an array containing RGB values [0, 1] that sets the background color for areas where no image data is available. Defaults to `[0, 0, 0]` (black). For partial `equirectangular` panoramas this applies to areas past the edges of the defined rectangle. For `multires` and `cubemap` (including fallback) panoramas -this applies to areas corresponding to missing tiles or faces. +this applies to areas corresponding to missing tiles or faces. If set to `null`, +the background is not cleared. ### `avoidShowingBackground` (boolean) diff --git a/src/js/libpannellum.js b/src/js/libpannellum.js index 719747d..9f75f93 100644 --- a/src/js/libpannellum.js +++ b/src/js/libpannellum.js @@ -29,11 +29,15 @@ window.libpannellum = (function(window, document, undefined) { * Creates a new panorama renderer. * @constructor * @param {HTMLElement} container - The container element for the renderer. + * @param {WebGLRenderingContext} [context] - Existing WebGL context (instead of container). */ -function Renderer(container) { - var canvas = document.createElement('canvas'); - canvas.style.width = canvas.style.height = '100%'; - container.appendChild(canvas); +function Renderer(container, context) { + var canvas; + if (container) { + canvas = document.createElement('canvas'); + canvas.style.width = canvas.style.height = '100%'; + container.appendChild(canvas); + } var program, gl, vs, fs; var previewProgram, previewVs, previewFs; @@ -47,6 +51,9 @@ function Renderer(container) { var sides = ['f', 'b', 'u', 'd', 'l', 'r']; var fallbackSides = ['f', 'r', 'b', 'l', 'u', 'd']; + if (context) + gl = context; + /** * Initialize renderer. * @memberof Renderer @@ -393,9 +400,11 @@ function Renderer(container) { program.drawInProgress = false; // Set background clear color (does not apply to cubemap/fallback image) - var color = params.backgroundColor ? params.backgroundColor : [0, 0, 0]; - gl.clearColor(color[0], color[1], color[2], 1.0); - gl.clear(gl.COLOR_BUFFER_BIT); + if (params.backgroundColor !== null) { + var color = params.backgroundColor ? params.backgroundColor : [0, 0, 0]; + gl.clearColor(color[0], color[1], color[2], 1.0); + gl.clear(gl.COLOR_BUFFER_BIT); + } // Look up texture coordinates location program.texCoordLocation = gl.getAttribLocation(program, 'a_texCoord'); @@ -711,7 +720,8 @@ function Renderer(container) { } }; // Initialize canvas size - this.resize(); + if (canvas) + this.resize(); /** * Set renderer horizon pitch and roll. @@ -739,6 +749,7 @@ function Renderer(container) { * @param {Object} [params] - Extra configuration parameters. * @param {number} [params.roll] - Camera roll (in radians). * @param {string} [params.returnImage] - Return rendered image? If specified, should be 'ImageBitmap', 'image/jpeg', or 'image/png'. + * @param {function} [params.hook] - Hook for executing arbitrary function in this environment. */ this.render = function(pitch, yaw, hfov, params) { var focal, i, s, roll = 0; @@ -781,6 +792,10 @@ function Renderer(container) { roll += roll_adj; } + // Execute function hook + if (params.hook) + params.hook(this); + // If no WebGL if (!gl && (imageType == 'multires' || imageType == 'cubemap')) { // Determine face transforms