Live Note

Waves svg

Posted on 2021-01-12 Edited on 2025-07-03

Waves

图像位移

Posted on 2020-06-18 Edited on 2025-07-03 In WebGL

位移原理

与在普通的坐标系中一样，只需在需要位移的坐标位置加入相应的矢量即可。
(x1, y1, z1, w1) + (x2, y2, z2, w2) -> (x1 + x2, y1 + y2, z1 + z2, w1 + w2)
平移矩阵：

$$
\begin{bmatrix}
x’ \
y’ \
z’ \
1
\end{bmatrix} =
\begin{bmatrix}
1 & 0 & 0 & Tx \
0 & 1 & 0 & Ty \
0 & 0 & 1 & Tz \
0 & 0 & 0 & 1 \
\end{bmatrix} ×
\begin{bmatrix}
x \
y \
z \
1 \
\end{bmatrix}
$$

代码实现

// position = P + ▲P
const vShaderSource = `
    attribute vec4 a_Position;
    uniform vec4 u_Translation;
    void main() {
        gl_Position = a_Position + u_Translation;
    }
`

const fShaderSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`

// Displacement
const Tx = 0.4,
  Ty = -0.2,
  Tz = 0.3
Tw = 0.0

function main() {
  const gl = document.querySelector('#canvas').getContext('webgl')

  if (!initShaders(gl, vShaderSource, fShaderSource)) return

  let n = initVertexBuffers(gl)
  if (n < 0) return

  let u_Translation = gl.getUniformLocation(gl.program, 'u_Translation')
  gl.uniform4f(u_Translation, Tx, Ty, Tz, Tw)

  gl.clearColor(0.0, 0.0, 0.0, 1.0)
  gl.clear(gl.COLOR_BUFFER_BIT)

  gl.drawArrays(gl.TRIANGLES, 0, n)
}

function initVertexBuffers(gl) {
  let vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5])
  let n = vertices.length / 2

  let vertexBuffer = gl.createBuffer()
  if (!vertexBuffer) {
    console.log('failed to create buffer')
    return -1
  }

  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

  let a_Position = gl.getAttribLocation(gl.program, 'a_Position')

  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
  gl.enableVertexAttribArray(a_Position)

  return n
}

图像旋转

Posted on 2020-06-19 Edited on 2025-07-03 In WebGL

旋转原理

将 WebGL 坐标系转为极坐标，然后通过角度计算得出旋转后的左标位置。
旋转矩阵：

$$
\begin{bmatrix}
x’ \
y’ \
z’ \
1 \
\end{bmatrix} =
\begin{bmatrix}
\cos \beta & -\sin \beta & 0 & 0 \
\sin \beta & \cos \beta & 0 & 0 \
0 & 0 & 1 & 0 \
0 & 0 & 0 & 1 \
\end{bmatrix} ×
\begin{bmatrix}
x \
y \
z \
1 \
\end{bmatrix}
$$

代码实现

使用u_SinBCosB存放SinB与CosB。

/**
 * 2d rotate
 * x' = x * cosB - y * sinB
 * y' = x * sinB + y * cosB
 * z' = z
 */
const vShaderSource = `
    attribute vec4 a_Position;
    uniform vec2 u_SinBCosB;
    void main() {
        gl_Position.x = a_Position.x * u_SinBCosB.y - a_Position.y * u_SinBCosB.x;
        gl_Position.y = a_Position.x * u_SinBCosB.x + a_Position.y * u_SinBCosB.y;
        gl_Position.z = a_Position.z;
        gl_Position.w = 1.0;
    }
`

const fShaderSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`

let ANGLE = 30.0

function main() {
  const gl = document.querySelector("#canvas").getContext("webgl")
  if (!initShaders(gl, vShaderSource, fShaderSource)) return

  let n = initVertexBuffers(gl)
  if (n < 0) return

  let radian = (Math.PI * ANGLE) / 180.0 // Transform to radian.
  let SinB = Math.sin(radian)
  let CosB = Math.cos(radian)

  let u_SinBCosB = gl.getUniformLocation(gl.program, "u_SinBCosB")

  gl.uniform2f(u_SinBCosB, SinB, CosB)

  gl.clearColor(0.0, 0.0, 0.0, 1.0)
  gl.clear(gl.COLOR_BUFFER_BIT)

  gl.drawArrays(gl.TRIANGLES, 0, n)
}

