Управление буфером Three.js

Question

Я пытаюсь улучшить свои навыки работы с webgl и подумал, что лучший способ учиться - посмотреть на three.js Three.js. Я понимаю, как создать и связать буферы, шейдеры, что я etc. Но я ищу, как делает Three.js управлять процессом связывания буферов, например

gl.createBuffer 
gl.bindBuffer 
gl.bufferData 

Может кто-нибудь объяснить, как Three.js работает под капот?

Answer 1

Этот ответ применим к Three.js r84.

Three.js использует 3 типа геометрии:

• Geometry
• BufferGeometry
• (DirectGeometry)

Geometry сохраняет параметры геометрии (вершины, нормали, цвета, .. .) удобным для пользователя способом. BufferGeometry хранит геометрию в BufferAttribute, которые являются просто обертками для буферов (или typed arrays), которые содержат данные, которые вы обычно отправляете с gl.bufferData().
(DirectGeometry используется только для преобразования из Geometry в BufferGeometry.)

В принципе, общий Three.js рендерер, WebGLRenderer, имеет дело с BufferGeometry в то время как пользователь имеет дело с Geometry.

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

Чтобы предотвратить загрязнение пользователем пространства пользователя специфическими для WebGL элементами, такими как буферы, Three.js реализует некоторые виды оберток, которые включены в средство визуализации. Две из этих оберток:

• WebGLGeometries, где хранятся все BufferGeometry s;
• WebGLAttributes, в котором хранятся все буферы WebGL.

Отображение между объектами пользователя и объектами внутри этих оберток выполняется через свойство uuid.

Когда запрашивается рендер, рендеринг просматривает все объекты сцены. Если объект uuid отсутствует внутри одной из оболочек, выполняется некоторая обработка и сохраняется преобразованный объект.

Вот где все становится интересно, потому что там объект Geometry преобразуются в BufferGeometry внутри WebGLGeometries обертки и BufferGeometry преобразуются в один или более WebGLBuffer внутри WebGLAttributes обертке с помощью функций, которые вы перечислили:

gl.createBuffer(); 
gl.bindBuffer(); 
gl.bufferData(); 

Проверьте, пожалуйста, file, чтобы найти актуальные звонки.

Кроме того, когда объект как Geometry обновляется, его version счетчик увеличивается так, что он не соответствует version написано в обертках больше. Затем рендереру известно, что он должен обновить обернутый объект.

Наконец, когда объект добавляется в оболочку, к нему прикрепляется слушатель, так что рендеринг получает уведомление при удалении объекта и может таким образом удалять обернутый объект.