WebGL перемещение объекта, изменение вершин в VAO

SkyWeb · Регистрация: 04.04.2015

Author24 — интернет-сервис помощи студентам

Всем добрый вечер. Можете подсказать, постараюсь как можно яснее описать свой вопрос.
Я рисую кубик, перемещаю его, например по оси z верх. Тут у меня сложностей нет, использую матрицу модели, передаю ее в шейдер как иниформу. Весь кубик перемещается вверх.

Я захотел сделать перемещение не всего кубика, а поднять только одно его ребро, или изменить только 1 вершину. И не понимаю как это сделать.

Javascript

this.attribs = {
  vertexs: [-1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, .....],
  colors: [1.0,0.0,0.0 , 1.0,0.0,0.0 , 1.0,0.0,0.0 , .....],
  texcoord: [0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, .....],
  indices: [0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, .....],
};

Перед началом отрисовки, я прохажусь по всему этому, создаю vbo и все записываю в vao.
Вот как мне сделать, что при клике на кнопку менялась только одна верщина.

Javascript

1 2	this.attribs.vertexs[0] = -2 //первый клик this.attribs.vertexs[0] = -3 //второй клик

// и т.д.
Я пробовал при отрисовке кажого кадра заново создавать vao и vbo, работает, но производительность в таком случае падает просто ниже плинтуса. Можно ли как-то изменить vao?

Пробовал смотреть через консоль, но все что получаю.

Javascript

1 2	console.dir(obj.vao); VM553:1 WebGLVertexArrayObject

Решил записать видео, там 2 минуты, наглядно показываю что я имею ввиду https://yadi.sk/i/PcG5WKdk8bBpVg

Заранее всем спасибо за помощь.

@_Develop · 27.03.2019, 01:54

С bufferSubData() можно изменить только часть буфера, VAO при этом менять не надо.

SkyWeb · 27.03.2019, 07:47 **[ТС]**

Спасибо, на днях почитаю что такое bufferSubData.

Добавлено через 5 часов 3 минуты
Почитал про bufferSubData, вообще не понял как он работает.

Пример кода:

Javascript

// Аттрибуты
this.attribs = {
    vertexs: [-1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, ...],
    colors: [1.0,0.0,0.0 , 1.0,0.0,0.0 , 1.0,0.0,0.0 , 1.0,0.0,0.0, ...],
    texcoord: [0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, ...],
    indices: [0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, ...],
};
 
// Создание буферов и запись в VAO
this.vao = gl.createVertexArray();
gl.bindVertexArray(this.vao);
for (var attrib in this.attribs) {
    this.createBuffer(attrib);
}
gl.bindVertexArray(null);
gl.bindBuffer(gl.ARRAY_BUFFER,null);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,null);
 
// Создание буферов
createBuffer (attrib) {
    var buffer = gl.createBuffer();
    if (attrib == 'indices') {
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this.attribs[attrib]), gl.STATIC_DRAW);
    } else {
        var itemSize = attrib == 'texcoord' ? 2 : 3 ;
        var loc = Object.keys(this.attribs).indexOf(attrib);            
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.attribs[attrib]), gl.STATIC_DRAW);
        gl.bufferSubData(gl.ARRAY_BUFFER, 0, new Float32Array(this.attribs[attrib]));
        gl.vertexAttribPointer(loc, itemSize, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(loc);
        gl.bindBuffer(gl.ARRAY_BUFFER, null);
    }
}

Во всех примерах что я находил показывают как его создать. Сразу после gl.bufferData. Я так и сделал, что сделал вообще не понял, как этим пользоваться тоже. Может кто объяснить логику работы bufferSubData или дать ссылку на хороший пример.

@Antikl · 27.03.2019, 08:30

https://stackoverflow.com/ques... fersubdata

SkyWeb · 27.03.2019, 08:54 **[ТС]**

Верно ли я понимаю логику?
Чтобы во время отрисовки изменить аттрибуты (вершины), мне нужно:

Javascript

// 1. Забиндить нужный буфер 
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
 
// 2. Изменить нужное мне значение в массиве вершин
this.attribs[attrib][0] = -5;
 
// 3. Перезаписать этот буфер через buffersubdata
gl.bufferSubData(gl.ARRAY_BUFFER, 0, new Float32Array(this.attribs[attrib]));

@_Develop · 27.03.2019, 10:50

