Course Links

Resources

External

Textures work fine when a page is hosted on a remote web server, such as repl.it. Unfortunately, loading of texture images from a local file stored on your hard drive is subject to enhanced security restrictions. This will make it impossible to develop programs with texture if you are working locally on your own computer, unless you take some of the steps described here.

When you open a web page directly, most browsers these days will refuse to load the texture files that go with it even if they are in the same directory. If you see a CORS error in the console, that is the problem. Instead of being painted with the desired texture, your object will be colored black. There are two possible workarounds.

Running a Local Web Server

Probably the best solution is to set up a local web server on your computer, and viewing your files through that. Doing so makes the texture file problem go away because accessing the files no longer triggers a CORS error. Setting up a full server is beyond the scope of this lab, but if you want to try it there are lots of online guides. Here is one.

To make it easier, some developer tools have builtin servers that are very simple to use, and this is the path I recommend. One example is the Live Server extension for VS Code. You will need to install this from the extensions icon before it can be used. It will give you an "Open with live server" option in several places (as explained in the extension's documentation). When run it starts up a very limited local web server just for testing purposes, and textures should load normally through it.

Disable Browser Security

If you don't want to run a server, the other option is to use a browser that lacks the security feature that is getting in the way. As of this writing, local texture loads do not work with the latest Chrome, Firefox, Edge, or Safari browsers. However, there is a workaround with Chrome. You can start it in a special mode that disables the usual security checks. In order for this to work, all your Chrome windows need to be shut down first. Then you restart the program from a terminal with an extra options flag. On Mac:

open /Applications/Google\ Chrome.app --args --allow-file-access-from-files

From Windows command prompt:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

The disabled security is fine if all you are doing is testing web files. I don't recommend visiting other sites on the internet until you restart the browser in its normal mode. Again, this requires shutting all windows first.