Warning: mysqli_query(): MySQL server has gone away in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 1873

Warning: mysqli_query(): Error reading result set's header in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 1873

Warning: mysqli_real_connect(): (HY000/2002): Connection refused in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 1534

Warning: mysqli_num_fields() expects parameter 1 to be mysqli_result, boolean given in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 3083

Notice: W3_Db was called incorrectly. W3_Db must set a database connection for use with escaping. Please see Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041

Warning: mysqli_real_connect(): (HY000/2002): Connection refused in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 1534

Warning: mysqli_num_fields() expects parameter 1 to be mysqli_result, boolean given in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 3083

Notice: W3_Db was called incorrectly. W3_Db must set a database connection for use with escaping. Please see Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041
Notice: W3_Db was called incorrectly. W3_Db must set a database connection for use with escaping. Please see Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041

Warning: mysqli_real_connect(): (HY000/2002): Connection refused in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 1534

Warning: mysqli_num_fields() expects parameter 1 to be mysqli_result, boolean given in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 3083
class="single single-post postid-1918 single-format-standard inheader-menu no-pageheader internal-page ">

Skip to Content

Debugging Three.js

|Three.js|Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041
http://benchung.com/debugging-three-js/#respond" rel="bookmark" title="Comments for Debugging 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


Notice: W3_Db was called incorrectly. W3_Db must set a database connection for use with escaping. Please see Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041

Share This


Notice: W3_Db was called incorrectly. W3_Db must set a database connection for use with escaping. Please see Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041

Notice: W3_Db was called incorrectly. W3_Db must set a database connection for use with escaping. Please see Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041

Warning: mysqli_real_connect(): (HY000/2002): Connection refused in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 1534
no comments yet but open for them

Post a Reply

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


Notice: W3_Db was called incorrectly. W3_Db must set a database connection for use with escaping. Please see Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041

Notice: W3_Db was called incorrectly. W3_Db must set a database connection for use with escaping. Please see Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041

Warning: mysqli_real_connect(): (HY000/2002): Connection refused in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 1534

Warning: mysqli_num_fields() expects parameter 1 to be mysqli_result, boolean given in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 3083

Notice: W3_Db was called incorrectly. W3_Db must set a database connection for use with escaping. Please see Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041

Notice: W3_Db was called incorrectly. W3_Db must set a database connection for use with escaping. Please see Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041

Warning: mysqli_real_connect(): (HY000/2002): Connection refused in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 1534

Warning: mysqli_num_fields() expects parameter 1 to be mysqli_result, boolean given in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 3083