You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1006 lines
33 KiB
JavaScript
1006 lines
33 KiB
JavaScript
import { BoundingRectangle } from "../../Source/Cesium.js";
|
|
import { Cartesian2 } from "../../Source/Cesium.js";
|
|
import { createGuid } from "../../Source/Cesium.js";
|
|
import { Math as CesiumMath } from "../../Source/Cesium.js";
|
|
import { PixelFormat } from "../../Source/Cesium.js";
|
|
import { Resource } from "../../Source/Cesium.js";
|
|
import { TextureAtlas } from "../../Source/Cesium.js";
|
|
import createScene from "../createScene.js";
|
|
import { when } from "../../Source/Cesium.js";
|
|
|
|
describe(
|
|
"Scene/TextureAtlas",
|
|
function () {
|
|
var scene;
|
|
var atlas;
|
|
var greenImage;
|
|
var tallGreenImage;
|
|
var blueImage;
|
|
var bigRedImage;
|
|
var bigBlueImage;
|
|
var bigGreenImage;
|
|
|
|
var greenGuid;
|
|
var tallGreenGuid;
|
|
var blueGuid;
|
|
var bigRedGuid;
|
|
var bigBlueGuid;
|
|
var bigGreenGuid;
|
|
|
|
beforeAll(function () {
|
|
scene = createScene();
|
|
|
|
return when.join(
|
|
Resource.fetchImage("./Data/Images/Green.png").then(function (image) {
|
|
greenImage = image;
|
|
greenGuid = createGuid();
|
|
}),
|
|
Resource.fetchImage("./Data/Images/Green1x4.png").then(function (
|
|
image
|
|
) {
|
|
tallGreenImage = image;
|
|
tallGreenGuid = createGuid();
|
|
}),
|
|
Resource.fetchImage("./Data/Images/Blue.png").then(function (image) {
|
|
blueImage = image;
|
|
blueGuid = createGuid();
|
|
}),
|
|
Resource.fetchImage("./Data/Images/Red16x16.png").then(function (
|
|
image
|
|
) {
|
|
bigRedImage = image;
|
|
bigRedGuid = createGuid();
|
|
}),
|
|
Resource.fetchImage("./Data/Images/Blue10x10.png").then(function (
|
|
image
|
|
) {
|
|
bigBlueImage = image;
|
|
bigBlueGuid = createGuid();
|
|
}),
|
|
Resource.fetchImage("./Data/Images/Green4x4.png").then(function (
|
|
image
|
|
) {
|
|
bigGreenImage = image;
|
|
bigGreenGuid = createGuid();
|
|
})
|
|
);
|
|
});
|
|
|
|
afterAll(function () {
|
|
scene.destroyForSpecs();
|
|
});
|
|
|
|
afterEach(function () {
|
|
atlas = atlas && atlas.destroy();
|
|
});
|
|
|
|
function expectToRender(texture, textureCoordinates, expected) {
|
|
var x = textureCoordinates.x + textureCoordinates.width / 2.0;
|
|
var y = textureCoordinates.y + textureCoordinates.height / 2.0;
|
|
var fs =
|
|
"uniform sampler2D u_texture;" +
|
|
"void main() {" +
|
|
" gl_FragColor = texture2D(u_texture, vec2(" +
|
|
x +
|
|
", " +
|
|
y +
|
|
"));" +
|
|
"}";
|
|
var uniformMap = {
|
|
u_texture: function () {
|
|
return texture;
|
|
},
|
|
};
|
|
|
|
expect({
|
|
context: scene.context,
|
|
fragmentShader: fs,
|
|
uniformMap: uniformMap,
|
|
}).contextToRender(expected);
|
|
}
|
|
|
|
it("creates a single image atlas", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 0,
|
|
initialSize: new Cartesian2(1, 1),
|
|
});
|
|
|
|
return atlas.addImage(greenGuid, greenImage).then(function (index) {
|
|
expect(index).toEqual(0);
|
|
|
|
expect(atlas.numberOfImages).toEqual(1);
|
|
expect(atlas.borderWidthInPixels).toEqual(0);
|
|
|
|
var texture = atlas.texture;
|
|
var atlasWidth = 2.0;
|
|
var atlasHeight = 2.0;
|
|
expect(texture.pixelFormat).toEqual(PixelFormat.RGBA);
|
|
expect(texture.width).toEqual(atlasWidth);
|
|
expect(texture.height).toEqual(atlasHeight);
|
|
|
|
var coords = atlas.textureCoordinates[index];
|
|
expect(coords.x).toEqual(0.0 / atlasWidth);
|
|
expect(coords.y).toEqual(0.0 / atlasHeight);
|
|
expect(coords.width).toEqual(1.0 / atlasWidth);
|
|
expect(coords.height).toEqual(1.0 / atlasHeight);
|
|
});
|
|
});
|
|
|
|
it("renders a single image atlas", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 0,
|
|
initialSize: new Cartesian2(1, 1),
|
|
});
|
|
|
|
return atlas.addImage(greenGuid, greenImage).then(function (index) {
|
|
var texture = atlas.texture;
|
|
var coords = atlas.textureCoordinates[index];
|
|
|
|
expectToRender(texture, coords, [0, 255, 0, 255]);
|
|
});
|
|
});
|
|
|
|
it("creates a single image atlas with default values", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
});
|
|
|
|
return atlas.addImage(greenGuid, greenImage).then(function (index) {
|
|
expect(index).toEqual(0);
|
|
|
|
expect(atlas.numberOfImages).toEqual(1);
|
|
expect(atlas.borderWidthInPixels).toEqual(1);
|
|
|
|
var texture = atlas.texture;
|
|
|
|
var atlasWidth = 16.0;
|
|
var atlasHeight = 16.0;
|
|
expect(texture.pixelFormat).toEqual(PixelFormat.RGBA);
|
|
expect(texture.width).toEqual(atlasWidth);
|
|
expect(texture.height).toEqual(atlasHeight);
|
|
|
|
var coords = atlas.textureCoordinates[index];
|
|
expect(coords.x).toEqual(1.0 / atlasWidth);
|
|
expect(coords.y).toEqual(1.0 / atlasHeight);
|
|
expect(coords.width).toEqual(1.0 / atlasWidth);
|
|
expect(coords.height).toEqual(1.0 / atlasHeight);
|
|
});
|
|
});
|
|
|
|
it("renders a single image atlas with default values", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
});
|
|
|
|
return atlas.addImage(greenGuid, greenImage).then(function (index) {
|
|
var texture = atlas.texture;
|
|
var coords = atlas.textureCoordinates[index];
|
|
|
|
expectToRender(texture, coords, [0, 255, 0, 255]);
|
|
});
|
|
});
|
|
|
|
it("creates a single image atlas with non-square initialSize", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 0,
|
|
initialSize: new Cartesian2(1.0, 5.0),
|
|
});
|
|
|
|
return atlas
|
|
.addImage(tallGreenGuid, tallGreenImage)
|
|
.then(function (index) {
|
|
expect(index).toEqual(0);
|
|
|
|
expect(atlas.numberOfImages).toEqual(1);
|
|
|
|
var texture = atlas.texture;
|
|
|
|
var atlasWidth = 2.0;
|
|
var atlasHeight = 8.0;
|
|
expect(texture.width).toEqual(atlasWidth);
|
|
expect(texture.height).toEqual(atlasHeight);
|
|
|
|
var coords = atlas.textureCoordinates[index];
|
|
expect(coords.x).toEqual(0.0 / atlasWidth);
|
|
expect(coords.y).toEqual(0.0 / atlasHeight);
|
|
expect(coords.width).toEqual(1.0 / atlasWidth);
|
|
expect(coords.height).toEqual(4.0 / atlasHeight);
|
|
});
|
|
});
|
|
|
|
it("renders a single image atlas with non-square initialSize", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 0,
|
|
initialSize: new Cartesian2(1.0, 5.0),
|
|
});
|
|
|
|
return atlas
|
|
.addImage(tallGreenGuid, tallGreenImage)
|
|
.then(function (index) {
|
|
var texture = atlas.texture;
|
|
var coords = atlas.textureCoordinates[index];
|
|
|
|
expectToRender(texture, coords, [0, 255, 0, 255]);
|
|
});
|
|
});
|
|
|
|
it("creates a two image atlas", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 0,
|
|
initialSize: new Cartesian2(2, 2),
|
|
});
|
|
|
|
var promises = [];
|
|
promises.push(atlas.addImage(greenGuid, greenImage));
|
|
promises.push(atlas.addImage(blueGuid, blueImage));
|
|
|
|
return when.all(promises, function (indices) {
|
|
var greenIndex = indices[0];
|
|
var blueIndex = indices[1];
|
|
|
|
expect(atlas.numberOfImages).toEqual(2);
|
|
|
|
var texture = atlas.texture;
|
|
var atlasWidth = 2.0;
|
|
var atlasHeight = 2.0;
|
|
expect(texture.width).toEqual(atlasWidth);
|
|
expect(texture.height).toEqual(atlasHeight);
|
|
|
|
var greenCoords = atlas.textureCoordinates[greenIndex];
|
|
expect(greenCoords.x).toEqual(0.0 / atlasWidth);
|
|
expect(greenCoords.y).toEqual(0.0 / atlasHeight);
|
|
expect(greenCoords.width).toEqual(1.0 / atlasWidth);
|
|
expect(greenCoords.height).toEqual(1.0 / atlasHeight);
|
|
|
|
var blueCoords = atlas.textureCoordinates[blueIndex];
|
|
expect(blueCoords.x).toEqual(1.0 / atlasWidth);
|
|
expect(blueCoords.y).toEqual(0.0 / atlasHeight);
|
|
expect(blueCoords.width).toEqual(1.0 / atlasWidth);
|
|
expect(blueCoords.height).toEqual(1.0 / atlasHeight);
|
|
});
|
|
});
|
|
|
|
it("renders a two image atlas", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 0,
|
|
initialSize: new Cartesian2(2, 2),
|
|
});
|
|
|
|
var promises = [];
|
|
promises.push(atlas.addImage(greenGuid, greenImage));
|
|
promises.push(atlas.addImage(blueGuid, blueImage));
|
|
|
|
return when.all(promises, function (indices) {
|
|
var greenIndex = indices[0];
|
|
var blueIndex = indices[1];
|
|
|
|
var texture = atlas.texture;
|
|
|
|
var greenCoords = atlas.textureCoordinates[greenIndex];
|
|
expectToRender(texture, greenCoords, [0, 255, 0, 255]);
|
|
|
|
var blueCoords = atlas.textureCoordinates[blueIndex];
|
|
expectToRender(texture, blueCoords, [0, 0, 255, 255]);
|
|
});
|
|
});
|
|
|
|
it("renders a four image atlas", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 0,
|
|
});
|
|
|
|
var promises = [];
|
|
promises.push(atlas.addImage(greenGuid, greenImage));
|
|
promises.push(atlas.addImage(blueGuid, blueImage));
|
|
promises.push(atlas.addImage(bigRedGuid, bigRedImage));
|
|
promises.push(atlas.addImage(bigBlueGuid, bigBlueImage));
|
|
|
|
return when.all(promises, function (indices) {
|
|
var greenIndex = indices.shift();
|
|
var blueIndex = indices.shift();
|
|
var bigRedIndex = indices.shift();
|
|
var bigBlueIndex = indices.shift();
|
|
|
|
expect(atlas.numberOfImages).toEqual(4);
|
|
|
|
var texture = atlas.texture;
|
|
var c0 = atlas.textureCoordinates[greenIndex];
|
|
var c1 = atlas.textureCoordinates[blueIndex];
|
|
var c2 = atlas.textureCoordinates[bigRedIndex];
|
|
var c3 = atlas.textureCoordinates[bigBlueIndex];
|
|
|
|
expectToRender(texture, c0, [0, 255, 0, 255]);
|
|
expectToRender(texture, c1, [0, 0, 255, 255]);
|
|
expectToRender(texture, c2, [255, 0, 0, 255]);
|
|
expectToRender(texture, c3, [0, 0, 255, 255]);
|
|
});
|
|
});
|
|
|
|
it("creates a four image atlas with non-zero borderWidthInPixels", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 2,
|
|
});
|
|
|
|
var promises = [];
|
|
promises.push(atlas.addImage(greenGuid, greenImage));
|
|
promises.push(atlas.addImage(blueGuid, blueImage));
|
|
promises.push(atlas.addImage(bigRedGuid, bigRedImage));
|
|
promises.push(atlas.addImage(bigBlueGuid, bigBlueImage));
|
|
|
|
return when.all(promises, function (indices) {
|
|
var greenIndex = indices.shift();
|
|
var blueIndex = indices.shift();
|
|
var bigRedIndex = indices.shift();
|
|
var bigBlueIndex = indices.shift();
|
|
|
|
expect(atlas.borderWidthInPixels).toEqual(2);
|
|
expect(atlas.numberOfImages).toEqual(4);
|
|
|
|
var texture = atlas.texture;
|
|
var c0 = atlas.textureCoordinates[greenIndex];
|
|
var c1 = atlas.textureCoordinates[blueIndex];
|
|
var c2 = atlas.textureCoordinates[bigRedIndex];
|
|
var c3 = atlas.textureCoordinates[bigBlueIndex];
|
|
|
|
var atlasWidth = 68.0;
|
|
var atlasHeight = 68.0;
|
|
expect(texture.width).toEqual(atlasWidth);
|
|
expect(texture.height).toEqual(atlasHeight);
|
|
|
|
expect(c0.x).toEqualEpsilon(2.0 / atlasWidth, CesiumMath.EPSILON16);
|
|
expect(c0.y).toEqualEpsilon(2.0 / atlasHeight, CesiumMath.EPSILON16);
|
|
expect(c0.width).toEqualEpsilon(
|
|
greenImage.width / atlasWidth,
|
|
CesiumMath.EPSILON16
|
|
);
|
|
expect(c0.height).toEqualEpsilon(
|
|
greenImage.height / atlasHeight,
|
|
CesiumMath.EPSILON16
|
|
);
|
|
|
|
expect(c1.x).toEqualEpsilon(
|
|
(greenImage.width + 2 * atlas.borderWidthInPixels) / atlasWidth,
|
|
CesiumMath.EPSILON16
|
|
);
|
|
expect(c1.y).toEqualEpsilon(2.0 / atlasHeight, CesiumMath.EPSILON16);
|
|
expect(c1.width).toEqualEpsilon(
|
|
blueImage.width / atlasWidth,
|
|
CesiumMath.EPSILON16
|
|
);
|
|
expect(c1.height).toEqualEpsilon(
|
|
blueImage.width / atlasHeight,
|
|
CesiumMath.EPSILON16
|
|
);
|
|
|
|
expect(c2.x).toEqualEpsilon(2.0 / atlasWidth, CesiumMath.EPSILON16);
|
|
expect(c2.y).toEqualEpsilon(
|
|
(bigRedImage.height + atlas.borderWidthInPixels) / atlasHeight,
|
|
CesiumMath.EPSILON16
|
|
);
|
|
expect(c2.width).toEqualEpsilon(
|
|
bigRedImage.width / atlasWidth,
|
|
CesiumMath.EPSILON16
|
|
);
|
|
expect(c2.height).toEqualEpsilon(
|
|
bigRedImage.height / atlasHeight,
|
|
CesiumMath.EPSILON16
|
|
);
|
|
|
|
expect(c3.x).toEqualEpsilon(2.0 / atlasWidth, CesiumMath.EPSILON16);
|
|
expect(c3.y).toEqualEpsilon(
|
|
(greenImage.height + 2 * atlas.borderWidthInPixels) / atlasHeight,
|
|
CesiumMath.EPSILON16
|
|
);
|
|
expect(c3.width).toEqualEpsilon(
|
|
bigBlueImage.width / atlasWidth,
|
|
CesiumMath.EPSILON16
|
|
);
|
|
expect(c3.height).toEqualEpsilon(
|
|
bigBlueImage.height / atlasHeight,
|
|
CesiumMath.EPSILON16
|
|
);
|
|
});
|
|
});
|
|
|
|
it("renders a four image atlas with non-zero borderWidthInPixels", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 2,
|
|
});
|
|
|
|
var promises = [];
|
|
promises.push(atlas.addImage(greenGuid, greenImage));
|
|
promises.push(atlas.addImage(blueGuid, blueImage));
|
|
promises.push(atlas.addImage(bigRedGuid, bigRedImage));
|
|
promises.push(atlas.addImage(bigBlueGuid, bigBlueImage));
|
|
|
|
return when.all(promises, function (indices) {
|
|
var greenIndex = indices.shift();
|
|
var blueIndex = indices.shift();
|
|
var bigRedIndex = indices.shift();
|
|
var bigBlueIndex = indices.shift();
|
|
|
|
expect(atlas.numberOfImages).toEqual(4);
|
|
|
|
var texture = atlas.texture;
|
|
var c0 = atlas.textureCoordinates[greenIndex];
|
|
var c1 = atlas.textureCoordinates[blueIndex];
|
|
var c2 = atlas.textureCoordinates[bigRedIndex];
|
|
var c3 = atlas.textureCoordinates[bigBlueIndex];
|
|
|
|
expectToRender(texture, c0, [0, 255, 0, 255]);
|
|
expectToRender(texture, c1, [0, 0, 255, 255]);
|
|
expectToRender(texture, c2, [255, 0, 0, 255]);
|
|
expectToRender(texture, c3, [0, 0, 255, 255]);
|
|
});
|
|
});
|
|
|
|
it("creates an atlas that dynamically resizes", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 0,
|
|
initialSize: new Cartesian2(1, 1),
|
|
});
|
|
|
|
return atlas.addImage(blueGuid, blueImage).then(function (blueIndex) {
|
|
expect(atlas.numberOfImages).toEqual(1);
|
|
|
|
var texture = atlas.texture;
|
|
var coordinates = atlas.textureCoordinates;
|
|
|
|
var atlasWidth = 2.0;
|
|
var atlasHeight = 2.0;
|
|
expect(texture.width).toEqual(atlasWidth);
|
|
expect(texture.height).toEqual(atlasHeight);
|
|
|
|
// blue image
|
|
expect(coordinates[blueIndex].x).toEqual(0.0 / atlasWidth);
|
|
expect(coordinates[blueIndex].y).toEqual(0.0 / atlasHeight);
|
|
expect(coordinates[blueIndex].width).toEqual(1.0 / atlasWidth);
|
|
expect(coordinates[blueIndex].height).toEqual(1.0 / atlasHeight);
|
|
|
|
//Add the big green image
|
|
return atlas
|
|
.addImage(bigGreenGuid, bigGreenImage)
|
|
.then(function (greenIndex) {
|
|
expect(atlas.numberOfImages).toEqual(2);
|
|
|
|
var texture = atlas.texture;
|
|
var coordinates = atlas.textureCoordinates;
|
|
|
|
var atlasWidth = 12.0;
|
|
var atlasHeight = 12.0;
|
|
expect(texture.width).toEqual(atlasWidth);
|
|
expect(texture.height).toEqual(atlasHeight);
|
|
|
|
// blue image
|
|
expect(coordinates[blueIndex].x).toEqual(0.0 / atlasWidth);
|
|
expect(coordinates[blueIndex].y).toEqual(0.0 / atlasHeight);
|
|
expect(coordinates[blueIndex].width).toEqual(1.0 / atlasWidth);
|
|
expect(coordinates[blueIndex].height).toEqual(1.0 / atlasHeight);
|
|
|
|
// big green image
|
|
expect(coordinates[greenIndex].x).toEqual(0.0 / atlasWidth);
|
|
expect(coordinates[greenIndex].y).toEqual(2.0 / atlasHeight);
|
|
expect(coordinates[greenIndex].width).toEqual(4.0 / atlasWidth);
|
|
expect(coordinates[greenIndex].height).toEqual(4.0 / atlasHeight);
|
|
});
|
|
});
|
|
});
|
|
|
|
it("renders an atlas that dynamically resizes", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 0,
|
|
initialSize: new Cartesian2(1, 1),
|
|
});
|
|
|
|
return atlas.addImage(blueGuid, blueImage).then(function (blueIndex) {
|
|
expect(atlas.numberOfImages).toEqual(1);
|
|
|
|
var texture = atlas.texture;
|
|
var coordinates = atlas.textureCoordinates;
|
|
|
|
var blueCoords = coordinates[blueIndex];
|
|
expectToRender(texture, blueCoords, [0, 0, 255, 255]);
|
|
|
|
return atlas
|
|
.addImage(bigGreenGuid, bigGreenImage)
|
|
.then(function (greenIndex) {
|
|
expect(atlas.numberOfImages).toEqual(2);
|
|
|
|
var texture = atlas.texture;
|
|
var coordinates = atlas.textureCoordinates;
|
|
|
|
var blueCoords = coordinates[blueIndex];
|
|
expectToRender(texture, blueCoords, [0, 0, 255, 255]);
|
|
|
|
var greenCoords = coordinates[greenIndex];
|
|
expectToRender(texture, greenCoords, [0, 255, 0, 255]);
|
|
});
|
|
});
|
|
});
|
|
|
|
it("creates an atlas with smaller initialSize than first image", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 0,
|
|
initialSize: new Cartesian2(1, 1),
|
|
});
|
|
|
|
return atlas.addImage(bigRedGuid, bigRedImage).then(function (index) {
|
|
expect(atlas.numberOfImages).toEqual(1);
|
|
|
|
var texture = atlas.texture;
|
|
var coordinates = atlas.textureCoordinates;
|
|
|
|
var atlasWidth = 32.0;
|
|
var atlasHeight = 32.0;
|
|
expect(texture.width).toEqual(atlasWidth);
|
|
expect(texture.height).toEqual(atlasHeight);
|
|
|
|
expect(coordinates[index].x).toEqual(0.0 / atlasWidth);
|
|
expect(coordinates[index].y).toEqual(0.0 / atlasHeight);
|
|
expect(coordinates[index].width).toEqual(16.0 / atlasWidth);
|
|
expect(coordinates[index].height).toEqual(16.0 / atlasHeight);
|
|
});
|
|
});
|
|
|
|
it("renders an atlas with smaller initialSize than first image", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 0,
|
|
initialSize: new Cartesian2(1, 1),
|
|
});
|
|
|
|
return atlas.addImage(bigRedGuid, bigRedImage).then(function (index) {
|
|
var texture = atlas.texture;
|
|
var coords = atlas.textureCoordinates[index];
|
|
|
|
expectToRender(texture, coords, [255, 0, 0, 255]);
|
|
});
|
|
});
|
|
|
|
it("creates a two image atlas with non-zero borderWidthInPixels that resizes", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 2,
|
|
initialSize: new Cartesian2(2, 2),
|
|
});
|
|
|
|
var greenPromise = atlas.addImage(greenGuid, greenImage);
|
|
var bluePromise = atlas.addImage(blueGuid, blueImage);
|
|
|
|
return when.all([greenPromise, bluePromise], function (indices) {
|
|
var greenIndex = indices.shift();
|
|
var blueIndex = indices.shift();
|
|
|
|
var texture = atlas.texture;
|
|
var coordinates = atlas.textureCoordinates;
|
|
|
|
var atlasWidth = 10.0;
|
|
var atlasHeight = 10.0;
|
|
expect(atlas.borderWidthInPixels).toEqual(2);
|
|
expect(atlas.numberOfImages).toEqual(2);
|
|
expect(texture.width).toEqual(atlasWidth);
|
|
expect(texture.height).toEqual(atlasHeight);
|
|
|
|
expect(coordinates[greenIndex].x).toEqual(
|
|
atlas.borderWidthInPixels / atlasWidth
|
|
);
|
|
expect(coordinates[greenIndex].y).toEqual(
|
|
atlas.borderWidthInPixels / atlasHeight
|
|
);
|
|
expect(coordinates[greenIndex].width).toEqual(1.0 / atlasWidth);
|
|
expect(coordinates[greenIndex].height).toEqual(1.0 / atlasHeight);
|
|
|
|
expect(coordinates[blueIndex].x).toEqual(5.0 / atlasWidth);
|
|
expect(coordinates[blueIndex].y).toEqual(2.0 / atlasHeight);
|
|
expect(coordinates[blueIndex].width).toEqual(1.0 / atlasWidth);
|
|
expect(coordinates[blueIndex].height).toEqual(1.0 / atlasHeight);
|
|
});
|
|
});
|
|
|
|
it("renders a two image atlas with non-zero borderWidthInPixels that resizes", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 2,
|
|
initialSize: new Cartesian2(2, 2),
|
|
});
|
|
|
|
var greenPromise = atlas.addImage(greenGuid, greenImage);
|
|
var bluePromise = atlas.addImage(blueGuid, blueImage);
|
|
|
|
return when.all([greenPromise, bluePromise], function (indices) {
|
|
var greenIndex = indices.shift();
|
|
var blueIndex = indices.shift();
|
|
|
|
var texture = atlas.texture;
|
|
var coordinates = atlas.textureCoordinates;
|
|
|
|
var greenCoords = coordinates[greenIndex];
|
|
var blueCoords = coordinates[blueIndex];
|
|
|
|
expectToRender(texture, greenCoords, [0, 255, 0, 255]);
|
|
expectToRender(texture, blueCoords, [0, 0, 255, 255]);
|
|
});
|
|
});
|
|
|
|
it("creates an atlas with non-square initialSize that resizes", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 0,
|
|
initialSize: new Cartesian2(1.0, 1.0),
|
|
});
|
|
|
|
return atlas
|
|
.addImage(tallGreenGuid, tallGreenImage)
|
|
.then(function (index) {
|
|
expect(atlas.numberOfImages).toEqual(1);
|
|
|
|
var texture = atlas.texture;
|
|
var coordinates = atlas.textureCoordinates;
|
|
|
|
var atlasWidth = 2;
|
|
var atlasHeight = 8;
|
|
expect(texture.width).toEqual(atlasWidth);
|
|
expect(texture.height).toEqual(atlasHeight);
|
|
|
|
expect(coordinates[index].x).toEqual(0.0 / atlasWidth);
|
|
expect(coordinates[index].y).toEqual(0.0 / atlasHeight);
|
|
expect(coordinates[index].width).toEqual(
|
|
tallGreenImage.width / atlasWidth
|
|
);
|
|
expect(coordinates[index].height).toEqual(
|
|
tallGreenImage.height / atlasHeight
|
|
);
|
|
});
|
|
});
|
|
|
|
it("renders an atlas with non-square initialSize that resizes", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 0,
|
|
initialSize: new Cartesian2(1.0, 1.0),
|
|
});
|
|
|
|
return atlas
|
|
.addImage(tallGreenGuid, tallGreenImage)
|
|
.then(function (index) {
|
|
var texture = atlas.texture;
|
|
var coords = atlas.textureCoordinates[index];
|
|
|
|
expectToRender(texture, coords, [0, 255, 0, 255]);
|
|
});
|
|
});
|
|
|
|
it("renders an atlas that dynamically resizes twice", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 0,
|
|
initialSize: new Cartesian2(1, 1),
|
|
});
|
|
|
|
var bluePromise = atlas.addImage(blueGuid, blueImage);
|
|
var bigGreenPromise = atlas.addImage(bigGreenGuid, bigGreenImage);
|
|
var bigRedPromise = atlas.addImage(bigRedGuid, bigRedImage);
|
|
|
|
return when.all([bluePromise, bigGreenPromise, bigRedPromise], function (
|
|
indices
|
|
) {
|
|
var blueIndex = indices.shift();
|
|
var bigGreenIndex = indices.shift();
|
|
var bigRedIndex = indices.shift();
|
|
|
|
var texture = atlas.texture;
|
|
var blueCoordinates = atlas.textureCoordinates[blueIndex];
|
|
var bigGreenCoordinates = atlas.textureCoordinates[bigGreenIndex];
|
|
var bigRedCoordinates = atlas.textureCoordinates[bigRedIndex];
|
|
|
|
expectToRender(texture, blueCoordinates, [0, 0, 255, 255]);
|
|
expectToRender(texture, bigGreenCoordinates, [0, 255, 0, 255]);
|
|
expectToRender(texture, bigRedCoordinates, [255, 0, 0, 255]);
|
|
});
|
|
});
|
|
|
|
it("promise resolves to index after calling addImage with Image", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 0,
|
|
initialSize: new Cartesian2(4, 4),
|
|
});
|
|
|
|
return atlas.addImage(blueGuid, blueImage).then(function (blueIndex) {
|
|
expect(blueIndex).toEqual(0);
|
|
|
|
return atlas
|
|
.addImage(greenGuid, greenImage)
|
|
.then(function (greenIndex) {
|
|
expect(greenIndex).toEqual(1);
|
|
|
|
return atlas.addImage(blueGuid, blueImage).then(function (index) {
|
|
expect(index).toEqual(blueIndex);
|
|
|
|
expect(atlas.numberOfImages).toEqual(2);
|
|
|
|
var texture = atlas.texture;
|
|
var coordinates = atlas.textureCoordinates;
|
|
|
|
var blueCoordinates = coordinates[blueIndex];
|
|
var greenCoordinates = coordinates[greenIndex];
|
|
|
|
expectToRender(texture, blueCoordinates, [0, 0, 255, 255]);
|
|
expectToRender(texture, greenCoordinates, [0, 255, 0, 255]);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
it("creates an atlas with subregions", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 0,
|
|
initialSize: new Cartesian2(1, 1),
|
|
});
|
|
|
|
atlas.addImage(greenGuid, greenImage);
|
|
|
|
var promise1 = atlas.addSubRegion(
|
|
greenGuid,
|
|
new BoundingRectangle(0.0, 0.0, 0.5, 0.5)
|
|
);
|
|
var promise2 = atlas.addSubRegion(
|
|
greenGuid,
|
|
new BoundingRectangle(0.0, 0.5, 0.5, 0.5)
|
|
);
|
|
var promise3 = atlas.addSubRegion(
|
|
greenGuid,
|
|
new BoundingRectangle(0.5, 0.0, 0.5, 0.5)
|
|
);
|
|
var promise4 = atlas.addSubRegion(
|
|
greenGuid,
|
|
new BoundingRectangle(0.5, 0.5, 0.5, 0.5)
|
|
);
|
|
|
|
return when.all([promise1, promise2, promise3, promise4], function (
|
|
indices
|
|
) {
|
|
var index1 = indices.shift();
|
|
var index2 = indices.shift();
|
|
var index3 = indices.shift();
|
|
var index4 = indices.shift();
|
|
|
|
expect(atlas.numberOfImages).toEqual(5);
|
|
|
|
var coordinates = atlas.textureCoordinates;
|
|
var atlasWidth = 2.0;
|
|
var atlasHeight = 2.0;
|
|
|
|
expect(coordinates[index1].x).toEqual(0.0 / atlasWidth);
|
|
expect(coordinates[index1].y).toEqual(0.0 / atlasHeight);
|
|
expect(coordinates[index1].width).toEqual(0.5 / atlasWidth);
|
|
expect(coordinates[index1].height).toEqual(0.5 / atlasHeight);
|
|
|
|
expect(coordinates[index2].x).toEqual(0.0 / atlasWidth);
|
|
expect(coordinates[index2].y).toEqual(0.5 / atlasHeight);
|
|
expect(coordinates[index2].width).toEqual(0.5 / atlasWidth);
|
|
expect(coordinates[index2].height).toEqual(0.5 / atlasHeight);
|
|
|
|
expect(coordinates[index3].x).toEqual(0.5 / atlasWidth);
|
|
expect(coordinates[index3].y).toEqual(0.0 / atlasHeight);
|
|
expect(coordinates[index3].width).toEqual(0.5 / atlasWidth);
|
|
expect(coordinates[index3].height).toEqual(0.5 / atlasHeight);
|
|
|
|
expect(coordinates[index4].x).toEqual(0.5 / atlasWidth);
|
|
expect(coordinates[index4].y).toEqual(0.5 / atlasHeight);
|
|
expect(coordinates[index4].width).toEqual(0.5 / atlasWidth);
|
|
expect(coordinates[index4].height).toEqual(0.5 / atlasHeight);
|
|
});
|
|
});
|
|
|
|
it("creates an atlas that resizes with subregions", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: 0,
|
|
initialSize: new Cartesian2(1, 1),
|
|
});
|
|
|
|
atlas.addImage(greenGuid, greenImage);
|
|
|
|
var promise1 = atlas.addSubRegion(
|
|
greenGuid,
|
|
new BoundingRectangle(0.0, 0.0, 0.5, 0.5)
|
|
);
|
|
var promise2 = atlas.addSubRegion(
|
|
greenGuid,
|
|
new BoundingRectangle(0.0, 0.5, 0.5, 0.5)
|
|
);
|
|
var promise3 = atlas.addSubRegion(
|
|
greenGuid,
|
|
new BoundingRectangle(0.5, 0.0, 0.5, 0.5)
|
|
);
|
|
var promise4 = atlas.addSubRegion(
|
|
greenGuid,
|
|
new BoundingRectangle(0.5, 0.5, 0.5, 0.5)
|
|
);
|
|
|
|
return when.all([promise1, promise2, promise3, promise4], function (
|
|
indices
|
|
) {
|
|
var index1 = indices.shift();
|
|
var index2 = indices.shift();
|
|
var index3 = indices.shift();
|
|
var index4 = indices.shift();
|
|
|
|
expect(atlas.numberOfImages).toEqual(5);
|
|
|
|
return atlas.addImage(blueGuid, blueImage).then(function (blueIndex) {
|
|
expect(atlas.numberOfImages).toEqual(6);
|
|
|
|
var coordinates = atlas.textureCoordinates;
|
|
var atlasWidth = 2.0;
|
|
var atlasHeight = 2.0;
|
|
|
|
expect(coordinates[index1].x).toEqual(0.0 / atlasWidth);
|
|
expect(coordinates[index1].y).toEqual(0.0 / atlasHeight);
|
|
expect(coordinates[index1].width).toEqual(0.5 / atlasWidth);
|
|
expect(coordinates[index1].height).toEqual(0.5 / atlasHeight);
|
|
|
|
expect(coordinates[index2].x).toEqual(0.0 / atlasWidth);
|
|
expect(coordinates[index2].y).toEqual(0.5 / atlasHeight);
|
|
expect(coordinates[index2].width).toEqual(0.5 / atlasWidth);
|
|
expect(coordinates[index2].height).toEqual(0.5 / atlasHeight);
|
|
|
|
expect(coordinates[index3].x).toEqual(0.5 / atlasWidth);
|
|
expect(coordinates[index3].y).toEqual(0.0 / atlasHeight);
|
|
expect(coordinates[index3].width).toEqual(0.5 / atlasWidth);
|
|
expect(coordinates[index3].height).toEqual(0.5 / atlasHeight);
|
|
|
|
expect(coordinates[index4].x).toEqual(0.5 / atlasWidth);
|
|
expect(coordinates[index4].y).toEqual(0.5 / atlasHeight);
|
|
expect(coordinates[index4].width).toEqual(0.5 / atlasWidth);
|
|
expect(coordinates[index4].height).toEqual(0.5 / atlasHeight);
|
|
|
|
expect(coordinates[blueIndex].x).toEqual(1.0 / atlasWidth);
|
|
expect(coordinates[blueIndex].y).toEqual(0.0 / atlasHeight);
|
|
expect(coordinates[blueIndex].width).toEqual(1.0 / atlasWidth);
|
|
expect(coordinates[blueIndex].height).toEqual(1.0 / atlasHeight);
|
|
});
|
|
});
|
|
});
|
|
|
|
it("creates a two image atlas using a url and a function", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
pixelFormat: PixelFormat.RGBA,
|
|
borderWidthInPixels: 0,
|
|
});
|
|
|
|
var greenUrl = "./Data/Images/Green.png";
|
|
var greenPromise = atlas.addImage(greenUrl, greenUrl);
|
|
|
|
var bluePromise = atlas.addImage("Blue Image", function (id) {
|
|
expect(id).toEqual("Blue Image");
|
|
return blueImage;
|
|
});
|
|
|
|
return when.all([greenPromise, bluePromise], function (results) {
|
|
var greenIndex = results[0];
|
|
var blueIndex = results[1];
|
|
|
|
expect(atlas.numberOfImages).toEqual(2);
|
|
|
|
var texture = atlas.texture;
|
|
var coordinates = atlas.textureCoordinates;
|
|
var blueCoordinates = coordinates[blueIndex];
|
|
var greenCoordinates = coordinates[greenIndex];
|
|
|
|
expectToRender(texture, blueCoordinates, [0, 0, 255, 255]);
|
|
expectToRender(texture, greenCoordinates, [0, 255, 0, 255]);
|
|
|
|
// after loading 'Blue Image', further adds should not call the function
|
|
|
|
return atlas
|
|
.addImage("Blue Image", function (id) {
|
|
throw "should not get here";
|
|
})
|
|
.then(function (index) {
|
|
expect(index).toEqual(blueIndex);
|
|
});
|
|
});
|
|
});
|
|
|
|
it("GUID changes when atlas is modified", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
});
|
|
|
|
var guid1 = atlas.guid;
|
|
|
|
return atlas.addImage(greenGuid, greenImage).then(function (index) {
|
|
var guid2 = atlas.guid;
|
|
expect(guid1).not.toEqual(guid2);
|
|
|
|
return atlas
|
|
.addSubRegion(greenGuid, new BoundingRectangle(0.0, 0.0, 0.5, 0.5))
|
|
.then(function (index) {
|
|
var guid3 = atlas.guid;
|
|
expect(guid2).not.toEqual(guid3);
|
|
});
|
|
});
|
|
});
|
|
|
|
it("throws with a negative borderWidthInPixels", function () {
|
|
expect(function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
borderWidthInPixels: -1,
|
|
});
|
|
}).toThrowDeveloperError();
|
|
});
|
|
|
|
it("throws with a initialSize less than one", function () {
|
|
expect(function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
initialSize: new Cartesian2(0, 0),
|
|
});
|
|
}).toThrowDeveloperError();
|
|
});
|
|
|
|
it("throws without context", function () {
|
|
expect(function () {
|
|
return new TextureAtlas({});
|
|
}).toThrowDeveloperError();
|
|
});
|
|
|
|
it("addImage throws without id", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
});
|
|
expect(function () {
|
|
atlas.addImage(undefined, blueImage);
|
|
}).toThrowDeveloperError();
|
|
});
|
|
|
|
it("addImage throws without image", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
});
|
|
|
|
expect(function () {
|
|
atlas.addImage("./Data/Images/Green.png", undefined);
|
|
}).toThrowDeveloperError();
|
|
});
|
|
|
|
it("addSubRegion throws without id", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
});
|
|
|
|
expect(function () {
|
|
atlas.addSubRegion(undefined, new BoundingRectangle());
|
|
}).toThrowDeveloperError();
|
|
});
|
|
|
|
it("addSubRegion throws without subregion", function () {
|
|
atlas = new TextureAtlas({
|
|
context: scene.context,
|
|
});
|
|
|
|
expect(function () {
|
|
atlas.addSubRegion("asdf", undefined);
|
|
}).toThrowDeveloperError();
|
|
});
|
|
},
|
|
"WebGL"
|
|
);
|