如何在WebGL中执行颜色材质跟踪

如何在WebGL中执行颜色材质跟踪,webgl,Webgl,我知道在OpenGL中使用以下代码执行此操作: glDisable(GL_LIGHTING); glEnable(GL_COLOR_MATERIAL); 如何在WebGL中模拟它?这里有一个blinn phong着色器,它模拟OpenGL固定功能管道进行逐顶点照明。默认情况下,这相当于启用了glEnable(GL_颜色_材质)和glColorMaterial(GL_正面_和背面,GL_环境_和漫反射)。通过将制服设置为1.0,可以模拟glColorMaterial,这将导致材质参数跟踪当前颜色

我知道在OpenGL中使用以下代码执行此操作:

glDisable(GL_LIGHTING);
glEnable(GL_COLOR_MATERIAL);

如何在WebGL中模拟它?

这里有一个blinn phong着色器,它模拟OpenGL固定功能管道进行逐顶点照明。默认情况下,这相当于启用了glEnable(GL_颜色_材质)和glColorMaterial(GL_正面_和背面,GL_环境_和漫反射)。通过将制服设置为1.0,可以模拟glColorMaterial,这将导致材质参数跟踪当前颜色,而不是glMaterial设置的颜色

#version 120

////////////////////////////////////////////////////////////////////////////////
// http://www.glprogramming.com/red/chapter05.html                            //
//                                                                            //
// color = (matEmission + globalAmbient * matAmbient) +                       //
//         AttenuationFactor( 1.0 / ( Kc + Kl*d + Kq*d^2 ) ) *                //
//         [ (lightAmbient * matAmbient) +                                    //
//           (max(N.L,0) * lightDiffuse * matDiffuse) +                       //
//           (max(N.H,0)^matShininess * lightSpecular * matSpecular) ]        //
////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////
// Uniforms                                                                   //
////////////////////////////////////////////////////////////////////////////////
uniform float uColorMaterialAmbient = 1.0;
uniform float uColorMaterialDiffuse = 1.0;
uniform float uColorMaterialEmission = 0.0;
uniform float uColorMaterialSpecular = 0.0;

////////////////////////////////////////////////////////////////////////////////
// Main                                                                       //
////////////////////////////////////////////////////////////////////////////////
void main(void)
{
    vec4 matAmbient = mix(gl_FrontMaterial.ambient, gl_Color, uColorMaterialAmbient);
    vec4 matDiffuse = mix(gl_FrontMaterial.diffuse, gl_Color, uColorMaterialDiffuse);
    vec4 matEmission = mix(gl_FrontMaterial.emission, gl_Color, uColorMaterialEmission);
    vec4 matSpecular = mix(gl_FrontMaterial.specular, gl_Color, uColorMaterialSpecular);

    // Transform normal into eye space. gl_NormalMatrix is the transpose of the
    // inverse of the upper leftmost 3x3 of gl_ModelViewMatrix.
    vec3 eyeNormal = normalize(gl_NormalMatrix * gl_Normal);

    // Calculate emission and global ambient light
    vec4 emissionAmbient = matEmission + (gl_LightModel.ambient * matAmbient);

    // Calculate ambient
    vec4 lightAmbient = gl_LightSource[0].ambient * matAmbient;

    // Transform the vertex into eye space
    vec4 eyeVertex = gl_ModelViewMatrix * gl_Vertex;
    vec3 eyeLightDir = gl_LightSource[0].position.xyz - eyeVertex.xyz;
    float dist = length(eyeLightDir);
    eyeLightDir = normalize(eyeLightDir);

    // No attenuation for a directional light
    float attenuationFactor = 1.0 / (gl_LightSource[0].constantAttenuation
                                   + gl_LightSource[0].linearAttenuation * dist
                                   + gl_LightSource[0].quadraticAttenuation * dist * dist);

    // Calculate lambert term
    float NdotL = max(dot(eyeNormal, eyeLightDir), 0.0);

    // Calculate diffuse
    vec4 lightDiffuse = NdotL * (gl_LightSource[0].diffuse * matDiffuse);

    // Calculate specular
    vec4 lightSpecular = vec4(0.0);
    if ( NdotL > 0.0 )
    {
        float NdotHV = max(dot(eyeNormal, gl_LightSource[0].halfVector.xyz), 0.0);
        lightSpecular = pow(NdotHV, gl_FrontMaterial.shininess) * (gl_LightSource[0].specular * matSpecular);
    }

    gl_FrontColor = emissionAmbient + attenuationFactor * (lightAmbient + lightDiffuse + lightSpecular);
    gl_Position = ftransform();
}

你根本不能直接这么做。这使用了webgl中根本不存在的固定管道。您需要编写一个着色器。(仅仅使用像这样的固定颜色应该相当简单,但我还没有足够的经验来帮助glsl)