Вопрос по javascript, render, webgl, antialiasing, three.js – Сглаживание не работает в Three.js

21

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

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

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

РЕДАКТИРОВАТЬ:

Ссылки, которые помогли мне решить эту проблему: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 рассмотрели это!

Я работал с рендерером WebGL. Я не уверен, будет ли это работать на холсте. zaidi92
Я потратил весь день, чтобы выяснить, в моей системе, в настройках Chrome, я не проверил «разрешить аппаратное ускорение, когда оно доступно», и альта, сглаживание теперь работает. Gavin Simpson
Боюсь, я не понимаю, как эти ссылки привели вас к решению. Для меня сглаживание не работает в Chrome и работает в Firefox. sandover
это должно работать на холсте? expiredninja

Ваш Ответ

5   ответов
96

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

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

@juagicre обновленная ссылка на документацию, спасибо. Tushar Gupta
@TusharGupta ссылка на вашу документацию больше не существует, может быть, вы предпочитаете указывать на:threejs.org/docs/index.html#api/en/renderers/WebGLRenderer juagicre
кроме того этостраница черного / белого списка интересно. Например, если вы используете Chrome на Mac, вы увидите, что сглаживание отключено для всех графических процессоров. Fluxine
16

Свойство называетсяantialias и активируется так:

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

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

Примечание:
Свойство НЕ является общедоступным, поэтому установка сглаживания после строительства выглядит следующим образом:

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

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

Это был ключ для меня! Спасибо за эту заметку spacorum
Спасибо за примечание. Я предполагаю, что это также причина, по которой сглаживание в THREE нельзя динамически включать и выключать на активном рендере, в то время как свойства, подобные setSize, могут динамически изменяться после построения рендерера. noviewpoint
Точно @noviewpoint, это значение может быть установлено только при инициализации рендерера. Wilt
3

изменение размера рендерера и ширины холста дает мне гораздо лучший результат, чем 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
SetSize на самом деле имеет параметр updateStyle, и я сделал этот шаблон работать с помощью простого вызова, какrenderer.setSize(width * 2, height * 2, false);, но тогда установка фактических размеров с помощью CSS также необходима. nnyby
4

- работает с моим настольным компьютером, но не работает с ноутбуками, я вижу ужасную лестницу

0

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

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

На самом деле Firefox (последний) поддерживает сглаживание. Вы должны попробовать свой код на других машинах, прежде чем прибегнуть к шейдеру FXAA. gaitat
В настоящее время я работаю в Chrome. Я немного покопался и нашел файлы three.js для FXAA, но без изменений. Я использовал этот пример в качестве ссылки,github.com/mrdoob/three.js/blob/master/examples/..., но я до сих пор не вижу изменений. Там, наверное, что-то простое, что я скучаю, но это все новое для меня. zaidi92

Похожие вопросы