Hi, I want to publish my game on my web server.
And I want to use the CDN to accelerate the loading speed.
Then, I separate some assets to the CDN. So, this is the index.html on my web server :
And the dir on my web server is like this :
And the dir on CDN :
Unfortunately, I got this problem :
How could I fix this problem ?
Thank you very much !
This error is because textures used by WebGL must either be served from the same domain (origin) as the main page or they must be served with the correct cross-origin headers.
For the server: if your assets are served from a different domain you must ensure they have the correct CORS headers.
For the game/client there are two options.
First: If you set the ASSET_PREFIX config in the index.html to a URL, then all assets will be loaded from this prefix. If the ASSET_PREFIX is an absolute URL (for example, starting with “https://”) then we enable cross-origin loading on the textures.
Second: You can manually enable cross origin texture loading with this code:
var handler = this.app.loader.getHandler("texture");
handler.crossOrigin = "anonymous";
You must run this code before any textures are requested.
Hi, dave! I am very grateful for your reply.
To run the code before any textures are requested, I just need to create a script including this code in the initialize function and set this script to the first in SCRIPT LOADING ORDER ?
Hello, dave. I have another question. As you can see, I just modified the index.html :
In order to using the CDN, I need to separate the index.html and other files. So I must change the URLs in index.html and config.json. And every time I publish the game, I need to modify them manually.
Is there any way to change the URLs ? According to you :
Where could I set this ASSET_PREFIX ? Is it in the _ start _.js ?
Thank you !
Hi Wing,
If you can I would not change any URLs for assets, scenes or config data. These can all updated using the ASSET_PREFIX. The only URLs you should need to change are the script tags in the index.html.
<!doctype html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="manifest" href="manifest.json">
<style></style>
<title>My Project</title>
<script src="http://example.com/cdn/playcanvas-stable.min.js"></script>
<script>
ASSET_PREFIX = "http://example.com/cdn/";
SCRIPT_PREFIX = "";
SCENE_PATH = "123456.json";
CONTEXT_OPTIONS = {
'alpha': true,
'preserveDrawingBuffer': false
};
SCRIPTS = [ 123, 345 ];
CONFIG_FILENAME = "config.json";
pc.script.legacy = false;
</script>
</head>
<body>
<script src="http://example.com/cdn/__start__.js"></script>
<script src="http://example.com/cdn/__loading__.js"></script>
</body>
</html>
Set the ASSET_PREFIX in `index.html (see above example)
