Я работаю с шейдерами в THREE.js, и пример, который я использую, показывает, как создать эффект развевающегося флага с плоской сеткой. В результате получается плоскость с колеблющимися координатами z, как на картинке. У меня есть только базовое понимание шейдеров, но мой вопрос: зачем использовать шейдер для изменения «modelPosition.z», когда мы можем просто сделать то же самое, используя mesh.position.z в основном файле javascript, где создается экземпляр THREE.Mesh? Являются ли шейдеры просто способом создания пользовательских материалов?
uniform vec2 uFrequency;
uniform float uTime;
attribute float aRandom;
varying vec2 vUv;
varying float vElevation;
void main()
{
//gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
//gl_Position.x += 0.5;
//gl_Position.y += 0.5;
vec4 modelPosition = modelMatrix * vec4(position, 1.0);
float elevation = sin(modelPosition.x * uFrequency.x - uTime) * 0.1;
elevation += sin(modelPosition.y * uFrequency.y - uTime) * 0.1;
modelPosition.z += elevation;
vec4 viewPosition = viewMatrix * modelPosition;
vec4 projectedPosition = projectionMatrix * viewPosition;
gl_Position = projectedPosition;
vUv = uv;
vElevation = elevation;
}
Шейдеры работают на GPU. Код выполняется параллельно для всех вершин.
mesh.position.z
сдвинет вашу сетку целиком, тогда как вам нужно сдвинуть вершины геометрии по отдельности. Таким образом, вы должны работать с атрибутами буфераmesh.geometry.attributes.position
и изменять z-значение каждой вершины в соответствии с функцией.