Вопрос по webgl, render, three.js, javascript, antialiasing – Сглаживание не работает в 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 рассмотрели это!

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

Ваш Ответ

5   ответов
4

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

96

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

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

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

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

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

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

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

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

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

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

Замечания:

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

renderer.antialias = true; // 
Это был ключ для меня! Спасибо за эту заметку spacorum
Точно @noviewpoint, это значение может быть установлено только при инициализации рендерера. Wilt
Спасибо за примечание. Я предполагаю, что это также причина, почему сглаживание в ТРИ можетдинамически включаться и выключаться на активном рендере, в то время как свойства, подобные setSize, могут динамически изменяться после построения рендерера. noviewpoint

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