Javascript 使用threeJS的着色器性能

我希望通过渲染简单的纹理形状获得尽可能好的性能。问题在于phong模型需要额外的照明（需要计算）+颜色与所需颜色不一样，需要一些装饰

为了简化这种情况，我决定使用一个简单的平面着色器，但出现了一些问题：

    <script id="vertShader" type="shader">
        varying vec2 vUv;
        void main() {
              vUv = uv;
              gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
        }
    </script>
    <script id="fragShader" type="shader">
        varying vec2 vUv;
        uniform sampler2D material;
        void main() {
            gl_FragColor = texture2D(material, vUv);
        }
    </script>

---

任何建议都会有帮助

每个曲面都是沿一个方向（顺时针或逆时针）绘制的。如果从另一侧显示曲面，它将“消失”。我认为这是你自己的问题。->您应该从两个方向渲染它们（->性能更差），或者计算它应该从哪一侧渲染

要稍微优化性能，应使用三种材质中的标准材质。无需编写自己的着色器即可使用它们

比如：

child.material = new THREE.MeshBasicMaterial({
    side: THREE.DoubleSide,
    color: 0x000000
    // ...
});

我在自己的项目中创建了带有纹理的skybox材质：

function getSkyboxMaterial() {
    var faceMaterials = getSkyboxFaces();
    var skyboxMaterial = new THREE.MeshFaceMaterial(faceMaterials);
    return skyboxMaterial;
}

function getSkyboxFaces() {
    var NUMBER_OF_FACES = 6, faces = [], texture, faceMaterial, texturePath, i;

    for (i = 0; i < NUMBER_OF_FACES; i++) {
        texturePath = IMAGE_PREFIX + DIRECTIONS[i] + IMAGE_SUFFIX;
        texture = loadFlippedTexture( texturePath );
        faceMaterial = getFaceMaterial( texture );
        faces.push( faceMaterial );
    }
    return faces;
}

function loadFlippedTexture(texturePath) {
    var texture = loadTexture(texturePath);
    flipTexture(texture); // This is necessary, because the skybox-textures are mirrored.
    return texture;
}

function loadTexture(path) {
    return THREE.ImageUtils.loadTexture(path);
}

function flipTexture(texture) {
    texture.repeat.set(-1, 1);
    texture.offset.set(1, 0);
    return texture;
}

function getFaceMaterial(texture) {
    var faceMaterial = new THREE.MeshBasicMaterial({
        map: texture,
        side: THREE.DoubleSide
    });
    return faceMaterial;
}

函数getSkyboxMaterial（）{ var faceMaterials=getSkyboxFaces（）； var skyboxMaterial=新的三个.MeshFaceMaterial（faceMaterials）； 归还skyboxMaterial； } 函数getSkyboxFaces（）{ var NUMBER_OF_FACES=6，FACES=[]，纹理，faceMaterial，texturePath，i； 对于（i=0；i<面数；i++）{ 纹理路径=图像前缀+方向[i]+图像后缀； 纹理=加载翻转纹理（texturePath）； faceMaterial=getFaceMaterial（纹理）； 面。推（面材质）； } 返回面； } 函数加载FlippedTexture（texturePath）{ var纹理=加载纹理（纹理路径）； flipTexture（纹理）；//这是必需的，因为skybox纹理是镜像的。 返回纹理； } 函数loadTexture（路径）{ 返回三个.ImageUtils.loadTexture（路径）； } 函数flipTexture（纹理）{ 纹理。重复。设置（-1，1）； 纹理偏移集（1,0）； 返回纹理； } 函数getFaceMaterial（纹理）{ var faceMaterial=新的三网格基本材质({ 贴图：纹理， 侧面：三个。双面 }); 归还材料； }

---

我认为，在您的示例中，您不必翻转阴影纹理注意：我认为使用经过良好测试和优化的框架着色器比编写自己的框架着色器更好。谢谢您的建议，但我认为情况并非如此。加载的对象包含纹理的uv，因此所有内容都应正确绘制。当我在没有阴影的情况下画画时，效果很好。当我突然添加阴影时，你会得到所有的“透视”编辑：看起来不是阴影消失了，而是模型下面的部分我真的不明白，你的着色器是做什么的，但是为什么不试试三种材质呢？你说，你对PhongMaterial没有问题，那么为什么不使用例如BasicMaterial？

function getSkyboxMaterial() {
    var faceMaterials = getSkyboxFaces();
    var skyboxMaterial = new THREE.MeshFaceMaterial(faceMaterials);
    return skyboxMaterial;
}

function getSkyboxFaces() {
    var NUMBER_OF_FACES = 6, faces = [], texture, faceMaterial, texturePath, i;

    for (i = 0; i < NUMBER_OF_FACES; i++) {
        texturePath = IMAGE_PREFIX + DIRECTIONS[i] + IMAGE_SUFFIX;
        texture = loadFlippedTexture( texturePath );
        faceMaterial = getFaceMaterial( texture );
        faces.push( faceMaterial );
    }
    return faces;
}

function loadFlippedTexture(texturePath) {
    var texture = loadTexture(texturePath);
    flipTexture(texture); // This is necessary, because the skybox-textures are mirrored.
    return texture;
}

function loadTexture(path) {
    return THREE.ImageUtils.loadTexture(path);
}

function flipTexture(texture) {
    texture.repeat.set(-1, 1);
    texture.offset.set(1, 0);
    return texture;
}

function getFaceMaterial(texture) {
    var faceMaterial = new THREE.MeshBasicMaterial({
        map: texture,
        side: THREE.DoubleSide
    });
    return faceMaterial;
}