LINUX.ORG.RU

Алгоритмическая проблема с WebGL, BabylonJS

 


0

1

Простая задачка - сетка бесконечно надвигается на зрителя. Простейший вариант реализации это i = 0; i < 5; i++

То есть когда сетка прошла 5 пикселей по оси Z в сторону зрителя срабатывает переключатель Z = 0 снова.

И все бы хорошо. Но тут это заметно, что сетка как-то рванула.

Очевидно такой рывок будет заметен при любом резком изменении позиции сетки.

Вообще эта задачка допускает два варианта решения. Алгоритмический или средствами BabylonJS

На мой взгляд алгоритмический вариант состоит в том, что-бы создавать 2 сетки. 1-ю видно, вторую нет. Когда 1-я уходит из поля зрения за ней подстраивается вторая.

Но я подозреваю что это элементарная задача с tiled background и вариантов решения тут море.

Подкиньте известные Вам варианты решений.

★★
Ответ на: комментарий от responseerr

Предлагать другие фреймворки не вариант.

Во первых наивно полагать, что разрабы BabylonJS упустили, что-то что реализовали в three.js )

Во вторых хотелось бы не отстраненный общий совет

mirek ★★
() автор топика
Ответ на: комментарий от anonymous

попробуй i = 0; i < 4; i++

В общем-то так может быть. Но если двигаться в этом направлении то останется появление нового ряда сетки вдали

То есть с натяжкой проходной вариант)

mirek ★★
() автор топика
Последнее исправление: mirek (всего исправлений: 1)
Ответ на: комментарий от mirek

наложи на тот сёрфейс, где рисуешь сетки, прозрачный градиент с всё увеличивающейся прозрачностью к концу сетки, так, чтобы новый ряд был 100% прозрачным.

другой вариант - увеличить размер сетки до того, пока неопределённость последнего ряда не размажется интерполяцией. вот ещё: https://en.wikipedia.org/wiki/Mipmap

если возможно, то просто увеличь размер сетки, чтобы в любой ситуации она вылезала за пределы области отрисовки

посмотри как делают нормальные люди. проектов с открытым исходным кодом, отрисовывающих сетки полно

anonymous
()
Ответ на: комментарий от mirek

Еще интересная проблема с мерцанием. При чем приятель делал эту сетку на three js И у него та же проблема.

Сетка приводится в движение кодом

scene.registerBeforeRender(function() {
ground.position.x += 0.02;
});

Мерцание особенно проявляется когда сетка двигается прямо на зрителя. Если ее повернуть под углом то мерцание наблюдается в одну сторону, а сетка перемещается в другую

От источников света это никак не зависит. Их вообще можно не ставить.

Мерцания нет вообще если сетку натянуть на цилиндр. Но на плоскости оно есть. Просто интересна природа его возникновения

mirek ★★
() автор топика
Ответ на: комментарий от mirek

может какой-то неоптимальный режим сглаживания выбран?

вообще, было бы НАМНОГО лучше, если бы ты с самого начала хотя бы скриншот приложил, а ещё лучше - скринкаст, где бы можно было наблюдать проблему.

anonymous
()
Ответ на: комментарий от anonymous

может какой-то неоптимальный режим сглаживания выбран?

Все перепробовал. Мерцание особенно заметно только под углом когда сетка двигается прямо на зрителя

было бы НАМНОГО лучше, если бы ты с самого начала хотя бы скриншот приложил

А вот кстати BabylonJS позволяет сразу все показывать в их песочнице https://playground.babylonjs.com/#J66LMX#4

Но тут кто-то пытался подвязать к моему коду аппаратное сглаживание nVidia. И у меня как раз видеокарта nVidia. Но в итоге мерцание еще больше заметно)

При чем BabylonJS не правильно сам определяет видеокарту. Но ТАКОЕ должно бы работать и на интегрированной графике.

Приглядываясь я понял, что там свет двигается по сетке влево или вправо в зависимости от угла сетки. Эти волны света и создают мерцание

mirek ★★
() автор топика
Ответ на: комментарий от mirek

рывок

https://playground.babylonjs.com/#J66LMX#6

рывок больше не видно

волны света

а от «мерцания», увы, избавиться не получится. этот эффект называется «муар», он получается в результате наложения линий сетки на «пикселы монитора»: https://en.wikipedia.org/wiki/Moir%C3%A9_pattern

попробуй просто приподнять камеру, чтобы уменьшить плотность линий сетки.

аппаратное сглаживание

если не используется hdr pipeline, то msaa (pipeline.samples) по умолчанию равен 4 - это всяко лучше, чем fxaa. можешь поэкспериментировать и поставить msaa = 16 или 32.

anonymous
()
Ответ на: комментарий от anonymous

этот эффект называется «муар», он получается в результате наложения линий сетки на «пикселы монитора

Тоже самое ответили разрабы BabylonJS. Может и так.

Я все же записал видео с другим углом и искусственно поднял контрастность https://www.youtube.com/watch?v=v1XMNDd_4Bc

На видео видно, что освещение создает рябь перемещаясь в этом примере справа на лево

mirek ★★
() автор топика
Ответ на: комментарий от mirek

Выглядит будто у тебя используется fxaa. Либо вообще отсутствует какое-либо сглаживание. Вот моя запись, где на первых 5 секундах - просто fxaa, на вторых 5 секунах - строчка new BABYLON.FxaaPostProcess("fxaa", 1, camera); закомментирована, и на последних 5 секундах - дополнительно включена градиентная прозрачность материала: https://0x0.st/H3oQ.mp4 (видео в браузере не будет проигрываться, так как закодировано libx264rgb с форматом пиксела rgb24, браузеры такое не понимают).

anonymous
()
Ответ на: комментарий от anonymous

Выглядит будто у тебя используется fxaa

Вообще я еще не разобрался как youtube добавляет видео. Ранее он вначале также добавлял мое видео с качеством 480p. Но через час приблизительно он его поднимал.

Ну хотя все равно можно получить представление

mirek ★★
() автор топика
Ответ на: комментарий от anonymous

Посмотрел в разных ОС пример и сравнил с твоим видео. Одинаково все равно мельтешит. И от ОС это никак не зависит. Но на твоем видео вторых 5 секунд и с градиентной прозрачностью чище

mirek ★★
() автор топика
Ответ на: комментарий от mirek

как уже говорил, попробуй поэкспериментировать с pipeline, раскомментируй строки и попробуй поменять значение samples

посмотри ещё на другом компе или телефоне. хотя чем это поможет? :)

anonymous
()