This reverts commit 08ef73866a28d3e9334cd2852a40c8905b5d6b9e, reversing
changes made to 24e55d8f0b
.
pull/880/head
@@ -303,20 +303,6 @@ WebGL renderer. | |||
Specifies the key numbers that are captured in key events. Defaults to the | |||
standard keys that are used by the viewer. | |||
### `backgroundColor` ([number, number, number]) | |||
Specifies an array containing RGB values [0, 1] that sets the background color | |||
shown past the edges of a partial panorama. Defaults to `[0, 0, 0]` (black). | |||
Does not work for `cubemap` panoramas. | |||
### `avoidShowingBackground` (boolean) | |||
If set to `true`, prevent displaying out-of-range areas of a partial panorama | |||
by constraining the yaw and the field-of-view. Even at the corners and edges | |||
of the canvas only areas actually belonging to the image | |||
(i.e., within [`minYaw`, `maxYaw`] and [`minPitch`, `maxPitch`]) are shown, | |||
thus setting the `backgroundColor` option is not needed if this option is set. | |||
Defaults to `false`. | |||
## `equirectangular` specific options | |||
@@ -350,6 +336,11 @@ and the equirectangular image is not cropped symmetrically. | |||
If set to `true`, any embedded Photo Sphere XMP data will be ignored; else, | |||
said data will override any existing settings. Defaults to `false`. | |||
### `backgroundColor` ([number, number, number]) | |||
Specifies an array containing RGB values [0, 1] that sets the background color | |||
shown past the edges of a partial panorama. Defaults to `[0, 0, 0]` (black). | |||
## `cubemap` specific options | |||
@@ -321,11 +321,6 @@ function Renderer(container) { | |||
program.drawInProgress = false; | |||
// Set background clear color | |||
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'); | |||
gl.enableVertexAttribArray(program.texCoordLocation); | |||
@@ -359,6 +354,7 @@ function Renderer(container) { | |||
// Set background color | |||
if (imageType == 'equirectangular') { | |||
program.backgroundColor = gl.getUniformLocation(program, 'u_backgroundColor'); | |||
var color = params.backgroundColor ? params.backgroundColor : [0, 0, 0]; | |||
gl.uniform4fv(program.backgroundColor, color.concat([1])); | |||
} | |||
@@ -711,9 +707,8 @@ function Renderer(container) { | |||
function multiresDraw() { | |||
if (!program.drawInProgress) { | |||
program.drawInProgress = true; | |||
gl.clear(gl.COLOR_BUFFER_BIT); | |||
for ( var i = 0; i < program.currentNodes.length; i++ ) { | |||
if (program.currentNodes[i].textureLoaded > 1) { | |||
if (program.currentNodes[i].textureLoaded) { | |||
//var color = program.currentNodes[i].color; | |||
//gl.uniform4f(program.colorUniform, color[0], color[1], color[2], 1.0); | |||
@@ -1040,12 +1035,9 @@ function Renderer(container) { | |||
this.image = new Image(); | |||
this.image.crossOrigin = crossOrigin ? crossOrigin : 'anonymous'; | |||
var loadFn = (function() { | |||
if (self.image.width > 0 && self.image.height > 0) { // ignore missing tile to supporting partial image | |||
if (self.image.width > 0 && self.image.height > 0) // ignore missing tile to supporting partial image | |||
processLoadedTexture(self.image, self.texture); | |||
self.callback(self.texture, true); | |||
} else { | |||
self.callback(self.texture, false); | |||
} | |||
self.callback(self.texture); | |||
releaseTextureImageLoader(self); | |||
}); | |||
this.image.addEventListener('load', loadFn); | |||
@@ -1094,9 +1086,9 @@ function Renderer(container) { | |||
function processNextTile(node) { | |||
if (!node.textureLoad) { | |||
node.textureLoad = true; | |||
loadTexture(encodeURI(node.path + '.' + image.extension), function(texture, loaded) { | |||
loadTexture(encodeURI(node.path + '.' + image.extension), function(texture) { | |||
node.texture = texture; | |||
node.textureLoaded = loaded ? 2 : 1; | |||
node.textureLoaded = true; | |||
}, globalParams.crossOrigin); | |||
} | |||
} | |||
@@ -102,7 +102,6 @@ var defaultConfig = { | |||
orientationOnByDefault: false, | |||
hotSpotDebug: false, | |||
backgroundColor: [0, 0, 0], | |||
avoidShowingBackground: false, | |||
animationTimingFunction: timingFunction, | |||
draggable: true, | |||
disableKeyboardCtrl: false, | |||
@@ -519,7 +518,6 @@ function onImageLoad() { | |||
} | |||
renderInit(); | |||
setHfov(config.hfov); // possibly adapt hfov after configuration and canvas is complete; prevents empty space on top or bottom by zomming out too much | |||
setTimeout(function(){isTimedOut = true;}, 500); | |||
} | |||
@@ -1440,41 +1438,23 @@ function render() { | |||
// Keep a tmp value of yaw for autoRotate comparison later | |||
tmpyaw = config.yaw; | |||
// Optionally avoid showing background (empty space) on left or right by adapting min/max yaw | |||
var hoffcut = 0, | |||
voffcut = 0; | |||
if (config.avoidShowingBackground) { | |||
var canvas = renderer.getCanvas(), | |||
hfov2 = config.hfov / 2, | |||
vfov2 = Math.atan2(Math.tan(hfov2 / 180 * Math.PI), (canvas.width / canvas.height)) * 180 / Math.PI, | |||
transposed = config.vaov > config.haov; | |||
if (transposed) { | |||
voffcut = vfov2 * (1 - Math.min(Math.cos((config.pitch - hfov2) / 180 * Math.PI), | |||
Math.cos((config.pitch + hfov2) / 180 * Math.PI))); | |||
} else { | |||
hoffcut = hfov2 * (1 - Math.min(Math.cos((config.pitch - vfov2) / 180 * Math.PI), | |||
Math.cos((config.pitch + vfov2) / 180 * Math.PI))); | |||
} | |||
} | |||
// Ensure the yaw is within min and max allowed | |||
var yawRange = config.maxYaw - config.minYaw, | |||
minYaw = -180, | |||
maxYaw = 180; | |||
if (yawRange < 360) { | |||
minYaw = config.minYaw + config.hfov / 2 + hoffcut; | |||
maxYaw = config.maxYaw - config.hfov / 2 - hoffcut; | |||
minYaw = config.minYaw + config.hfov / 2; | |||
maxYaw = config.maxYaw - config.hfov / 2; | |||
if (yawRange < config.hfov) { | |||
// Lock yaw to average of min and max yaw when both can be seen at once | |||
minYaw = maxYaw = (minYaw + maxYaw) / 2; | |||
} | |||
config.yaw = Math.max(minYaw, Math.min(maxYaw, config.yaw)); | |||
} | |||
config.yaw = Math.max(minYaw, Math.min(maxYaw, config.yaw)); | |||
// Check if we autoRotate in a limited by min and max yaw | |||
// If so reverse direction | |||
if (config.autoRotate !== false && tmpyaw != config.yaw && | |||
prevTime !== undefined) { // this condition prevents changing the direction initially | |||
if (config.autoRotate !== false && tmpyaw != config.yaw) { | |||
config.autoRotate *= -1; | |||
} | |||
@@ -2204,24 +2184,13 @@ function constrainHfov(hfov) { | |||
// Don't change view if bounds don't make sense | |||
console.log('HFOV bounds do not make sense (minHfov > maxHfov).') | |||
return config.hfov; | |||
} | |||
var newHfov = config.hfov; | |||
if (hfov < minHfov) { | |||
newHfov = minHfov; | |||
} if (hfov < minHfov) { | |||
return minHfov; | |||
} else if (hfov > config.maxHfov) { | |||
newHfov = config.maxHfov; | |||
return config.maxHfov; | |||
} else { | |||
newHfov = hfov; | |||
} | |||
// Optionally avoid showing background (empty space) on top or bottom by adapting newHfov | |||
if (config.avoidShowingBackground && renderer) { | |||
var canvas = renderer.getCanvas(); | |||
newHfov = Math.min(newHfov, | |||
Math.atan(Math.tan((config.maxPitch - config.minPitch) / 360 * Math.PI) / | |||
canvas.height * canvas.width) | |||
* 360 / Math.PI); | |||
return hfov; | |||
} | |||
return newHfov; | |||
} | |||