文章/答案/技术大牛

发布

社区首页 >问答首页 >使用threeJS的着色器性能

问使用threeJS的着色器性能
EN

Stack Overflow用户

提问于 2015-04-20 16:17:10

回答 1查看 802关注 0票数 1

我希望通过渲染简单的纹理形状来获得尽可能好的性能。问题是phong模型需要额外的照明(这涉及到计算)+颜色不像期望的那样，需要一些The。

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

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

在特定的摄影机角度下，一些工具架消失(您可以注意到较暗的地方，并能看到它们)，这在使用phong材质时不会发生：

它发生在放置在每个架子内的阴影纹理上。这是一个带纹理的立方体，每个空间内都有阴影纹理(不要问我为什么，这只是我得到的一个任务：)

我不知道这是什么原因造成的。也许是装货？我正在使用标准的obj加载器并添加纹理。Obj加载器将材质设置为phong，im将其切换为自定义着色器，如下所示：

    var objLoader = new THREE.OBJLoader( manager );
    objLoader.load( obj, function ( model ) {

        elements[name] = model;
        console.log('loaded ', name);
        var img = THREE.ImageUtils.loadTexture(mat);
        elements[name].traverse( function ( child ) {
            if ( child instanceof THREE.Mesh ) {
                child.material = new THREE.ShaderMaterial( {
                    uniforms: {
                        color: {type: 'f', value: 0.0},
                        material: {type: 't', value: img}
                    },
                    fragmentShader: document.getElementById('fragShader').text,
                    vertexShader: document.getElementById('vertShader').text,
                } );
            }
        });

任何建议都会很有帮助

javascript

three.js

textures

webgl

回答 1

Stack Overflow用户

发布于 2015-04-20 16:44:02

每个曲面都在一个方向上绘制(顺时针或逆时针)。如果你从另一边显示一个表面，它将“消失”。我认为这是你自己着色器的问题。->你应该从两边渲染它们(->较差的性能)，或者计算它应该从哪一边渲染。

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

类似于：

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

我在自己的项目中创建了一个带有纹理的skybox-material：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29742541

复制

相似问题

问使用threeJS的着色器性能
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用threeJS的着色器性能EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用threeJS的着色器性能
EN