L'anticrénelage pas de travail dans Three.js

Je suis nouvelle three.js et ont commencé à travailler avec beaucoup récemment. J'ai vraiment beaucoup de plaisir et j'ai créé des choses incroyables. Cependant, je ne suis pas sûr pourquoi, mais lors de la configuration de l'anticrénelage de vrai, je ne vois pas de 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. Est-il quelque chose que je suis en manque ou le besoin afin d'obtenir de l'anticrénelage de travail?

EDIT:

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

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

  • J'ai peur de ne pas comprendre comment ces liens qui vous a conduit à une solution. Pour moi, l'anti-aliasing échoue dans Chrome, et fonctionne dans Firefox.
  • est-il censé travailler, dans la toile?
  • J'avais travaillé avec le WebGL moteur de rendu. Je ne sais pas si il fonctionne sur la toile.
  • M'a pris tout l'après-midi à la figure sur mon système dans les paramètres de google chrome, je n'avais pas coché la case "permettre l'accélération matérielle si disponible", et à l'alto, l'antialiasing est maintenant opérationnel.
InformationsquelleAutor zaidi92 | 2013-06-20
  1. 96

    Le nom de la propriété que vous utilisez dans l'argument de l'objet de la WebGLRenderer constructeur est incorrect. Selon le la 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 notable de lissage dans le rendu des contours dans une démo avec un spinning cube.

    InformationsquelleAutor iBorg
  2. 16

    La propriété est appelé antialias et Il est activé comme ceci:

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

    Ne fonctionne pas pour tous les navigateurs, cochez cette question pour plus d'informations.

    Remarque:

    La propriété n'est PAS accessible au public, le choix de lisser après la construction comme ceci:

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

    ne fonctionnera pas.

    • Merci pour la note. Je suppose que c'est aussi la raison pourquoi l'anti-aliasing dans les TROIS ne peuvent pas être dynamiquement sous tension et hors tension sur un actif convertisseur, tandis que les propriétés comme setSize peut être changé dynamiquement après la construction du moteur de rendu.
    • exactement, cette valeur ne peut être définie lors de l'initialisation du moteur de rendu.
    • Cela a été la clé pour moi! Merci pour cette remarque
    InformationsquelleAutor Wilt
  3. 4

    renderer = new TROIS.WebGLRenderer( { antialias: true } ); - fonctionne avec mon ordinateur de bureau comp, mais ne fonctionne pas avec les ordinateurs portables, je peux voir la terrible escalier

    InformationsquelleAutor potomek
  4. 3

    Dans le cas où votre ordinateur ne supporte pas par défaut WebGL AA, le redimensionnement, le moteur de rendu de la taille et de la largeur du canevas me donne de bien meilleurs résultats que le FXAA. L'esprit vous le CSS détient les vrais valeurs de largeur et 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
    • setSize en fait, a un updateStyle paramètre, et j'ai fait ce travail de modèle avec juste un appel comme renderer.setSize(width * 2, height * 2, false);, mais de définir ensuite les dimensions réelles CSS est toujours nécessaire.
    InformationsquelleAutor MrX
  5. 0

    Je crois que cela dépend du navigateur et de système que vous utilisez. Autant que je sache, Firefox ne prend pas en charge l'anticrénelage dès maintenant à tous. Aussi, il peut être la personne à charge sur votre carte graphique et pilotes. Par exemple, je n'ai pas l'antialiasing dans Chrome sur mon vieux MacBook Pro mi-2009, mais je ne reçois anticrénelage sur mon nouvelle la fin de 2012 de la machine.

    Aussi, vous pouvez envisager d'utiliser le FXAA shader pour faire du lissage comme un post-traitement de l'étape. Vous pouvez lire à ce sujet le post-traitement ici.

    • En fait Firefox (dernière version) prend en charge lissage automatique. Vous devriez essayer de votre code sur d'autres machines avant de recourir à la FXAA shader.
    • Je suis actuellement en train de travailler dans google chrome. J'ai fait quelques recherches et trouvé l'three.js les fichiers pour le FXAA, mais toujours pas de changements. J'ai été en utilisant cet exemple comme référence, github.com/mrdoob/three.js/blob/master/examples/..., mais je ne vois toujours pas de changements. Il y a probablement quelque chose de simple qui me manque, mais c'est tout nouveau pour moi.
    InformationsquelleAutor angryobject