使用shader着色器程序创建扩散光圈效果(three.js实战10)
Posted 点燃火柴
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用shader着色器程序创建扩散光圈效果(three.js实战10)相关的知识，希望对你有一定的参考价值。
使用着色器创建扩散光圈
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 vertexShader = `
attribute vec3 position;//position变量从PlaneBufferGeometry的position属性中获取顶点信息
varying vec3 v_position;
void main() {
v_position = position;
gl_Position = vec4( position, 1.0 );
}
`
var fragmentShader = `
#ifdef GL_ES
precision mediump float;
#endif
varying vec3 v_position;
uniform float radius;
void main( void ) {
vec3 center = vec3(.0,.0,.0);
float dist = distance(center,v_position);//计算中心到顶点的距离
dist = clamp(dist,0.0,1.0);//将距离限制在0~1
float color = 1.0 - dist;
if(dist >radius-0.3&&dist < radius-0.28||dist >radius-0.4&&dist < radius-0.38){
gl_FragColor = vec4(1.0*color,0.6*color,0.6*color,1.0);//绘制两层光圈
}else{
gl_FragColor = vec4(color*radius,0.0,0.0,1.0);//绘制底色
}
}
`
init();
animate();
function init() {
container = document.getElementById('container');
camera = new THREE.Camera();
scene = new THREE.Scene();
var geometry = new THREE.PlaneBufferGeometry(2, 2);
//创建RawShaderMaterial着色器材质
var material = new THREE.RawShaderMaterial({
uniforms: {
radius: {
type: "f",
value: 0.2
}
},
vertexShader: vertexShader,
fragmentShader: fragmentShader
});
planeMesh = new THREE.Mesh(geometry, material);
scene.add(planeMesh);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
//更新光圈半径
planeMesh.material.uniforms.radius.value += 0.01
if (planeMesh.material.uniforms.radius.value > 1) {
planeMesh.material.uniforms.radius.value = 0;
}
renderer.render(scene, camera);
}
</script>
</body>
以上是关于使用shader着色器程序创建扩散光圈效果(three.js实战10)的主要内容，如果未能解决你的问题，请参考以下文章
Godot Shader笔记:着色器材质ShaderMaterial