是否可以在同一个着色器程序中进行颜色混合和使用光照？

Question

我在弄清楚如何使用相同的着色器程序使用颜色混合和照明 (lambert) 时遇到问题，因为就我的研究而言，它们不使用相同的顶点着色器。有办法吗？

我的着色器看起来像这样：

<script id="vertex-shader" type="notjs">#version 300 es
        in vec3 a_position;
        in vec3 a_normal;
        //in vec4 a_color;

        uniform mat4 u_model_matrix;
        uniform mat4 u_view_matrix;
        uniform mat4 u_projection_matrix;

        uniform mat4 u_normal_matrix;   
        uniform vec3 u_material_diffuse;
        uniform vec3 u_light_diffuse;   
        uniform vec3 u_light_direction; 

        out vec4 v_color;

        void main() {
            gl_PointSize = 10.0;
            gl_Position = u_projection_matrix * u_view_matrix * u_model_matrix * vec4(a_position, 1.0);
            vec3 corrected_a_normal = vec3(u_normal_matrix * vec4(a_normal, 1.0));

            vec3 normalized_a_normal = normalize(corrected_a_normal);
            vec3 normalized_u_light_direction = normalize(u_light_direction);
            float lambert_coefficient = dot(-normalized_u_light_direction, normalized_a_normal);
            lambert_coefficient = max(lambert_coefficient, 0.0);
            vec3 diffuse_color = u_light_diffuse * u_material_diffuse * lambert_coefficient;
            v_color = vec4(diffuse_color,1.0);
        } 
</script>

<script id="fragment-shader" type="notjs">#version 300 es
        precision mediump float;
        in vec4 v_color; 
        out vec4 outColor;

        void main() {
            outColor =  v_color;
        }
</script>

Answer 1

您可以随意混合颜色。

听起来你的意思是可以同时使用顶点颜色和光照。

是

in vec4 a_color;

...

vec3 diffuse_color = u_light_diffuse * 
                     u_material_diffuse * 
                     a_color *
                     lambert_coefficient;

例如 "blending" 这些颜色的一种方式。

是否可以在同一个着色器程序中进行颜色混合和使用光照？

Is it possible to color blend and use lighting at the same shader program?

html

javascript

webgl

webgl2