Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 10
Вопрос: добавит ли эта серия статей что-нибудь к классическому туториалу?
Есть ли смысл следить за продолжением?
Есть ли смысл следить за продолжением?
Мы будем использовать один буфер для всех объектов и соответственно всех вершин и индексов. В дальнейшем, если будет возможность использовать несколько буферов — тип фигуры будет находится в самом объекте примитива. (Если такая возможность уже есть — напишите, пожалуйста, в комментариях.)
Не понял. Вы спрашиваете, есть ли возможность использовать разные буфера для разных объектов или их атрибутов? Конечно, есть, с незапамятных времён есть в OpenGL. Основы этого замечательного API я бы Вам порекомендовал изучить более обстоятельно прежде, чем начинать писать свой движок (а тем более учить других):
1.
gl.vertexAttribPointer вызываете и в attributeSetup, и в отрисовке. Определитесь уж, пожалуста. А что самое печальное, так это отсутствие gl.bindBuffer перед ним, так что Вы полагаетесь на то, что со времён вызова initBuffers ничего не поменялось.2.
gl.enableVertexAttribArray так вообще в трёх разных местах (attributeSetup, initBuffers, initProgram). На всякий пожарный, да?3. Зачем вообще трогаете
botuPositionAttr в initBuffers? На этот момент Вы уже вызвали initProgram, который эту позицию определил.4 К чему такие выкрутасы в шедере:
max(botuPosition.x,(-1.0) * botuPosition.x)?
Никого не учу. В данном случае, главное — идея, я же не делаю коммерческий продукт. Перед тем как публиковаться идею реализовал, ну почти полностью, всё кроме общей карты ))). Естественно, если интерес останется, после полной реализации на данном этапе буду убирать всё лишнее и добавлять новое.
1.attributeSetup — данный метод — «заточка» на будущее, если вдруг мне надо будет подвязать атрибут при этом ничего не меняя или сделав минимум изменений в самом Scene. Пока я этот метод не вызываю.
2. enableVertexAttribArray по поводу attributeSetup уже написал, по поводу initProgram — обшибся… Я ещё добавлял буфер с матрицей раскраски, из «стандартного урока»… Забыл убрать. На самом деле, пока не знаю, как лучше добавить атрибуты.
3. Осталось от отладки. Исправлю.
4. А я не знал, что это выкрутасы ))).
По поводу самого вопроса «есть ли возможность» — речь идет о загрузки дополнительных вершин… Я понимаю, что есть STATIC_DRAW, есть и другие способы и обойтись можно 1 буфером.
Как я понял по вашему комменту способ всегда был и есть. Меня просто немного смутило
«When a buffer is bound to a target, the previously bound buffer for that target is automatically unbound.».
1.attributeSetup — данный метод — «заточка» на будущее, если вдруг мне надо будет подвязать атрибут при этом ничего не меняя или сделав минимум изменений в самом Scene. Пока я этот метод не вызываю.
2. enableVertexAttribArray по поводу attributeSetup уже написал, по поводу initProgram — обшибся… Я ещё добавлял буфер с матрицей раскраски, из «стандартного урока»… Забыл убрать. На самом деле, пока не знаю, как лучше добавить атрибуты.
3. Осталось от отладки. Исправлю.
4. А я не знал, что это выкрутасы ))).
По поводу самого вопроса «есть ли возможность» — речь идет о загрузки дополнительных вершин… Я понимаю, что есть STATIC_DRAW, есть и другие способы и обойтись можно 1 буфером.
Как я понял по вашему комменту способ всегда был и есть. Меня просто немного смутило
«When a buffer is bound to a target, the previously bound buffer for that target is automatically unbound.».
> В данном случае, главное — идея, я же не делаю коммерческий продукт.
Идея-то создать 3d движок на javascript отнюдь не нова… Вы не подумайте, я не против, если хабру полезно почитать Ваш подход. Просто если уж подходить к написанию статьи тут, то, мне кажется, качество кода нужно держать на высоте.
> А я не знал, что это выкрутасы ))).
Так зачем всё-таки брать по модулю и отдельно для каждой компоненты?
> «When a buffer is bound to a target, the previously bound buffer for that target is automatically unbound.».
Так и есть, Вы не смущайтесь. Буффер и не должен быть подключён во время отрисовки. Всё, что определяет входную геометрию, заключено в
Идея-то создать 3d движок на javascript отнюдь не нова… Вы не подумайте, я не против, если хабру полезно почитать Ваш подход. Просто если уж подходить к написанию статьи тут, то, мне кажется, качество кода нужно держать на высоте.
> А я не знал, что это выкрутасы ))).
Так зачем всё-таки брать по модулю и отдельно для каждой компоненты?
> «When a buffer is bound to a target, the previously bound buffer for that target is automatically unbound.».
Так и есть, Вы не смущайтесь. Буффер и не должен быть подключён во время отрисовки. Всё, что определяет входную геометрию, заключено в
gl.vertexAttribPointer. Когда вызываете эту функцию, то соответствующий слот входов шейдера получает ассоциацию с неким участком видеопамяти (с дополнительной семантикой типов). Эта функция зависит от текущего подключенного буффера. А когда вы эти слоты привязали — можете и отключить буффер вовсе.
Интересно, как будет развиваться серия статей: движение в сторону интерактива, демо-сцены, игры, сугубо трехмерных технологий (тени, материалы и пр.). Автор?
habrahabr.ru/post/227285/ — это вторая статья
habrahabr.ru/post/227415/ — это третья статья, пока финальная.
Дальнейшее развитие — это прежде всего работа над ошибками. И всё остальное уже прийдёт после того, как чуть больше изучу тему webgl.
Если абстрагироваться от ошибок, финальной частью данной серии я бы поставил — размещение объектов на карте. Как самый первый вариант реализации, который приходит в голову — это выбор примитива (описаны в 3-ей статье), может через список, может через кнопку — ввод минимальных данных (размеры, радиус) и размещение на карте — canvas 2d…
Я чувствую меня тут повесят ))) Но зная про матрицу проекции, я бы при перемещении по карте при повороте персонажа — разворачивал бы всю карту, ну на самом деле этот вариант кажется самым простым, только не самым производительным ))). Не буду я так делать, честное слово!
habrahabr.ru/post/227415/ — это третья статья, пока финальная.
Материал рассчитан на начинающий уровень, для тех, кто прочитал основы webgl и хочет попробовать начать работать. Таких как я.
Дальнейшее развитие — это прежде всего работа над ошибками. И всё остальное уже прийдёт после того, как чуть больше изучу тему webgl.
Если абстрагироваться от ошибок, финальной частью данной серии я бы поставил — размещение объектов на карте. Как самый первый вариант реализации, который приходит в голову — это выбор примитива (описаны в 3-ей статье), может через список, может через кнопку — ввод минимальных данных (размеры, радиус) и размещение на карте — canvas 2d…
Я чувствую меня тут повесят ))) Но зная про матрицу проекции, я бы при перемещении по карте при повороте персонажа — разворачивал бы всю карту, ну на самом деле этот вариант кажется самым простым, только не самым производительным ))). Не буду я так делать, честное слово!
Подправил код с учетом замечаний. Плюс — убрал создание и компиляцию шейдеров в инициализацию холста. До этого она была при обрисовке (у меня на компе не тормозила и так, теперь очень быстро работает и на слабом рабочем ...)
Добавил немного комментариев.
Добавил немного комментариев.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Собственный движок WebGL. Статья №1. Холст