Project here: PlayCanvas | HTML5 Game Engine
Branch: vinomna, Scene: Vinomna Center - New
Replicable by launching, zooming out and clicking on the white sphere in the scene on the left
I’m downloading a texture from a URL and setting it as a skybox. To test I’ve picked a random image from Imgur.
I’ve tried clamping the texture and setting the seamPixels but to no avail. There is a notable line where the texture ends meet, despite the texture containing no such artifacts. Is there a way to solve this?
From the pano.js script:
Pano.prototype.loadAsset = function(url, name) {
let t = this;
var asset = new pc.Asset(name, "texture", {
url: url
});
this.app.assets.add(asset);
asset.on("load", function (asset) {
t.ready = true;
});
this.app.assets.load(asset);
}
Pano.prototype.loadCubemap = function() {
if (this.textureAtlas == null) {
var textureCube = new pc.Texture(this.app.graphicsDevice, {
cubemap: true,
width: 4096,
height: 4096,
addressU: pc.ADDRESS_CLAMP_TO_EDGE,
addressV: pc.ADDRESS_CLAMP_TO_EDGE
});
this.textureAtlas = new pc.Texture(this.app.graphicsDevice, {
width: 4096,
height: 4096,
addressU: pc.ADDRESS_CLAMP_TO_EDGE,
addressV: pc.ADDRESS_CLAMP_TO_EDGE
});
pc.reprojectTexture(this.app.assets.find(this.name, "texture").resource, textureCube, {
numSamples: 1,
seamPixels: 4
});
pc.EnvLighting.generateAtlas(textureCube, {
target: this.textureAtlas
});
}
this.app.root.findByName("Camera").script.cameraController.pitchAngleMin = -90;
this.app.scene.skybox = this.textureAtlas;
this.app.scene.skyboxMip = 0;
}
