Back to Content

WebGL (.html) Target

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



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.




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: