Adding a cubemap using the PC Engine

Help & Support
1

Trying to add a cubemap using the PC Engine/API.

Found this…

… and copied the HMTL/CSS/JS to my own Dreamweaver project.

It works.

The problem is when I try to load the assets locally or otherwise. I downloaded the assets used in this example and I downloaded a fresh skybox w/ assets directly from PlayCanvas. In both cases the skybox won’t appear. I also tried putting the assets on my server and loading from there…still didn’t work. The only assets that work are coming from the server referenced in the CodePen code.

The error that pops up in the console is:

RangeError: attempting to construct out-of-bounds TypedArray on ArrayBuffer

So in summary this code works:

var data = {
name: ‘forest’,
cubemap: ‘http://7ktuvf.com1.z0.glb.clouddn.com/test/1.dds’,
textures: [
‘http://7ktuvf.com1.z0.glb.clouddn.com/test/2.png’,
‘http://7ktuvf.com1.z0.glb.clouddn.com/test/3.png’,
‘http://7ktuvf.com1.z0.glb.clouddn.com/test/4.png’,
‘http://7ktuvf.com1.z0.glb.clouddn.com/test/5.png’,
‘http://7ktuvf.com1.z0.glb.clouddn.com/test/6.png’,
‘http://7ktuvf.com1.z0.glb.clouddn.com/test/7.png’
]
};

This code doesn’t work:

var data = {
name: ‘forest’,
cubemap: ‘…/cubemaps/forest/1.dds’,
textures: [
‘…/cubemaps/forest/2.png’,
‘…/cubemaps/forest/3.png’,
‘…/cubemaps/forest/4.png’,
‘…/cubemaps/forest/5.png’,
‘…/cubemaps/forest/6.png’,
‘…/cubemaps/forest/7.png’
]
};

Full code is in the next post. Been banging my head on this for hours…anybody have an idea what is going on?

Thanks,
Joe H.

P.S. Thought it might be the crossOrigin deal causing the problem but if I remove that line of code it still doesn’t work

2

Here’s the full code that isn’t working:

// Create a PlayCanvas application
var canvas = document.getElementById(“application-canvas”);
var app = new pc.Application(canvas, {
mouse: new pc.Mouse(canvas)
});
app.loader._handlers.texture.crossOrigin = true;
app.start();

// Fill the available space at full resolution
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);

// Resize the canvas when the window is resized
window.addEventListener(‘resize’, function () {
app.resizeCanvas(canvas.width, canvas.height);
});

// Create camera entity
var camera = new pc.Entity();
camera.addComponent(‘camera’, {clearColor: new pc.Color(0.1, 0.2, 0.3)});
camera.translate(0, 0, 10);

app.root.addChild(camera);
camera.setPosition(0, 0, 3);

var data = {
name: ‘forest’,
cubemap: ‘…/cubemaps/forest/1.dds’,
textures: [
’…/cubemaps/forest/2.png’,
’…/cubemaps/forest/3.png’,
’…/cubemaps/forest/4.png’,
’…/cubemaps/forest/5.png’,
’…/cubemaps/forest/6.png’,
’…/cubemaps/forest/7.png’
]
};

var textures = data.textures.map(function(v, i) {
var asset = new pc.Asset(data.name + ‘-’ + i, ‘texture’, { url: v });
app.assets.add(asset);
return asset.id;
});

var cubemap = new pc.Asset(
data.name,
‘cubemap’,
{ url: data.cubemap },
{
anisotropy: 1,
magFilter: 1,
minFilter: 5,
rgbm: true,
textures: textures
}
);

app.setSkybox(cubemap);

3

NM…pathing error. Knew it had to be something simple.

var data = {
name: ‘forest’,
cubemap: ‘cubemaps/forest/1.dds’,
textures: [
‘cubemaps/forest/2.png’,
‘cubemaps/forest/3.png’,
‘cubemaps/forest/4.png’,
‘cubemaps/forest/5.png’,
‘cubemaps/forest/6.png’,
‘cubemaps/forest/7.png’
]
};

4

Hi, I am the author of the codepen you show. :smile:

Here is some points:

  • As the browser can only fetch file by HTTP/HTTPS, you should serve your local assets by a web server.
  • Make sure the path of cubemap and textures are correct. (Otherwise you will see 404 error in the console)
6

是啊，我传到七牛上面测试的。:smile:

7

Scarlex,

Thanks for the info. Ultimately I think the assets will be stored on a server, maybe in a database or CMS. This project was me putting together a strawman to see if the basic concepts would work. It took me a bit, but I eventually got the prefiltered cubemap I downloaded from PlayCanvas to work as expected with reflections, etc.