Зачем использовать shadier, если можно использовать свойство сетки?

avatar
Anthony
9 августа 2021 в 00:17
26
0
0

Я работаю с шейдерами в 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;
        }

flag

Источник
Rabbid76
9 августа 2021 в 05:28
1

Шейдеры работают на GPU. Код выполняется параллельно для всех вершин.

prisoner849
9 августа 2021 в 12:55
1

mesh.position.z сдвинет вашу сетку целиком, тогда как вам нужно сдвинуть вершины геометрии по отдельности. Таким образом, вы должны работать с атрибутами буфера mesh.geometry.attributes.position и изменять z-значение каждой вершины в соответствии с функцией.

Ответы (0)