绘制不同颜色

Posted on 2020-06-22 Edited on 2025-07-03 In WebGL

绘制过程

执行 Vertex Shader，配置顶点。
调用gl.drawArrays()，装配图形。
光栅化，将图形转换为 Fragment。
执行 Fragment Shader。

代码实现

使用varying标识符

const vShaderSource = `
    attribute vec4 a_Position;
    attribute vec4 a_Color;
    varying vec4 v_Color;
    void main() {
        gl_Position = a_Position;
        gl_PointSize = 10.0;
        v_Color = a_Color;
    }
`

const fShaderSource = `
    precision mediump float;
    varying vec4 v_Color;
    void main() {
        gl_FragColor = v_Color;
    }
`

const main = () => {
  const gl = document.querySelector("#canvas").getContext("webgl")
  if (!initShaders(gl, vShaderSource, fShaderSource)) return

  let n = initVertexBuffers(gl)
  if (n < 0) return

  gl.clearColor(0, 0, 0, 1)
  gl.clear(gl.COLOR_BUFFER_BIT)

  // gl.drawArrays(gl.LINE_LOOP, 0, n);
  gl.drawArrays(gl.TRIANGLES, 0, n)
}

const initVertexBuffers = (gl) => {
  let verticesColor = new Float32Array([
    // [x, y, r, g, b]
    0, 0.5, 1, 0, 0, -0.5, -0.5, 0, 1, 0, 0.5, -0.5, 0, 0, 1,
  ])
  let n = 3

  let vertexColorBuffer = gl.createBuffer()
  if (!vertexColorBuffer) return -1
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer)
  gl.bufferData(gl.ARRAY_BUFFER, verticesColor, gl.STATIC_DRAW)

  const SIZE = verticesColor.BYTES_PER_ELEMENT
  let a_Position = gl.getAttribLocation(gl.program, "a_Position")
  let a_Color = gl.getAttribLocation(gl.program, "a_Color")

  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, SIZE * 5, 0)
  gl.enableVertexAttribArray(a_Position)

  gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, SIZE * 5, SIZE * 2)
  gl.enableVertexAttribArray(a_Color)

  return n
}

绘制多个点

Posted on 2020-06-18 Edited on 2025-07-03 In WebGL

绘制步骤

创建顶点数组。
创建一个 Buffer。
将 WebGL 的 ARRAY_BUFFER 指向所创建的 Buffer。
将顶点数组赋值到 Buffer 中。
将 Buffer 分配给 Vertex Shader 中的 Attribute。
让 Vertex Shader 访问 Buffer。

const vShaderSource = `
    attribute vec4 a_Position;
    void main() {
        gl_Position = a_Position;
        gl_PointSize = 5.0;
    }
`

const fShaderSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`

function main() {
  const gl = document.querySelector("#canvas").getContext("webgl")

  if (!initShaders(gl, vShaderSource, fShaderSource)) {
    return
  }

  let n = initVertexBuffers(gl)
  if (n < 0) {
    console.log("failed to set positions")
    return
  }

  gl.clearColor(0.0, 0.0, 0.0, 1.0)
  gl.clear(gl.COLOR_BUFFER_BIT)

  gl.drawArrays(gl.POINTS, 0, n) // (type, first, count = n)
}

function initVertexBuffers(gl) {
  let vertices = new Float32Array([
    // Create points array.
    0.0, 0.5, -0.5, -0.5, 0.5, -0.5,
  ])
  let n = vertices.length / 2 // Compute the n.

  let vertexBuffer = gl.createBuffer() // Create buffer.
  if (!vertexBuffer) {
    console.log("failed to create buffer")
    return -1
  }

  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer) // Bind buffer.
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW) // Draw data into buffer.

  let a_Position = gl.getAttribLocation(gl.program, "a_Position")

  // size = 2 because of the [x, y] components
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0) // Set data into 'a_Position'.
  gl.enableVertexAttribArray(a_Position) // Link attribute and Buffer.

  return n
}