javascript - Unusual antialias while using basic texture material in three.js - Stack Overflow

admin管理员组

文章数量:1392101

In the following code I am setting up a very basic scene with an orthographic camera and a canvas mapped as a texture to a plane geometry.

I put some white text on to a transparent canvas, and if I use canvas.toDataURL(), the effect isn't present.

However, when I apply the canvas contents to a material as a texture and render it within a super-standard 2d scene, a black line outlines my text, probably the result of weird antialias stuff happening. In this example, the renderer clear color, material, and text are all pure white.

Here is a screenshot:

var camera = new THREE.OrthographicCamera(window.innerWidth / - 2,
                                          window.innerWidth / 2, 
                                          window.innerHeight / 2, 
                                          window.innerHeight / - 2, 0, 10);

var scene = new THREE.Scene();

canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;

var context = canvas.getContext('2d');

context.fillStyle = "white";
context.font = "bold 72px Arial";
context.fillText("Zibri", 50, 100);        

var texture = new THREE.Texture(canvas);
var geometry = new THREE.PlaneGeometry(canvas.width, canvas.height);

texture.needsUpdate = true;

var material = new THREE.MeshBasicMaterial({ color: 0xffffff, map: texture, transparent: true });
var mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

renderer = new THREE.WebGLRenderer({ antialias: false });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0xffffff)

document.body.appendChild( renderer.domElement );

camera.lookAt(scene.position);
renderer.render(scene, camera);

In the following code I am setting up a very basic scene with an orthographic camera and a canvas mapped as a texture to a plane geometry.

I put some white text on to a transparent canvas, and if I use canvas.toDataURL(), the effect isn't present.

However, when I apply the canvas contents to a material as a texture and render it within a super-standard 2d scene, a black line outlines my text, probably the result of weird antialias stuff happening. In this example, the renderer clear color, material, and text are all pure white.

Here is a screenshot:

var camera = new THREE.OrthographicCamera(window.innerWidth / - 2,
                                          window.innerWidth / 2, 
                                          window.innerHeight / 2, 
                                          window.innerHeight / - 2, 0, 10);

var scene = new THREE.Scene();

canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;

var context = canvas.getContext('2d');

context.fillStyle = "white";
context.font = "bold 72px Arial";
context.fillText("Zibri", 50, 100);        

var texture = new THREE.Texture(canvas);
var geometry = new THREE.PlaneGeometry(canvas.width, canvas.height);

texture.needsUpdate = true;

var material = new THREE.MeshBasicMaterial({ color: 0xffffff, map: texture, transparent: true });
var mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

renderer = new THREE.WebGLRenderer({ antialias: false });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0xffffff)

document.body.appendChild( renderer.domElement );

camera.lookAt(scene.position);
renderer.render(scene, camera);

• javascript
• three.js
• webgl

Share Improve this question Follow edited Sep 25, 2013 at 22:58 user128511 asked Sep 24, 2013 at 21:26 Jack FranzenJack Franzen 77877 silver badges2121 bronze badges 3

• github./mrdoob/three.js/issues/3816 Has been reported before but no answer as of yet. I have the same problem but instead of searching and trying i am just using a somewhat higher resolution and as i have dark text, it does not matter that much. But sorry, can't help. Looking for a fix, though, too ;) – GuyGood Commented Sep 25, 2013 at 8:30
• The best answer I have yet is just to set the canvas to not use any anti aliasing or alpha values. Also if you set your meshes and textures to have even widths and heights it can help. Also also, in chrome you can use css on your base canvas to set which type of antialiasing should be used when using fonts. you can refer to the super-long ment in this for help fixing that chrome stuff. groups.google./a/chromium/forum/#!topic/chromium-bugs/… – Jack Franzen Commented Sep 26, 2013 at 22:28
• Try texture.magFilter = THREE.NearestFilter; texture.minFilter = THREE.NearestFilter; texture.generateMipmaps = false; – WestLangley Commented Sep 28, 2013 at 1:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I've also been struggling with this problem, WestLangley's solution came part way to fixing the issue but left the rendered text with very poorly antialiased edges. After extensive research, I've e up with a solution that I'm happy with which I've outline here.

Before drawing the text, fill the canvas with the same colour as the text but with alpha set to 0.01

context.fillStyle = 'rgba(255,255,255,0.01)';
context.fillRect(0,0,canvas.width,canvas.height);

and then use the material's alphaTest property to discard pixels of this opacity:

var material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    map: texture,
    transparent: true,
    alphaTest:0.01
});

finally, set the texture map's premultiplyAlpha value to false:

texture.map.premultiplyAlpha = false;
texture.map.needsUpdate = true;

本文标签： javascriptUnusual antialias while using basic texture material in threejsStack Overflow