ShaderMaterial上的Three.js纹理错误

时间:2016-11-21 07:55:12

标签: javascript three.js webgl shader

我正在尝试使用shaderMaterial调整一个对象(VR视频的球体)的亮度和对比度

以下是我实施ShaderMaterial的方法

var geometry = new THREE.SphereGeometry( 500, 60, 40 );

var panoTexture = new THREE.VideoTexture( video );
panoTexture.minFilter = THREE.LinearFilter;
panoTexture.magFilter = THREE.LinearFilter;
panoTexture.format = THREE.RGBFormat;

// var material   = new THREE.MeshLambertMaterial( { map : texture } );

var shader = THREE.BrightnessContrastShader;
shader.uniforms[ "contrast" ].value = 0.0;
shader.uniforms[ "brightness" ].value = 0.0;
shader.uniforms[ "texture" ].texture = panoTexture;

var panoMaterial   = new THREE.ShaderMaterial(shader);


panoVideoMesh = new THREE.Mesh( geometry, panoMaterial );

这是我用于着色器的代码

THREE.BrightnessContrastShader = {

    uniforms: {

        "tDiffuse":   { type: "t", value: null },
        "brightness": { type: "f", value: 0 },
        "contrast":   { type: "f", value: 0 },
        "texture":   { type: "t", value: 0 }

    },

    vertexShader: [

        "varying vec2 vUv;",

        "void main() {",

            "vUv = uv;",

            "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",

        "}"

    ].join("\n"),

    fragmentShader: [

        "uniform sampler2D tDiffuse;",
        "uniform float brightness;",
        "uniform float contrast;",

        "varying vec2 vUv;",

        "void main() {",

            "gl_FragColor = texture2D( tDiffuse, vUv );",

            "gl_FragColor.rgb += brightness;",

            "if (contrast > 0.0) {",
                "gl_FragColor.rgb = (gl_FragColor.rgb - 0.5) / (1.0 - contrast) + 0.5;",
            "} else {",
                "gl_FragColor.rgb = (gl_FragColor.rgb - 0.5) * (1.0 + contrast) + 0.5;",
            "}",

        "}"

    ].join("\n")

};

当渲染球体时,它使用另一个最近生成的纹理,该纹理用于场景的另一部分。

如何将视频纹理保留在panoTexture上,这是否可行,我是否正确地进行此操作?

1 个答案:

答案 0 :(得分:0)

这有效

shader.uniforms[ "tDiffuse" ].value = panoTexture;