float mix(floatx,float y,float a ) 返回x和y 的線性混合,即x(1-a)+ya
<div id="container"></div>
<script src="js/three.js"></script>
<script src="js/Detector.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main()
{
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform float time;
uniform bool isoriginColor;
uniform sampler2D texture3;
uniform sampler2D texture4;
varying vec2 vUv;
void main( void ) {
vec2 position = - 1.0 + 2.0 * vUv;
vec4 color3 = texture2D( texture3, vUv );
vec3 tarcolor =color3.rgb;
float f1 =color3.a;
vec4 color4 = texture2D( texture4, vUv );
float f2 =color4.a;
if(isoriginColor == false){
tarcolor =mix(tarcolor.rgb,color4.rgb,f2);
}
gl_FragColor = vec4(tarcolor,1);
}
</script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container;
var camera, scene, renderer;
var uniforms;
init();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
scene = new THREE.Scene();
var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
var textureLoader = new THREE.TextureLoader();
uniforms = {
time: { value: 1.0 },
texture3:{value:textureLoader.load("time1.jpg" )},
texture4:{value:textureLoader.load("2.png" )}
};
var material = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
container.appendChild( renderer.domElement );
onWindowResize();
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize( event ) {
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate( timestamp ) {
requestAnimationFrame( animate );
uniforms.time.value = timestamp / 1000;
renderer.render( scene, camera );
}
</script>
</body>
```![在這裏插入圖片描述](https://img-blog.csdn.net/20181017153331250?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JhbnJhbjEyNQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
在這裏插入代碼片
gl_FragColor = vec4(tarcolor.rgb+color4.rgb,1);
1
2
gl_FragColor = vec4(tarcolor.rgb-color4.rgb,1);
![在這裏插入圖片描述](https://img-blog.csdn.net/20181017155017578?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JhbnJhbjEyNQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)