I am experimenting with a shaderMaterial to adjust the brightness and contrast on a specific object, in this case, a sphere designed for VR video.
Here is my implementation of 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 );
Below is my code 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")
};
After rendering, the sphere displays another texture from a different part of the scene. How can I ensure that the video texture remains on the panoTexture? Is this achievable, and am I taking the right approach?