WebGL网站在PC上看起来不错，但在移动设备上看起来很奇怪

Question

因此我建立了一个WebGL网站，可以在这里访问它： https://jameswebsite.azurewebsites.net/

在PC上看起来不错（或预期），但在移动设备上看起来很有趣。看起来纹理映射可能已关闭（也许是纹理修剪的问题），但似乎没有任何阴影发生。

这是PC上的屏幕截图：

PC映像
] 1

这是移动设备的屏幕截图：

移动图像

我已关闭纹理，但仍然存在此问题。这使我相信问题可能出在我的着色器中。这是我的着色器：

<script id="per-fragment-lighting-fs" type="x-shader/x-fragment">
precision mediump float;

varying vec2 vTextureCoord;
varying vec3 vTransformedNormal;
varying vec4 vPosition;

uniform float uMaterialShininess;

uniform bool uShowSpecularHighlights;
uniform bool uUseLighting;
uniform bool uUseTextures;

uniform vec3 uAmbientColor;

uniform vec3 uPointLightingLocation;
uniform vec3 uPointLightingSpecularColor;
uniform vec3 uPointLightingDiffuseColor;

uniform sampler2D uSampler;


void main(void) {
    vec3 lightWeighting;
    if (!uUseLighting) {
        lightWeighting = vec3(1.0, 1.0, 1.0);
    } else {
        vec3 lightDirection = normalize(uPointLightingLocation - vPosition.xyz);
        vec3 normal = normalize(vTransformedNormal);

        float specularLightWeighting = 0.0;
        if (uShowSpecularHighlights) {
            vec3 eyeDirection = normalize(-vPosition.xyz);
            vec3 reflectionDirection = reflect(-lightDirection, normal);

            specularLightWeighting = pow(max(dot(reflectionDirection, eyeDirection), 0.0), uMaterialShininess);
        }

        float diffuseLightWeighting = max(dot(normal, lightDirection), 0.0);
        lightWeighting = uAmbientColor
            + uPointLightingSpecularColor * specularLightWeighting
            + uPointLightingDiffuseColor * diffuseLightWeighting;
    }

    vec4 fragmentColor;
    if (uUseTextures) {
        fragmentColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
    } else {
        fragmentColor = vec4(1.0, 1.0, 1.0, 1.0);
    }
    gl_FragColor = vec4(fragmentColor.rgb * lightWeighting, fragmentColor.a);
}

<script id="per-fragment-lighting-vs" type="x-shader/x-vertex">

attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;
attribute vec2 aTextureCoord;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform mat3 uNMatrix;

varying vec2 vTextureCoord;
varying vec3 vTransformedNormal;
varying vec4 vPosition;


void main(void) {
    vPosition = uMVMatrix * vec4(aVertexPosition, 1.0);
    gl_Position = uPMatrix * vPosition;
    vTextureCoord = aTextureCoord;
    vTransformedNormal = uNMatrix * aVertexNormal;
}

有任何想法吗？预先感谢！

Answer 1

在移动设备上，WebGL实现可能对非基础的两个纹理尺寸敏感，或者可能需要明确设置纹理包装行为。

我注意到您的grass texture的尺寸为590x590。考虑将纹理的大小调整为以二维为基础的闭合值（例如，对于草纹理，为512x512）

此外，我建议您将纹理对象上的gl.TEXTURE_WRAP_S和gl.TEXTURE_WRAP_T参数明确设置为gl.GL_REPEAT，因为这可能是纹理仅部分显示的另一个原因在几何上。

您可以通过以下方式在纹理对象上设置环绕行为：

gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);

Answer 2

每个@gman：

  

在着色器中将mediump更改为highp，看看有什么作用

这实际上有效！！谢谢@gman！