Сообщение от SkyWeb

3. Перезаписать этот буфер через buffersubdata

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

SkyWeb · 27.03.2019, 14:17 **[ТС]**

А как перезаписать только первое значение?, или например с 5 по 10 значение?

@snake32 · 27.03.2019, 15:51

SkyWeb,
https://www.khronos.org/regist... ubData.xml
Там всего 4 параметра, два из них offset и size как раз задают смещение и размер в байтах.
Как это правильно сделать на javaScript не знаю

@8Observer8 · 27.03.2019, 16:02

WebGLRenderingContext.bufferSubData()
https://developer.mozilla.org/... ferSubData

Javascript

var canvas = document.getElementById('canvas');
var gl = canvas.getContext('webgl');
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW);
gl.bufferSubData(gl.ARRAY_BUFFER, 512, data);

WebGL2:

Javascript

1	void gl.bufferSubData(target, dstByteOffset, ArrayBufferView srcData, srcOffset, length);

SkyWeb · 27.03.2019, 18:45 **[ТС]**

8Observer8, А Вас не затруднит пояснить что такое dstByteOffset, srcOffset, length.
И если возможно пару примеров этой строк, для замены только 1ого значения и например значений с 5 по 10.
Сейчас я просто делаю

Javascript

1	gl.bufferSubData(gl.ARRAY_BUFFER, 0, new Float32Array(this.attribs[attrib]));

Как я понимаю я перезаписываю весь массив. Хотя в нем я меняю только одну вершину. Перезаписывать весь массив - это трудоемкий процесс сильно влияющий на производительность?

@8Observer8 · 27.03.2019, 20:22

My Original Message in English

I do not understand what do you use: WebGL 1 or WebGL 2?

Сообщение от SkyWeb

А Вас не затруднит пояснить что такое dstByteOffset, srcOffset, length.

It is WebGL 2. Did you read the documentation? https://developer.mozilla.org/... ferSubData

WebGL 2 is analog of OpenGL 3 ES. You can read here in addition: http://docs.gl/es3/glBufferSubData

Сообщение от SkyWeb

gl.bufferSubData(gl.ARRAY_BUFFER, 0, new Float32Array(this.attribs[attrib]));

It is WebGL 1.

Translate Google Result:

Я не понимаю, что вы используете: WebGL 1 или WebGL 2?

Сообщение от SkyWeb

А Вас не затруднит пояснить что такое dstByteOffset, srcOffset, length.

Это WebGL 2. Вы читали документацию? https://developer.mozilla.org/... ferSubData

WebGL 2 является аналогом OpenGL 3 ES. Вы можете прочитать здесь дополнительно: http://docs.gl/es3/glBufferSubData

Сообщение от SkyWeb

gl.bufferSubData(gl.ARRAY_BUFFER, 0, new Float32Array(this.attribs[attrib]));

Это WebGL 1.

SkyWeb · 27.03.2019, 20:27 **[ТС]**

WEBGL2 у меня. Я переводил страницу через ХРОМ, ни особо понятно что передавать, что за параметры.

offset
Задает смещение в хранилище данных объекта буфера, где начнется замена данных, измеренное в байтах.

size
Определяет размер в байтах области хранилища данных, подлежащей замене.

Мне нужно делать как-то так?

Javascript

1
2
3

var offset = ???
var size = ???
gl.bufferSubData(gl.ARRAY_BUFFER, offset, size, new Float32Array(this.attribs[attrib]));

В байтах нужно указывать, как мне это сделать, как-то посчитать нужно? offset - это начало замещения, size - конец замещения?

@8Observer8 · 27.03.2019, 21:01

Сообщение от SkyWeb

где начнется замена данных, измеренное в байтах.

TypedArray.BYTES_PER_ELEMENT
https://developer.mozilla.org/... ER_ELEMENT

Javascript

1 2	console.log(Float32Array.BYTES_PER_ELEMENT); // expected output: 4

SkyWeb · 27.03.2019, 21:49 **[ТС]**

8Observer8, Верно ли я понимаю.
Float32Array.BYTES_PER_ELEMENT - это размер байтов 1 ого элемента.
И как мне это указать? Если нужно заменять с первого байта я так и указываю Float32Array.BYTES_PER_ELEMENT, если с 2 умножаю на 2, если с 3 умножаю на 3 и т.д.

