L’antialiasing non funziona in Three.js

Sono nuovo di three.js e ho iniziato a lavorarci molto recentemente. Mi piace davvero e ho creato cose incredibili. Tuttavia, non sono sicuro del perché ma quando si imposta antialiasing su true non vedo alcuna differenza.

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

Ho cercato le possibili soluzioni, ma non riesco a trovare o capire perché questo non funziona. C’è qualcosa che mi manca o che è necessario per far funzionare l’antialias?

MODIFICARE:

Collegamenti che mi hanno aiutato a risolvere questo problema: https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_normalmap2.html https://github.com/mrdoob/three.js/tree/master/examples / js

Ci sono voluti degli scavi ma gli sviluppatori di three.js ne hanno parlato!

Il nome della proprietà che si sta utilizzando nell’argomento object del costruttore WebGLRenderer è errato. Secondo la documentazione , il nome della proprietà dovrebbe essere 'antialias' , non 'antialiasing' .

L’ho provato su Google Chrome per Mac OS e il rendering di spigoli in una demo con un cubo rotante si è notevolmente attenuato.

La proprietà si chiama antialias e si triggers in questo modo:

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

Non funziona per tutti i browser, controlla questo problema per ulteriori informazioni.


Nota:
La proprietà NON è accessibile al pubblico, quindi impostare gli antialias dopo la costruzione in questo modo:

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

non funzionerà.

renderer = new THREE.WebGLRenderer ({antialias: true}); – Funziona con il mio desktop comp, ma non funziona con i laptop posso vedere scale orribili

Nel caso in cui il tuo computer non supporti il ​​default WebGL AA, il ridimensionamento delle dimensioni del renderer e della larghezza del canvas mi dà un risultato molto migliore di FXAA. Tenete presente che il CSS mantiene i valori reali di larghezza e altezza.

 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 

Credo che ciò dipenda dal browser e dal sistema che stai utilizzando. Per quanto ne so, Firefox non supporta l’antialiasing proprio ora. Inoltre potrebbe dipendere dalla tua scheda grafica e dai driver. Ad esempio, non ho antialiasing in Chrome sul mio vecchio MacBook Pro a metà del 2009, ma ottengo antialiasing sulla mia nuova macchina della fine del 2012.

Inoltre, si può prendere in considerazione l’utilizzo dello shader FXAA per eseguire l’antialiasing come fase di post-elaborazione. Puoi leggere di poscanvasborazione qui .