Блог

Я работаю с шейдерами в THREE.js и пример, которому я следую, показывает, как создать эффект развевающегося флага с помощью плоской сетки. В результате получается плоскость с координатами z, колеблющаяся, как показано на рисунке. У меня есть только базовое понимание шейдеров, но мой вопрос в том, зачем использовать шейдер для изменения «modelPosition.z», когда мы можем просто сделать то же самое, используя mesh.position.z в главном файле javascript, где ТРИ.Сетка создана? Являются ли шейдеры просто способом создания пользовательских материалов?

         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;
        }