threejs的shader材质颜色混合函数mix

最新推荐文章于 2025-07-11 14:14:45 发布

ranran125

最新推荐文章于 2025-07-11 14:14:45 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： webgl 文章标签： webgl

本文链接：https://blog.youkuaiyun.com/ranran125/article/details/83111218

本文探讨了如何使用three.js中的shader材质进行颜色混合，重点讲解了线性混合函数mix以及如何实现颜色的加减效果，例如：gl_FragColor = vec4(tarcolor.rgb + color4.rgb, 1) 和 gl_FragColor = vec4(tarcolor.rgb - color4.rgb, 1)。" 114288388,9529491,React父组件调用子组件方法技巧,"['前端开发', 'React', '组件通信']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

float mix(floatx,float y,float a ) 返回x和y 的线性混合，即x(1-a)+ya

three.js webgl - shader [Monjori]

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