圆圈内缓缓上升的波浪线(three.js实战10)"/>
纯shader实现圆圈内缓缓上升的波浪线(three.js实战10)
纯shader实现圆圈内缓缓上升的波浪线
- 1. demo效果
- 2. RawShaderMaterial介绍
- 3. demo代码
1. demo效果
小球波浪效果
2. RawShaderMaterial介绍
我们之前在three.js中使用着色器，大多时候都是通过ShaderMaterial着色器材质传入着色器程序，使用这个着色器材质比较方便，因为three.js已经内置了很多常用的变量如position、color、normal、uv等，其实three.js还提供了另外一个着色器材质RawShaderMaterial，与ShaderMaterial相比唯一的区别就是去掉了上面提到的内置变量，需要什么变量完全自己定义，这一次就使用这个材质完全定义自己需要的变量编写着色器程序
3. demo代码
demo代码量较少，就不一一说明了，请直接查阅代码
<body><div id="container"></div><script type="text/javascript" src="../three/build/three.js"></script><script>var container;var camera, scene, planeMesh, renderer;var uniforms = {u_resolution: {type: "v2",value: new THREE.Vector2()},radius: {type: "f",value: 0.5},u_time: {type: "f",value: 0.5}};var vertexShader = `attribute vec3 position;void main() {gl_Position = vec4( position, 1.0 );}`var fragmentShader = `#ifdef GL_ESprecision mediump float;#endifuniform vec2 u_resolution;uniform float u_time;uniform float radius;void main( void ) {vec2 uv = (gl_FragCoord.xy * 2. - u_resolution) / u_resolution.y;vec2 center = vec2(.0,.0);float dist = distance(center,uv);float angularVelocity = 12.0;//角速度float frequency = 12.0;//频率float amplitude = 0.05;//振幅float offset = -0.5;//偏距float initialPhase = frequency * u_time;//初相位float y = amplitude * sin((angularVelocity*uv.x)+initialPhase)+offset;//波浪函数if(y < 1.0){y += u_time/10.0;}if(dist < radius){//在圆内if(uv.y < y){//波浪以下部分着色gl_FragColor = vec4(0.1,0.6,0.9,1.0);}else{gl_FragColor = vec4(0.1,0.2,0.3,.6);}}}`init();animate();function init() {container = document.getElementById('container');camera = new THREE.Camera();scene = new THREE.Scene();var geometry = new THREE.PlaneBufferGeometry(2, 2);var material = new THREE.RawShaderMaterial({uniforms: uniforms,vertexShader: vertexShader,fragmentShader: fragmentShader});planeMesh = new THREE.Mesh(geometry, material);scene.add(planeMesh);renderer = new THREE.WebGLRenderer();renderer.setSize(800, 800); //设置窗口大小800px*800pxcontainer.appendChild(renderer.domElement);uniforms.u_resolution.value.x = renderer.domElement.width;uniforms.u_resolution.value.y = renderer.domElement.height;}function animate() {requestAnimationFrame(animate);planeMesh.material.uniforms.u_time.value += 0.02;if (planeMesh.material.uniforms.u_time.value > 10.0) {planeMesh.material.uniforms.u_time.value = 0.0}renderer.render(scene, camera);}</script>
</body>
更多推荐
纯shader实现圆圈内缓缓上升的波浪线(three.js实战10)
发布评论