In essence, I want to replicate the behaviour of how the CSS, background-size: cover works.
Looking here you can see the image is being scaled keeping its aspect ratio, but it's not really working correctly, as the image does not fill the Plane, leaving margins either side - https://next.plnkr.co/edit/8650f9Ji6qWffTqE?preview
Code snippet (Lines 170 - 175) -
var geometryAspectRatio = 5/3;
var imageAspectRatio = 3264/2448;
textTile.wrapT = THREE.RepeatWrapping;
textTile.repeat.x = geometryAspectRatio / imageAspectRatio;
textTile.offset.x = 0.5 * ( 1 - textTile.repeat.x );
What I want to happen is for it so scale-up and then reposition its self in the centre (much how cover works).
var repeatX, repeatY;
repeatX = w * this.textureHeight / (h * this.textureWidth);
if (repeatX > 1) {
//fill the width and adjust the height accordingly
repeatX = 1;
repeatY = h * this.textureWidth / (w * this.textureHeight);
mat.map.repeat.set(repeatX, repeatY);
mat.map.offset.y = (repeatY - 1) / 2 * -1;
} else {
//fill the height and adjust the width accordingly
repeatX = w * this.textureHeight / (h * this.textureWidth);
repeatY = 1;
mat.map.repeat.set(repeatX, repeatY);
mat.map.offset.x = (repeatX - 1) / 2 * -1;
}
Updated https://next.plnkr.co/edit/LUk37xLG2yvv6hgg?preview
For anyone confused by this as I was, the missing piece for me is that .repeat.x and .repeat.y properties of any texture can be values less than one, and scales up the image when is under 1 as the inverse of the scale. Think about it, when it's scale 2, in a way it repeats .5 times because you only see half of the image.
So...
Something not supported by textures in THREE.js and common in some libraries, would be
.scaleX = 2; (not supported in THREE.js textures as of v1.30.1)
And the THREE.js texture equivalent would be
texture.repeat.x = .5;
To convert scale to "repeat", simply do the inverse of the scale
var desiredScaleX = 3;
var desiredRepeatX = 1 / desiredScaleX;
The repeat for scale 3 comes out to (1/3) = .3333; In other words a 3x image would be cropped and only show 1/3 of the image, so it repeats .3333 times.
As for scaling to fit to cover, generally choosing the larger scale of the two will do the trick, something like:
var fitScaleX = targetWidth / actualWidth;
var fitScaleY = targetHeight / actualHeight;
var fitCoverScale = Math.max(fitScaleX,fitScaleY);
var repeatX = 1 / fitCoverScale;
var repeatY = 1 / fitCoverScale;
Related
GPU.js converts a JS func into a shader. The following function knows this.thread.x as the current index being operated on, but it is ultimately working as a WebGL shader.
export default function(sprite, w, h, scale) {
var bufferWidth = w * 4;
var channel = this.thread.x % 4;
var thread = this.thread.x - channel;
var y = Math.round(this.thread.x / bufferWidth);
var x = (thread % bufferWidth) / 4;
var upscale = scale * 10;
var upscaleY = y * 10;
var upscaleX = x * 10;
var scaledY = Math.round(upscaleY / upscale);
var scaledX = Math.round(upscaleX / upscale);
var newIndex = scaledY * bufferWidth + scaledX * 4;
if (x <= w * scale && y <= h * scale) {
return sprite[newIndex + channel];
} else {
return 0;
}
}
This almost works, but rows become skipped completely, actually making the result shorter than it should, and lines where those missing rows travel up and down and left to right on the image as it's scaled over time.
You can see this effect here: https://enviziion.github.io/lost-worlds/
What's wrong with my algo? Ive tried tweaking rounding and all sorts of stuff but no luck.
Use Math.floor when computing y:
var y = Math.floor(thread / bufferWidth);
If you use Math.round then it will start rounding up to the next row halfway across the buffer, which will produce a weird discontinuity.
Mathematically, you should be able to get back thread.x from y * bufferWidth + x * 4, which works for floor but not round.
I'm loading a .png file and displaying it as a texture on a rectangular surface. The aspect ratio of the .png and the aspect ratio of the surface are not the same. I need the texture to fit the object
without repeating
without distorting, i.e. maintaining its aspect ratio
positioned at the center
The height of the texture should be scaled up or down to the height of the object.
(For those familiar to CSS, I'm trying to achieve the equivalent of background-size: auto 100%; background-repeat: no-repeat; background-position: center;.)
So far I am doing
tex1.wrapS = THREE.ClampToEdgeWrapping
tex1.wrapT = THREE.ClampToEdgeWrapping
repeatX = (clothWidth * textureSetting.h / (clothHeight * textureSetting.w))
repeatY = 1
tex1.repeat.set repeatX, repeatY
clothHeight and clothWidth are the dimensions of the object, textureSetting.w and textureSetting.h are the dimensions of the texture.
The texture is distorted and offset to the right.
I got it to work just as #WestLangley suggested. Here's the solution in CoffeeScript:
tex1.wrapS = THREE.ClampToEdgeWrapping
tex1.wrapT = THREE.RepeatWrapping
repeatX = (clothWidth * textureSetting.h / (clothHeight * textureSetting.w))
repeatY = 1
tex1.repeat.set repeatX, repeatY
tex1.offset.x = (repeatX - 1) / 2 * -1
And for anyone who prefers vanilla JavaScript, here is the JS Version:
var repeatX, repeatY;
tex1.wrapS = THREE.ClampToEdgeWrapping;
tex1.wrapT = THREE.RepeatWrapping;
repeatX = clothWidth * textureSetting.h / (clothHeight * textureSetting.w);
repeatY = 1;
tex1.repeat.set(repeatX, repeatY);
tex1.offset.x = (repeatX - 1) / 2 * -1;
after years ! I change the code of #bootsmaat
It takes care if image is landscape or portrait.
const texture = new THREE.TextureLoader().load(images[index].url, texture => {
var repeatX, repeatY;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
if (texture.source.data.height < texture.source.data.width) {
repeatX = squareWidth * texture.source.data.height / (squareWidth * texture.source.data.width);
repeatY = 1;
texture.repeat.set(repeatX, repeatY);
texture.offset.x = (repeatX - 1) / 2 * -1;
} else {
repeatX = 1;
repeatY = squareWidth * texture.source.data.width / (squareWidth * texture.source.data.height);
texture.repeat.set(repeatX, repeatY);
texture.offset.y = (repeatY - 1) / 2 * -1;
}});
I found a way to increase the gamma, but no way to decrease it! This article states a formula for increasing the gamma. The formula works for increasing the gamma but not for decreasing, even if I apply the reduction on a new instance of the canvas. I tried redrawing the canvas and using a negative value for gamma calculation, but I don't get my original canvas back.
//For increasing, I tried
gamma = 0.5;
gammacorrection = 1/gamma;
r = Math.pow(255 * (r / 255), gammacorrection);
g = ...
b = ...
//For decreasing
gamma = -0.5;
gammacorrection = 1/gamma;
r = Math.pow(255 * (r / 255), gammacorrection);
g = ...
b = ...
First part works. Second doesn't.
For sake of completeness here's a working piece of code
async function adjustGamma(gamma) {
const gammaCorrection = 1 / gamma;
const canvas = document.getElementById('canvasOutput');
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0.0, 0.0, canvas.width, canvas.height);
const data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i] = 255 * Math.pow((data[i] / 255), gammaCorrection);
data[i+1] = 255 * Math.pow((data[i+1] / 255), gammaCorrection);
data[i+2] = 255 * Math.pow((data[i+2] / 255), gammaCorrection);
}
ctx.putImageData(imageData, 0, 0);
}
Here the function adjusts the gamma based on the formula in the Article linked by OP on the Canvas with id "canvasOutput"
There is no negative gamma correction. You should save the original values and use them when making gamma changes, and set gamma to 1.0 to revert back to the original.
Also note that you have the wrong order of operations (exponents come before multiplication).
var originals = { r: r, g: g, b: b };
// increase
gamma = 0.5;
gammacorrection = 1/gamma;
r = 255 * Math.pow(( originals.r / 255), gammacorrection);
g = ...
b = ...
// revert to original
gamma = 1;
gammacorrection = 1/gamma;
r = 255 * Math.pow(( originals.r / 255), gammacorrection);
g = ...
b = ...
There is no negative value for gamma. Ideally this value will range between 0.01 and 7.99. So reverting back the gamma to the original value should be possible either by creating a new canvas instance with the original values of the image, then instantiating it, or either by creating a pool of pixels with the original image and reverting back to it.
I wrote a script how would i construct the algorithm for gamma reduction.
var gamma = 0.5;
var gammaCorrection = 1 / gamma;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var imageData = ctx.getImageData(0.0, canvas.width, canvas.height);
function GetPixelColor(x, y) {
var index = parseInt(x + canvas.width * y) * 4;
var rgb = {
r : imageData.data[index + 0],
g : imageData.data[index + 1],
b : imageData.data[index + 2]
};
return rgb;
}
function SetPixelColor(x, y, color) {
var index = parseInt(x + this.width * y) * 4;
var data = imageData.data;
data[index+0] = color.r;
data[index+1] = color.g;
data[index+2] = color.b;
};
for (y = 0; y < canvas.height; y++) {
for (x = 0; x < canvas.width; x++) {
var color = GetPixelColor(x, y)
var newRed = Math.pow(255 * (color.r / 255), gammaCorrection);
var newGreen = Math.pow(255 * (color.g / 255), gammaCorrection);
var newBlue = Math.pow(255 * (color.b / 255), gammaCorrection);
var color = {
r: newRed,
g: newGreen,
b: newBlue
}
SetPixelColor(x, y, color);
}
}
I don't know how the application should adjust the gamma value, but i suppose it's done with a value adjuster. If so you should adjust the gamma value dynamically giving the min and max range. I didn't tested the code, this wasn't my scope, but the idea is hopefully clear.
EDIT:
To understand the principle of gamma correction first how about to define the gamma instead.
Gamma is the monitor particularity altering the pixels input. Gamma correction is the act of inverting that process for linear RGB values so that the final output remains linear. For example, if you calculated the light intensity of an object is 0.5, you don't store the result as 0.5 in the pixel. Store it as pow(0.5, 1.0/2.2) = 0.73. When you send 0.73 to the monitor, it will apply a gamma on the value and produce pow(0.73, 2.2) = 0.5, which is what you want. To do this, you apply the inverse gamma function.
o=pow(i, 1.0/gamma)
Where
o is the output value.
i is the input value.
gamma is the gamma value used by your monitor.
So the gamma correction is nothing else than the rise of input value to the power of inverse of gamma. So to restore the gamma to the original value you apply the formula before the gamma correction has been applied.
The blue line represents the inverse gamma curve you need to apply to your pixels before they're sent to the monitor. When your monitor applies its gamma curve (red line) to the pixels, the result is a linear line (green line) that represents your intended RGB pixel values.
I tried to find out, but I couldn't.
A image, for example, 241x76 has a total of 18,316 pixels (241 * 76).
The resize rule is, the amount of pixels cannot pass 10,000.
Then, how can I get the new size keeping the aspect ratio and getting less than 10,000 pixels?
Pseudocode:
pixels = width * height
if (pixels > 10000) then
ratio = width / height
scale = sqrt(pixels / 10000)
height2 = floor(height / scale)
width2 = floor(ratio * height / scale)
ASSERT width2 * height2 <= 10000
end if
Remember to use floating-point math for all calculations involving ratio and scale when implementing.
Python
import math
def capDimensions(width, height, maxPixels=10000):
pixels = width * height
if (pixels <= maxPixels):
return (width, height)
ratio = float(width) / height
scale = math.sqrt(float(pixels) / maxPixels)
height2 = int(float(height) / scale)
width2 = int(ratio * height / scale)
return (width2, height2)
An alternative function in C# which takes and returns an Image object:
using System.Drawing.Drawing2D;
public Image resizeMaxPixels(int maxPixelCount, Image originalImg)
{
Double pixelCount = originalImg.Width * originalImg.Height;
if (pixelCount < maxPixelCount) //no downsize needed
{
return originalImg;
}
else
{
//EDIT: not actually needed - scaleRatio takes care of this
//Double aspectRatio = originalImg.Width / originalImg.Height;
//scale varies as the square root of the ratio (width x height):
Double scaleRatio = Math.Sqrt(maxPixelCount / pixelCount);
Int32 newWidth = (Int32)(originalImg.Width * scaleRatio);
Int32 newHeight = (Int32)(originalImg.Height * scaleRatio);
Bitmap newImg = new Bitmap(newWidth, newHeight);
//this keeps the quality as good as possible when resizing
using (Graphics gr = Graphics.FromImage(newImg))
{
gr.SmoothingMode = SmoothingMode.AntiAlias;
gr.InterpolationMode = InterpolationMode.HighQualityBicubic;
gr.PixelOffsetMode = PixelOffsetMode.HighQuality;
gr.DrawImage(originalImg, new Rectangle(0, 0, newWidth, newHeight));
}
return newImg;
}
}
with graphics code from the answer to Resizing an Image without losing any quality
EDIT: Calculating the aspect ratio is actually irrelevant here as we're already scaling the width and height by the (square root) of the total pixel ratio. You could use it to calculate the newWidth based on the newHeight (or vice versa) but this isn't necessary.
Deestan's code works for square images, but in situations where the aspect ratio is different than 1, a square root won't do. You need to take scale to the power of aspect ratio divided by 2.
Observe (Python):
def capDimensions(width, height, maxPixels):
pixels = width * height
if (pixels <= maxPixels):
return (width, height)
ratio = float(width) / height
scale = (float(pixels) / maxPixels)**(width/(height*2))
height2 = round(float(height) / scale)
width2 = round(ratio * height2)
return (width2, height2)
Let's compare the results.
initial dimensions: 450x600
initial pixels: 270000
I'm trying to resize to get as close as possible to 119850 pixels.
with Deestan's algorithm:
capDimensions: 300x400
resized pixels: 67500
with the modified algorithm:
capDimensions. 332x442
resized pixels: 82668
width2 = int(ratio * height / scale)
would better be
width2 = int(ratio * height2)
because this would potentially preserve the aspect ratio better (as height2 has been truncated).
Without introducing another variable like 'sc', one can write
new_height = floor(sqrt(m / r))
and
new_width = floor(sqrt(m * r))
given m=max_pixels (here: 10.000), r=ratio=w/h (here: 241/76 = 3.171)
Both results are independent of each other! From each new_value, you can calculate the other dimension, with
(given: new_height) new_width = floor(new_height * r)
(given: new_width) new_height = floor(new_width / r)
Because of clipping the values (floor-function), both pairs of dimensions may differ in how close their ratio is to the original ratio; you'd choose the better pair.
Scaling images down to max number of pixels, while maintaining aspect ratio
This is what I came up with this afternoon, while trying to solve the math problem on my own, for fun. My code seems to work fine, I tested with a few different shapes and sizes of images. Make sure to use floating point variables or the math will break.
Pseudocode
orig_width=1920
orig_height=1080
orig_pixels=(orig_width * orig_height)
max_pixels=180000
if (orig_pixels <= max_pixels) {
# use original image
}
else {
# scale image down
ratio=sqrt(orig_pixels / max_pixels)
new_width=floor(orig_width / ratio)
new_height=floor(orig_height / ratio)
}
Example results
1920x1080 (1.77778 ratio) becomes 565x318 (1.77673 ratio, 179,670 pixels)
1000x1000 (1.00000 ratio) becomes 424x424 (1.00000 ratio, 179,776 pixels)
200x1200 (0.16667 ratio) becomes 173x1039 (0.16651 ratio, 179,747 pixels)
I need help with math / algorithm to take an image of known size and fit to one of two screen dimensions:
720 x 480 or 1280 x 1024.
The image dimensions are coming from an XML file, however those dimensions are the web dimensions, I also get a selection of images from the XML that may be of higher and lower resolution than the web dimensions.
What I want is to use the aspect ration of the web dimensions to display the higher resolution image, if available, on an HD (1280x720) screen, or, if the user is on an SD screen (720x480) display the image on that screen.
Other things that would be useful for this, but lower priority, would be, if I know the resolution of the image is smaller in both dimensions than an SD screen (in this case, all I know is the web dimension, and the horizontal dimension of the image file), to display it as actual size on that screen.
Generic as can be:
Image data: (wi, hi) and define ri = wi / hi
Screen resolution: (ws, hs) and define rs = ws / hs
Scaled image dimensions:
rs > ri ? (wi * hs/hi, hs) : (ws, hi * ws/wi)
So for example:
20
|------------------|
10
|---------|
-------------------- --- ---
| | | | 7 |
| | | | | 10
|---------- | --- |
| | |
-------------------- ---
ws = 20
hs = 10
wi = 10
hi = 7
20/10 > 10/7 ==> (wi * hs/hi, hs) = (10 * 10/7, 10) = (100/7, 10) ~ (14.3, 10)
Which as you can see clearly scales to the screen size, because the height is that of the screen but clearly keeps aspect ratio since 14.3/10 ~ 10/7
UPDATE
Center the image as follows:
call (wnew, hnew) the new dimensions.
top = (hs - hnew)/2
left = (ws - wnew)/2
I understand the accepted answer and it works, but I've always found the following method to be simpler and succinct for "best fit":
// prep
let maxWidth = 190,
maxHeight = 150;
let imgWidth = img.width,
imgHeight = img.height;
// calc
let widthRatio = maxWidth / imgWidth,
heightRatio = maxHeight / imgHeight;
let bestRatio = Math.min(widthRatio, heightRatio);
// output
let newWidth = imgWidth * bestRatio,
newHeight = imgHeight * bestRatio;
... which of course can be distilled down to:
const maxWidth = 190, maxHeight = 150;
const bestRatio = Math.min(maxWidth / img.width, maxHeight / img.height);
img.width *= bestRatio;
img.height *= bestRatio;
Here it is in straightforward C.
You want to scale both coordinates by the returned scale factor.
/* For a rectangle inside a screen, get the scale factor that permits the rectangle
to be scaled without stretching or squashing. */
float
aspect_correct_scale_for_rect(const float screen[2], const float rect[2])
{
float screenAspect = screen[0] / screen[1];
float rectAspect = rect[0] / rect[1];
float scaleFactor;
if (screenAspect > rectAspect)
scaleFactor = screen[1] / rect[1];
else
scaleFactor = screen[0] / rect[0];
return scaleFactor;
}
Aspect ratio correction with letterboxing or fit-to-screen
I wrote up a method recently to handle this exact problem in iOS. I'm using the Eigen matrix library to do scaling, but the the principle (scaling factor) is the same without matrices.
Eigen::Matrix4x4f aspectRatioCorrection(bool fillScreen, const Eigen::Vector2f &screenSize, const Eigen::Vector2f &imageSize)
{
Eigen::Matrix4x4f scalingMatrix(Eigen::Matrix4x4f::Identity());
float screenWidth = screenSize.x();
float screenHeight = screenSize.y();
float screenAspectRatio = screenWidth / screenHeight;
float imageWidth = imageSize.x();
float imageHeight = imageSize.y();
float imageAspectRatio = imageWidth / imageHeight;
float scalingFactor;
if (fillScreen) {
if (screenAspectRatio > imageAspectRatio) {
scalingFactor = screenWidth / imageWidth;
} else {
scalingFactor = screenHeight / imageHeight;
}
} else {
if (screenAspectRatio > imageAspectRatio) {
scalingFactor = screenHeight / imageHeight;
} else {
scalingFactor = screenWidth / imageWidth;
}
}
scalingMatrix(0, 0) = scalingFactor;
scalingMatrix(1, 1) = scalingFactor;
return scalingMatrix;
}