Сглаживание не работает в Three.js

Я новичок в three.js и очень недавно начал работать с ним. Мне это очень нравится, и я создал невероятные вещи. Тем не менее, я не уверен, почему, но при настройке сглаживания на истину я не вижу разницы.

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

Я искал возможные решения, но я не могу найти или понять, почему это не работает. Есть ли что-то, что мне не хватает или нужно, чтобы сгладить работу?

EDIT:

Ссылки, которые помогли мне исправить эту проблему:  https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_normalmap2.html  https://github.com/mrdoob/three.js/tree/master/examples/js

Потребовалось некоторое рытье, но разработчики для three.js его охватили!

Ответы

Ответ 1

Имя свойства, которое вы используете в объекте аргумента конструктора WebGLRenderer, неверно. Согласно документации , имя свойства должно быть 'antialias', а не 'antialiasing'.

Я тестировал его в Google Chrome для Mac OS, и было заметно сглаживание в рендеринге ребер в демоверсии с вращающимся кубом.

Ответ 2

Свойство называется antialias и активируется следующим образом:

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

Не работает для всех браузеров, проверьте эту проблему для получения дополнительной информации.

Заметка:
Имущество НЕ общедоступно, поэтому установка антиалиасов после постройки выглядит так:

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

не будет работать.

Ответ 3

renderer = new THREE.WebGLRenderer({antialias: true}); - работает с моим настольным компьютером, но не работает с ноутбуками, я вижу ужасную лестницу.

Ответ 4

Если ваш компьютер не поддерживает по умолчанию WebGL AA, изменение размера рендеринга и ширины холста дает мне намного лучший результат, чем FXAA. Имейте в виду, что CSS содержит реальные значения ширины и высоты.

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

Ответ 5

Я считаю, что это зависит от браузера и системы, которую вы используете. Насколько я знаю, Firefox сейчас не поддерживает сглаживание. Также это может зависеть от вашей видеокарты и драйверов. Например, я не получаю сглаживание в Chrome на моем старом MacBook Pro в середине 2009 года, но у меня есть сглаживание на моей последней машине конца 2012 года.

Кроме того, вы можете использовать шейдер FXAA для выполнения сглаживания в качестве этапа постпроцессинга. Вы можете прочитать о постобработке здесь.