WebGL (.html) Target

When creating WebGL/JavaScript .html applications with CopperCube, there are some things to keep in mind:

WebGL 1 and WebGL 2 is supported. When the browser doesn't support WebGL 2, a fallback to WebGL 1 is used.
There are still a few old browsers out there which don't support WebGL. See below for details.
Some browsers only run WebGL content generated from CopperCube when it is comming from a web server (not from local disk). CopperCube will tell you when this is the case and what to do about it.

Switching to Fullscreen and MousePointer lock

Since version 4.5, CopperCube supports switching your WebGL app to fullsceen, and optional also locking the mouse cursor, for nice 'First Person Shooter' cameras. For this, add a 'When a key is pressed do something' behavior or a 2D Overlay with a 'when clicked on this do something' behavior into your app, and add the 'Switch to Fullscreen' action to it. You can download this action from the Download Scripted Actions page from the CopperCube homepage.

You need to manually trigger switching to fullscreen in this way because WebGL has a security limitation, which lets an app only switch to fullscreen if a user clicks with the mouse or presses a button.

For non-fullscreen apps, the WebGL automatically can use the mouse lock for FPS cameras, if wanted. This is an option in the publishing settings of WebGL.

Browser Support

CopperCube projects published as WebGL/JavaScript have one big advantage: They don't need any plugin and run directly in the browser.
For a detailed and up-to-date list of how to get a browser supporting WebGL, see the CopperLicht Browser Support site.

Hiding Debug Texts

CopperCube WebGL projects sometimes write informational texts below the canvas, for example when loading a texture has failed, or there was a problem creating a shader. Of course, for your finished product, you don't want those texts to appear. The text is marked with the CSS class 'cldebug', so you can influence its appearance easily. If you want it to be hidden, just add a CSS rule like "div.cldebug { display: none; }" to the header of your .HTML file:

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script type="text/javascript" src="copperlichtdata/copperlicht.js"></script>
	<style type="text/css">
		div.cldebug { display: none; }
	</style>
</head>
<body>
...

Scripting with JavaScript

Besides with actions and behaviors, you can make your WebGL scenes more interactive using a built-in scripting language named 'JavaScript'. See the scripting overview for a detailed description how to use this feature.

Additionally, there is a second, more detailed way to script your WebGL app, which only works for WebGL and not on the other targets: CopperCube uses its own WebGL based JavaScript 3D engine named 'CopperLicht'. You can download the CopperLicht SDK freely from its website, it contains a detailed documentation and a lot of examples and tutorials showing how to extend CopperCube 3d scenes using JavaScript:

Goto the official CopperLicht website.

Problems running your WebGL scenes in Google Chrome

If you want to run your WebGL scenes using the Google Chrome browser from your local disk, you might get an error like

Error: Could not load file 'copperlichtdata/coppercube.ccbjs'

This is usually caused by the security restriction that Chrome doesn't want to read files from your disk. There are four ways to work around this:

Workaround 1: On Windows, CopperCube runs its own webserver if you have the option enabled (it is on by default), and uses it if you click Tools -> Test as WebGL. That way your scene will work.
Workaround 2: Use another browser, like for example Firefox. At the time of this writing, Firefox happily reads files from your local disk.
Workaround 3: Add the parameter --allow-file-access-from-files when starting Chrome. To do this in Windows do the following:
- if you have a chrome icon somewhere on your desktop or in the task bar, right click it, select 'Properties' and there you should get some options how chrome is launched.
- Usually, there is the first entry named "target" or similar, and set to something like
  C:\Users\yourname\AppData\Local\Google\Chrome\Application\chrome.exe
  simply add --allow-file-access-from-files to this, so it looks like this then:
  C:\Users\yourname\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files
- Now, when you let coppercube lauch the browser to show your scene, copy the URL from it, close the browser, open the browser using your modified shortcut, and paste the URL in your browser again. Then it works.
Workaround 4: Run your example from a web server. You can either upload your files to a web server on the internet, or run a local webserver on your system, and let chrome access the http://localhost/...-adress where your files are, instead of directly accessing the files using file://... URL.