Skip to Content

Antialiasing in Three.js

|Three.js|0 Comments


One of the hurdles of 3D is aliasing (jagged edges when rendering). Depending on your hardware and browser, three.js has a built in function to help with this (top left: without antialiasing, top right: with antialiasing). Here is the code to enable it:

renderer2 = new THREE.WebGLRenderer({ antialias: true });

The full .js code below…

var scene, camera, renderer, geometry, material, cube, group;

var scene2, camera2, renderer2, geometry2, material2, cube2, group2;

init();
render();

function init() {

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );
    camera.position.z = 5;

    //set background to have transparency - alpha: true
    renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.getElementById("viewport1").appendChild(renderer.domElement);

    geometry = new THREE.CubeGeometry(1, 1, 1);
    material = new THREE.MeshBasicMaterial({
    wireframe: true,
    color: 'black'
    });
    cube = new THREE.Mesh(geometry, material);
//    scene.add(cube);

    group = new THREE.Object3D();
    group.add(cube);
    scene.add( group );

//    2-----------------------------

    scene2 = new THREE.Scene();

    camera2 = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );
    camera2.position.z = 5;

    //set background to have transparency - alpha: true
    renderer2 = new THREE.WebGLRenderer({ alpha: true, antialias: true });
    renderer2.setSize(window.innerWidth, window.innerHeight);

    document.getElementById("viewport2").appendChild(renderer2.domElement);

    geometry2 = new THREE.CubeGeometry(1, 1, 1);
    material2 = new THREE.MeshBasicMaterial({
    wireframe: true,
    color: 'black'
    });
    cube2 = new THREE.Mesh(geometry2, material2);

    group2 = new THREE.Object3D();
    group2.add(cube2);
    scene2.add( group2 );
}

function render() {
    requestAnimationFrame(render);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);

    cube2.rotation.x += 0.01;
    cube2.rotation.y += 0.01;
    renderer2.render(scene2, camera2);
}

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

Share This

Related Tags


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