Skip to Content

Debugging Three.js

|Three.js|0 Comments

If you’re in the stages of creating a webGL game or app using three.js you may find it useful to visualize what your code is doing. That’s where the need for a debugger/inspector comes into play. Here are a few ways to do it.

Using a Custom UI to Debug Three.js

You can use JQuery to a certain extent alongside three.js. to create things like ui elements. Having said that, you can’t interact directly with three.js using jQuery unless you’re using something like TQuery. In our case we just use jQuery interact with the ui elements because you may want to debug in a way that the stats object (next) doesn’t offer.

The below code ceates a debuginfo object and prints it out.
var stats;

var debuginfo = {
'Mouse': {
'mouseX': '',
'mouseY': '',
'targetRotationX': '',
'targetRotationY': ''
},
'Models': {},
'Textures': {}
}

function initDebug() {

//print your list of debug items in html
$('#debug').html(printDebugInfo(debuginfo));

}

function printDebugInfo(obj) {

var str = '';
$.each(obj, function (key, value) {
    str += "
<div class="sidebar-widget">
<h3>" + key + "</h3>
<div id="&quot; + key.toLowerCase() + &quot;">"; $.each(value, function (key, value) { str += key + ": " + '<span id=" + key + ">' + value + '</span> '; }); str += "</div>
</div>
"; }); return str; }

Using the stats object

Three.js has a built-in “stats” object that you can use for monitoring memory usage

three-js-stats1

three-js-stats2

three-js-stats3

Here’s how to initialize it
function initDebug() {

    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '0px';
    document.getElementById('stats').appendChild(stats.domElement);

    //for debuging stats (update is a bit less frequent than using the update function)
    interval = setInterval(updateDebugInfo, 50);
}

Then just update it every frame when you call your render loop

stats.update(renderer);

Three.js Inspector

You can also try debugging directly from the browser. Check out this nifty plugin for Chrome by by Jerome Etienne called Three.js Inspector. This will help you understand how demos are done and allow you to tweak parameters. Still in early development, but very cool.

Canvas debugging Tools in Popular Browsers

After a little digging, it’s really nice to see major browsers adopt the need for debegging the HTML5 canvas element. These can be used for any kind of webGL project whether it be a game or visualization running on three.js or any other webGL framework.

Here is an article that explains the Chrome version in more detail:
Chrome Canvas Inspector
and for firefox lovers such as myself I was excited to find out they have one too!
Canvas Debugger in Firefox Developer Tools

Share This

no comments yet but open for them

Post a Reply

Your email address will not be published. Required fields are marked *