WebGL高级实例

实例"/>

WebGL高级实例

通过对webgl和three.js的基础知识学习，发现在三维场景应用实现过程中，完全采用webgl编写需要的工作量非常大，具体可参见我上一篇文章，而且由于片元着色器和顶点着色器是强类型语法，类似C语言，编程过程中有任何的小错误都不好调试与定位。因此，大家经常使用的做法是采用一个开源引擎框架结合webgl开展，目前大部分浏览器都支持webgl，比如采用three.js+webgl编写本文提到的海水波浪应用，当然也可以完全基于three.js来实现，而完全利用three.js实现动态的三维管道效果，请参考另一篇文章。

开发环境：vue-2.5.2，Three.js-0.142.0，开发工具webstorm2021.2.3，前端用chrome109.0.5414.120，其他默认。

以下是海水波浪场景示例的功能描述和关键核心代码。

1.实现功能简述：在浏览器中实现海浪波动的三维效果，不能安装插件，支持旋转、放大缩小，并支持在线调整海浪的各类参数，比如波高、波频、波速等等。

2.海浪效果：

3.关键代码如下（完整代码请联系我）：

在three.js中通过import引入webgl编写的两个着色器：顶点着色器和片元着色器。

import * as THREE from "three"; //引入Threejs
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import waterVertexShader from './shaders/vertex0.glsl';//引入顶点着色器的GLSL文件
import waterFragmentShader from './shaders/fragment0.glsl';//引入片元着色器的GLSL文件

在thee.js中的init方法中构建原始材质，关键代码如下：

// 构建材质贴图
const textureLoader = new THREE.TextureLoader();
const flagTexture = textureLoader.load( '/static/data/waternormals.jpg', function ( texture ) {texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
});// 构建材质，以便后续
const planeMaterial = new THREE.RawShaderMaterial({vertexShader: waterVertexShader,fragmentShader: waterFragmentShader,// transparent: true,uniforms:{//uFrequency: { value: 20 },side:THREE.DoubleSide,uBigWavesElevation: { value: 0.2 },//波高uBigWavesSpeed: { value: 0.75 },//波速uFrequency: { value: new THREE.Vector2(5, 7)},uTime: { value:10 },uColor: { value: new THREE.Color('orange') },uTexture: { value: flagTexture }}// 创建三维水面Mesh，并加载的场景中。
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.material.opacity = 0.3;
plane.material.transparent = true;
that.scene.add(plane);// 创建右上角的gui控制面板
let gui=new GUI();
gui.add(planeMaterial.uniforms.uBigWavesElevation, 'value').min(0).max(1).step(0.001).name('uBigWavesElevation')
gui.add(planeMaterial.uniforms.uBigWavesSpeed, 'value').min(0).max(4).step(0.001).name('uBigWavesSpeed')// 同时为了让水面动起来，需要创建animate和tick方法，与init方法类似
animate() {this.tick();requestAnimationFrame( this.animate );//调用自己const delta = this.clock.getDelta();if ( this.mixer ) this.mixer.update( delta );this.renderer.render( this.scene, this.camera );this.controls.update();this.stats.update();
},// 循环执行
tick() {let elapsedTime = this.clock.getElapsedTime()*2;// Update materialthis.material.uniforms.uTime.value = elapsedTime;
}