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

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

threejs的shader材质颜色混合函数mix相关推荐

threejs(webgl)-shader入门教程(1)
1.shader基本使用 2.shader粒子 shader是什么? shader是一个用GLSL编写的小程序,也就是着色器语言,我们可以通过shader来编写顶点着色器和片元着色器,在WEBGL编程 ...
Cesium自定义shader材质实现逼真水面，支持uniforms属性实时修改
水的shader代码参考的是Shader - Shadertoy BETA 本文主要解决在cesium的shader中如何实时修改时间变量iTime,从而实现材质的动态变化. MaterialAppe ...
基于ThreeJS修改模型材质
基于ThreeJS修改模型材质示例描述与操作指南示例效果展示实现方式示例描述与操作指南当前示例用于展示如何在模型上改变构件的材质.材质和几何体构成网格,决定几何体是否像金属,透明与否,是否展 ...
【 Threejs 】- Shader 着色器实例渲染教程
着色器在threejs中是一个难点,话不多说,先来看看着色器是什么? 如果您已经有使用计算机绘图的经验,您就会知道在这个过程中您先画一个圆,然后画一个矩形.一条线.一些三角形,直到您组成您想要的图像. ...
【ThreeJS基础教程-材质纹理篇】3.2 初识基础网格材质MeshStandardMaterial
初识标准网格材质学习ThreeJS的捷径了解材质的基本知识材质继承关系常用的通用材质属性 alphaTest的验证和应用 depthTest和depthWrite应用渲染哪一面Side 常用 ...
WebGL/ThreeJS几何体、材质、纹理贴图，给几何体披上好看的外衣
1.ThreeJS的常见几何体 BufferGeometry和Geometry有什么不同? 如果你想简单理解BufferGeometry和Geometry有什么不同,就是两者的数据结构不同,缓冲类型几 ...
threejs 热力图做成材质_ThreeJS 热力图
环境 ThreeJS 107版本 three.min.js OrbitControls.js heatmap.min.js 说明地球上添加热力图的原理是先生成平面的热力图,绘制在canvas上,再将 ...
【ThreeJS基础教程-材质纹理篇】3.1 纹理知识进阶
纹理知识进阶学习ThreeJS的捷径如何用一张地板砖贴图制作出地板砖效果旋转纹理移动纹理纹理旋转与移动的应用简单的光圈效果简单的流水效果 WebGL项目优化技巧:没必要的细节可以用纹理直 ...
Shader Graph6-点积函数（下）
一.模拟衣服材料首先我们来观察下面衣服材质第一个图是棉毛织物,第二个图是丝绸,m黄线表示表面最高的位置,b蓝线表示表面边缘位置.我们可以看出棉毛织物的m线比较亮,b线比较暗,而丝绸的m线比较暗,b ...
webgl函数 mix
一.简介 mix函数用于混合两个颜色得到新的颜色.有3个参数分别是颜色1,颜色2,以及混合比例. 二.代码 #ifdef GL_ES precision mediump float; #endifun ...

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

threejs的shader材质颜色混合函数mix相关推荐

最新文章

热门文章

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

threejs的shader材质 颜色混合函数mix相关推荐

最新文章

热门文章

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

threejs的shader材质颜色混合函数mix相关推荐