web-dev-qa-db-fra.com

L'anticrénelage ne fonctionne pas dans Three.js

Je suis nouveau sur three.js et j'ai commencé à travailler avec lui récemment. Je l'apprécie vraiment et j'ai créé des choses incroyables. Cependant, je ne sais pas pourquoi, mais en définissant l'anticrénelage sur true, je ne vois aucune différence.

 renderer = new THREE.WebGLRenderer({ antialiasing: true });

J'ai cherché des solutions possibles, mais je n'arrive pas à trouver ou à comprendre pourquoi cela ne fonctionne pas. Y a-t-il quelque chose qui me manque ou dont j'ai besoin pour que l'antialiasing fonctionne?

ÉDITER:

Liens qui m'ont aidé à résoudre ce problème: https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_normalmap2.htmlhttps://github.com/ mrdoob/three.js/tree/master/examples/js

Il a fallu creuser, mais les développeurs de three.js l'ont couvert!

javascriptthree.jswebglrenderantialiasing
22
zaidi92

Le nom de propriété que vous utilisez dans l'objet argument du constructeur WebGLRenderer est incorrect. Selon le documentation , le nom de la propriété doit être 'antialias', pas 'antialiasing'.

Je l'ai testé dans Google Chrome pour Mac OS et il y avait un lissage notable dans le rendu des bords dans une démo avec un cube tournant.

96
iBorg

La propriété s'appelle antialias et elle est activée comme ceci:

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

Ne fonctionne pas pour tous les navigateurs, vérifiez ce problème pour plus d'informations.

Remarque:
La propriété n'est PAS accessible au public, donc définissez des antialias après la construction comme ceci:

renderer.antialias = true; // <-- DOES NOT WORK

ne fonctionnera pas.

16
Wilt

renderer = new THREE.WebGLRenderer ({antialias: true}); - fonctionne avec mon ordinateur de bureau, mais ne fonctionne pas avec les ordinateurs portables, je peux voir des escaliers horribles

4
potomek

Dans le cas où votre ordinateur ne prend pas en charge WebGL AA par défaut, le redimensionnement de la taille du rendu et de la largeur du canevas me donne un bien meilleur résultat que FXAA. Remarquez que le CSS contient les valeurs réelles de largeur et de hauteur.

var w,h = [your prefs];

renderer.setSize(window.innerWidth*2, window.innerHeight*2);

renderer.domElement.style.width = w;
renderer.domElement.style.height = h;
renderer.domElement.width = w*2
renderer.domElement.height = h*2
3
MrX

Je pense que cela dépend du navigateur et du système que vous utilisez. Pour autant que je sache, Firefox ne prend pas du tout en charge l'anticrénelage pour le moment. Cela peut également dépendre de votre carte graphique et de vos pilotes. Par exemple, je n'obtiens pas d'anticrénelage dans Chrome sur mon ancien MacBook Pro mi-2009, mais j'obtiens l'anticrénelage sur ma nouvelle machine fin 2012.

En outre, vous pouvez envisager d'utiliser le shader FXAA pour effectuer l'anticrénelage en tant qu'étape de post-traitement. Vous pouvez lire sur le post-traitement ici .

0
angryobject