Three.js wrong texture on ShaderMaterial

Question

I'm trying to use a shaderMaterial to adjust the brightness and contrast on one object (the sphere for VR video)

Here is how I implement the 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 );

And here is the code I'm using for the shader

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

};

When the sphere is rendered it's using another more recently generated texture that is for another part of the scene.

How do I keep the video texture on the panoTexture, is this possible and and am I going about this the right way?

You are not using the texture uniform in your fragment shader, your using the tDiffuse uniform. — 2pha
– 2pha, Commented Nov 21, 2016 at 8:48
Thanks I tried shader.uniforms[ "tDiffuse" ].texture = panoTexture; and it's the same. Each time there is a new texture created elsewhere it seems to use this texture — beek
– beek, Commented Nov 21, 2016 at 19:20

beek · Accepted Answer · 2016-11-21 19:25:20Z

2

This worked

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

answered Nov 21, 2016 at 19:25

beek

3,7569 gold badges41 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Three.js wrong texture on ShaderMaterial

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related