WebGL笔记:图形缩放的原理和实现

缩放

1 )原理

  • 缩放可以理解为对向量长度的改变,或者对向量坐标分量的同步缩放
    • 如下图,比如
    • 让向量OA 收缩到点B的位置,也就是从OA变成OB,缩放了一半

2 )公式

  • 已知

    • 点A的位置是(ax,ay,az)
    • 点A基于原点內缩了一半
    • 点A內缩了一半后的bx、by、bz位置B
  • js 复制代码
    bx = ax * 0.5
    by = ay * 0.5
    bz = az * 0.5

在着色器中缩放

1 )核心代码

  • 可以对gl_Position 的x、y、z依次缩放

    html 复制代码
    <script id="vertexShader" type="x-shader/x-vertex">
      attribute vec4 a_Position;
      float scale = 1.2; // 注意这里声明了浮点型,一点要用浮点数,否则会导致 UseProgram: program not valid 的警告
      void main() {
        gl_Position.x = a_Position.x * scale;
        gl_Position.y = a_Position.y * scale;
        gl_Position.z = a_Position.z * scale;
        gl_Position.w = 1.0; // 注意 w 的值,默认1.0
      }
    </script>
  • 也可以从a_Position中抽离出由x、y、z组成的三维向量,对其进行一次性缩放

    html 复制代码
    <script id="vertexShader" type="x-shader/x-vertex">
      attribute vec4 a_Position;
      float scale = 1.2;
      void main() {
        gl_Position = vec4(vec3(a_Position) * scale, 1.0);
      }
    </script>

2 )完整代码

html 复制代码
<canvas id="canvas"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec4 a_Position;
  float scale = 1.0;
  void main() {
      gl_Position = vec4(vec3(a_Position) * scale, 1.0);
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  void main(){
      gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
  }
</script>
<script type="module">
  import { initShaders } from './utils.js';

  const canvas = document.getElementById('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const gl = canvas.getContext('webgl');
  const vsSource = document.getElementById('vertexShader').innerText;
  const fsSource = document.getElementById('fragmentShader').innerText;
  initShaders(gl, vsSource, fsSource);

  const vertices = new Float32Array([
    0.0, 0.1,
    -0.1, -0.1,
    0.1, -0.1
  ])

  const vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(a_Position);
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>

用js缩放图形

1 )核心代码

  • 同样的我们也可以把缩放系数暴露给js,通过js 缩放图形
    • 建立uniform变量

      html 复制代码
      <script id="vertexShader" type="x-shader/x-vertex">
          attribute vec4 a_Position;
          uniform float u_Scale;
          void main() {
              gl_Position = vec4(vec3(a_Position) * u_Scale, 1.0);
          }
      </script>
    • 使用js获取并修改uniform 变量

      js 复制代码
      const u_Scale = gl.getUniformLocation(gl.program, 'u_Scale')
      gl.uniform1f(u_Scale, 1.0)
    • 添加动画让其动起来

      js 复制代码
      let angle = 0
      !(function animate() {
          angle += 0.05;
          const scale = Math.sin(n) + 1; // 借助三角函数正弦进行缩放 (-1, 1) + 1 => (0, 2)
          gl.uniform1f(u_Scale, scale);
          gl.clear(gl.COLOR_BUFFER_BIT);
          gl.drawArrays(gl.TRIANGLES, 0, 3);
          requestAnimationFrame(animate)
      })()

2 )完整代码

html 复制代码
<canvas id="canvas"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec4 a_Position;
  uniform float u_Scale;
  void main() {
      gl_Position = vec4(vec3(a_Position) * u_Scale, 1.0);
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  void main() {
      gl_FragColor = vec4(1.0,1.0,0.0,1.0);
  }
</script>
<script type="module">
  import { initShaders } from './utils.js';

  const canvas = document.getElementById('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const gl = canvas.getContext('webgl');

  const vsSource = document.getElementById('vertexShader').innerText;
  const fsSource = document.getElementById('fragmentShader').innerText;
  initShaders(gl, vsSource, fsSource);
  
  const vertices = new Float32Array([
    0.0, 0.1,
    -0.1, -0.1,
    0.1, -0.1
  ])

  const vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(a_Position);

  const u_Scale = gl.getUniformLocation(gl.program, 'u_Scale')
  gl.uniform1f(u_Scale, 1);

  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLES, 0, 3);

  let angle = 0;
  !(function animate() {
    angle += 0.05;
    const scale = Math.sin(angle) + 1;
    gl.uniform1f(u_Scale, scale);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    requestAnimationFrame(animate);
  })()
</script>
相关推荐
魂断蓝桥66610 小时前
使用three.js实现3D消防,消防管线,消防教育(课一:消防给水系统01)
webgl·数字孪生·three.js·3d建筑·物联网3d·3d定位、三维室内定位、3d建筑·3d消防·消防演习模拟·消防给水系统
烛阴1 天前
Mix
前端·webgl
烛阴2 天前
Tile Pattern
前端·webgl
平行云3 天前
实时云渲染将UE像素流嵌入业务系统,实现二维管理系统与数字孪生三维可视化程序的无缝交互
unity·webgl·数字孪生·云渲染·虚幻引擎·实时云渲染·像素流送
烛阴5 天前
Mod
前端·webgl
烛阴7 天前
Fract - Grid
前端·webgl
cos8 天前
从像素到粒子:p5.js 图像转动态粒子的设计与实现
前端·javascript·webgl
山海鲸可视化11 天前
模型材质一键替换~轻松还原多种三维场景
webgl·数字孪生·材质·3d模型·三维渲染
Perfumere12 天前
【WebGPU学习杂记】Uniform和Stroage的区别和适用场景
前端·webgl
蓝婷儿13 天前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl