Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 43 additions & 25 deletions src/core/scene/a-scene.js
Original file line number Diff line number Diff line change
Expand Up @@ -804,10 +804,46 @@ module.exports.AScene = registerElement('a-scene', {
})
});

/**
* Return size constrained to maxSize - maintaining aspect ratio.
*
* @param {object} size - size parameters (width and height).
* @param {object} maxSize - Max size parameters (width and height).
* @returns {object} Width and height.
*/
function constrainSizeTo (size, maxSize) {
var aspectRatio;
var pixelRatio = window.devicePixelRatio;

if (!maxSize || (maxSize.width === -1 && maxSize.height === -1)) {
return size;
}

if (size.width * pixelRatio < maxSize.width &&
size.height * pixelRatio < maxSize.height) {
return size;
}

aspectRatio = size.width / size.height;

if ((size.width * pixelRatio) > maxSize.width && maxSize.width !== -1) {
size.width = Math.round(maxSize.width / pixelRatio);
size.height = Math.round(maxSize.width / aspectRatio / pixelRatio);
}

if ((size.height * pixelRatio) > maxSize.height && maxSize.height !== -1) {
size.height = Math.round(maxSize.height / pixelRatio);
size.width = Math.round(maxSize.height * aspectRatio / pixelRatio);
}

return size;
}

/**
* Return the canvas size where the scene will be rendered.
* Will be always the window size except when the scene is embedded.
* The parent size (less than max size) will be returned in that case.
* The parent size will be returned in that case.
* the returned size will be constrained to the maxSize maintaining aspect ratio.
*
* @param {object} canvasEl - the canvas element
* @param {boolean} embedded - Is the scene embedded?
Expand All @@ -817,10 +853,12 @@ module.exports.AScene = registerElement('a-scene', {
function getCanvasSize (canvasEl, embedded, maxSize, isVR) {
if (!canvasEl.parentElement) { return {height: 0, width: 0}; }
if (embedded) {
return {
var size;
size = {
height: canvasEl.parentElement.offsetHeight,
width: canvasEl.parentElement.offsetWidth
};
return constrainSizeTo(size, maxSize);
}
return getMaxSize(maxSize, isVR);
}
Expand All @@ -835,33 +873,13 @@ function getCanvasSize (canvasEl, embedded, maxSize, isVR) {
* @returns {object} Width and height.
*/
function getMaxSize (maxSize, isVR) {
var aspectRatio;
var size;
var pixelRatio = window.devicePixelRatio;

size = {height: document.body.offsetHeight, width: document.body.offsetWidth};
if (!maxSize || isVR || (maxSize.width === -1 && maxSize.height === -1)) {
if (isVR) {
return size;
} else {
return constrainSizeTo(size, maxSize);
}

if (size.width * pixelRatio < maxSize.width &&
size.height * pixelRatio < maxSize.height) {
return size;
}

aspectRatio = size.width / size.height;

if ((size.width * pixelRatio) > maxSize.width && maxSize.width !== -1) {
size.width = Math.round(maxSize.width / pixelRatio);
size.height = Math.round(maxSize.width / aspectRatio / pixelRatio);
}

if ((size.height * pixelRatio) > maxSize.height && maxSize.height !== -1) {
size.height = Math.round(maxSize.height / pixelRatio);
size.width = Math.round(maxSize.height * aspectRatio / pixelRatio);
}

return size;
}

function requestFullscreen (canvas) {
Expand Down