Javascript

// Если заменить только 1ый(первый) элемент
var offset = Float32Array.BYTES_PER_ELEMENT;
var size = Float32Array.BYTES_PER_ELEMENT;
gl.bufferSubData(gl.ARRAY_BUFFER, offset, size, new Float32Array(this.attribs[attrib]));
 
Если заменить с 5 по 7?
var offset = Float32Array.BYTES_PER_ELEMENT * 5;
var size = Float32Array.BYTES_PER_ELEMENT * 7 ;
gl.bufferSubData(gl.ARRAY_BUFFER, offset, size, new Float32Array(this.attribs[attrib]));

Или я вообще ничего не понял?!

@snake32 · 28.03.2019, 11:07

Сообщение от SkyWeb

Если заменить с 5 по 7?

Javascript

1 2	var offset = Float32Array.BYTES_PER_ELEMENT * 5; var size = Float32Array.BYTES_PER_ELEMENT * (7-5+1); // не конец блока, а - размер изменяемого блока

Добавлено через 5 минут
Только я не уверен что

Javascript

1	new Float32Array(this.attribs[attrib])

правильно.
Как я понял это создаст новый массив из всех элементов, а нужно только 3 элемента 5,6 и 7

SkyWeb · 28.03.2019, 11:09 **[ТС]**

snake32, спасибо. Теперь вроде все понятно. Проверю на практике.

@_Develop 652 / 233 / 46 Регистрация: 24.01.2013 Сообщений: 719
	27.03.2019, 01:54	2
	С bufferSubData() можно изменить только часть буфера, VAO при этом менять не надо. 0

@Antikl с++ 1282 / 523 / 225 Регистрация: 15.07.2015 Сообщений: 2,562
	27.03.2019, 08:30	4
	https://stackoverflow.com/ques... fersubdata 0

@_Develop 652 / 233 / 46 Регистрация: 24.01.2013 Сообщений: 719
	27.03.2019, 10:50	6
	Сообщение от SkyWeb 3. Перезаписать этот буфер через buffersubdata Не весь буфер, а только то значение, что поменялось (или диапазон значений). 0

SkyWeb 107 / 4 / 1 Регистрация: 04.04.2015 Сообщений: 119
	27.03.2019, 14:17 [ТС]	7
	А как перезаписать только первое значение?, или например с 5 по 10 значение? 0

@snake32 3409 / 1596 / 236 Регистрация: 26.02.2009 Сообщений: 7,850 Записей в блоге: 5
	27.03.2019, 15:51	8
	SkyWeb, https://www.khronos.org/regist... ubData.xml Там всего 4 параметра, два из них offset и size как раз задают смещение и размер в байтах. Как это правильно сделать на javaScript не знаю 0

@8Observer8 5158 / 2770 / 465 Регистрация: 05.10.2013 Сообщений: 7,321 Записей в блоге: 147
	27.03.2019, 20:22	11
	My Original Message in English I do not understand what do you use: WebGL 1 or WebGL 2? Сообщение от SkyWeb А Вас не затруднит пояснить что такое dstByteOffset, srcOffset, length. It is WebGL 2. Did you read the documentation? https://developer.mozilla.org/... ferSubData WebGL 2 is analog of OpenGL 3 ES. You can read here in addition: http://docs.gl/es3/glBufferSubData Сообщение от SkyWeb gl.bufferSubData(gl.ARRAY_BUFFER, 0, new Float32Array(this.attribs[attrib])); It is WebGL 1. Translate Google Result: Я не понимаю, что вы используете: WebGL 1 или WebGL 2? Сообщение от SkyWeb А Вас не затруднит пояснить что такое dstByteOffset, srcOffset, length. Это WebGL 2. Вы читали документацию? https://developer.mozilla.org/... ferSubData WebGL 2 является аналогом OpenGL 3 ES. Вы можете прочитать здесь дополнительно: http://docs.gl/es3/glBufferSubData Сообщение от SkyWeb gl.bufferSubData(gl.ARRAY_BUFFER, 0, new Float32Array(this.attribs[attrib])); Это WebGL 1. 0

SkyWeb 107 / 4 / 1 Регистрация: 04.04.2015 Сообщений: 119
	28.03.2019, 11:09 [ТС]	16
	snake32, спасибо. Теперь вроде все понятно. Проверю на практике. 0