WebGL雾和物体旋转

简介: WebGL雾和物体旋转

1.雾

1)片元着色器

 precision mediump float;
            #define LOG2 1.442695
      uniform vec3 uFogColor;//雾颜色
      uniform float uFogDensity;//雾强度
      varying  vec3 vColor;
      varying vec4 vPosition;
      void main() {

        float fogDistance = length(vPosition.xyz );
        // exp2雾
        float fogAmount = 1.0- exp2(-uFogDensity * uFogDensity * fogDistance * fogDistance * LOG2);
        fogAmount = clamp(fogAmount, 0.0, 1.0);

        gl_FragColor = mix(vec4(vColor,1.0), vec4(uFogColor,1.0), fogAmount);
      }

2) 初始化赋值

 //雾颜色
 gl.uniform3f(gl.getUniformLocation(program, 'uFogColor'), 0.1, 0.2, 0.4);
 //雾强度
  gl.uniform1f(gl.getUniformLocation(program, 'uFogDensity'), 0.2);

20230519\_204840.gif

可以看到雾的效果近看能看清,远看变模糊。

2.旋转物体

1)监听canvas动作


 function initEvent(gl) {
   
   
          var rotateAngle = {
   
   
            x: 0, //绕y轴旋转角度
            y: 0 //绕x轴旋转角度
          };

          var incAngle = -0.01; //旋转角度步长值,鼠标旋转灵敏度

          var lastClickX, lastClickY; //上次触控点X,Y坐标
          var ismoved = false; //是否移动标志位
          //鼠标按下的监听
          document.onmousedown = function (event) {
   
   
            var x = event.clientX;
            var y = event.clientY;
           //如果鼠标在canvas里开始移动
            var rect = (event.target || event.srcElement).getBoundingClientRect();
            if (rect.left <= x && x < rect.right && rect.top <= y && y < rect.bottom) {
   
   
              ismoved = true;
              lastClickX = x;
              lastClickY = y;
            }
          };
          //鼠标抬起的监听
          document.onmouseup = function (event) {
   
   
            ismoved = false;
          };
          //鼠标移动时的监听
          document.onmousemove = function (event) {
   
   
            var x = event.clientX,
              y = event.clientY;
            if (ismoved) {
   
   
              rotateAngle.y = rotateAngle.y + (x - lastClickX) * incAngle;
              rotateAngle.x = rotateAngle.x + (y - lastClickY) * incAngle;
            }
            lastClickX = x;
            lastClickY = y;
          };
          return rotateAngle;
        }

2)赋值旋转角度到变换矩阵

   var rotateAngle = initEvent(gl);
   var modelViewMatrix = mat4.create();          
          mat4.rotateX(modelViewMatrix, modelViewMatrix, rotateAngle.x);
          mat4.rotateY(modelViewMatrix, modelViewMatrix, rotateAngle.y);
          gl.uniformMatrix4fv(
            gl.getUniformLocation(gl.program, 'uModelViewMatrix'),
            false,
            modelViewMatrix
 );

20230611\_152920.gif

Github地址

https://github.com/xiaolidan00/my-webgl

参考

  • https://webglfundamentals.org/
  • 《WebGL编程指南》
  • 《webGL 3D开发实战详解 第2版》
相关文章
Threejs使用LOD根据摄像机距离物体的距离显示不同的物体
Threejs使用LOD根据摄像机距离物体的距离显示不同的物体
771 0
|
4月前
ThreeJs给物体添加贴图
这篇文章详细说明了在Three.js中如何给3D物体添加贴图,并展示了实现局部贴图的技术和方法。
235 1
ThreeJs给物体添加贴图
webgl图形变换、投影与摄像机
入坑webgl,从图形变换、投影与摄像机开始,基操学得好,以后才能怎么炫酷怎么来~快快快,点进来~~
Unity3dShader_凹凸纹理显示+边缘颜色与强度
shader知识:http://imgtec.eetrend.com/blogs/%E5%A2%A8%E5%8D%8A%E6%88%90%E9%9C%9C //------------------------------------------...
1027 0
Threejs实现镜头跟随物体移动效果,镜头拐弯并保持运动方向
Threejs实现镜头跟随物体移动效果,镜头拐弯并保持运动方向
1375 0
Threejs实现镜头跟随物体移动效果,镜头拐弯并保持运动方向
|
6月前
|
开发框架
threejs做特效:实现物体的发光效果-EffectComposer详解!
【8月更文挑战第7天】实现物体的发光效果-EffectComposer详解!
824 6
threejs做特效:实现物体的发光效果-EffectComposer详解!
|
6月前
|
机器学习/深度学习
第5章-着色基础-5.2-光源
第5章-着色基础-5.2-光源
37 0
|
6月前
|
存储 编解码 算法
第5章-着色基础-5.4-锯齿和抗锯齿
第5章-着色基础-5.4-锯齿和抗锯齿
58 1
|
4月前
|
JavaScript
ThreeJs通过DragControls实现物体拖动
这篇文章详细讲解了如何在Three.js中使用DragControls实现3D物体的鼠标拖动功能。
154 1
ThreeJs通过DragControls实现物体拖动

热门文章

最新文章