Live Note

Remain optimistic

Posted on Edited on In

绘制过程

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

代码实现

使用varying标识符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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 Edited on In

绘制步骤

  1. 创建顶点数组。
  2. 创建一个 Buffer。
  3. 将 WebGL 的 ARRAY_BUFFER 指向所创建的 Buffer。
  4. 将顶点数组赋值到 Buffer 中。
  5. 将 Buffer 分配给 Vertex Shader 中的 Attribute。
  6. 让 Vertex Shader 访问 Buffer。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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
}

Posted on Edited on In

What is OpenID?

OpenID 是一种用于标识用户身份的协议，它允许用户在多个网站上使用同一个用户名和密码。它是由一组标准定义的，包括一个身份提供者（IdP）和一个身份验证服务（AS）。IdP 是网站或服务，它提供用户的身份信息，并将其发送给 AS。AS 是另一个网站或服务，它验证 IdP 发送的身份信息，并确认用户的身份。

OpenID 工作流程

  1. 用户选择 OpenID 提供商: 比如 Google/Tencent 或其他支持 OpenID 的服务来管理他们的身份。
  2. 用户访问应用网站，点击登录按钮。
  3. 重定向到 OpenID 提供商，验证用户身份。
  4. 用户认证成功后，OpenID 提供商将用户信息发送给应用网站。
  5. 应用网站验证用户信息，确认用户身份。
  6. 应用网站允许用户访问受保护的资源。
Read more »

Posted on Edited on In

一旦声明，值不可变

1
2
const PI = 3.14
PI = 3 //TypeError: Assignment to constant variable.

只声明不赋值也会报错。

1
const foo; //SyntaxError: Missing initializer in const declaration

实质为变量指向的内存地址不可变动

const 只能保证这个指针是固定的，不能控制数据结构的变化。

1
2
3
const foo = {}
foo.prop = 123 //Success
foo = {} //TypeError: 'foo' is read-only

对象冻结方法

使用 Object.freeze 函数，冻结对象

1
const foo = Object.freeze({})

冻结属性的函数

1
2
3
4
5
6
7
8
var makeConstant = (obj) => {
  Object.freeze(obj)
  Object.keys(obj).forEach((key, i) => {
    if (typeof obj[key] === "object") {
      makeConstant(obj[key])
    }
  })
}

Posted on Edited on

激活 Windows

  1. 查看 OS 版本：
    • run.exe: slmgr.vbs -dlv，查看产品密钥通道。
    • OEM：出厂版本
    • Retail：零售版本
    • VL(Vol)：批量激活版本
  2. 只有 VL 版本可以激活。
  3. 使用 cmd：slmgr /skms kms.03k.org，把skms地址设置为 kms.03k.org
  4. slmgr /ato，手动激活

激活 Office

Office 必须是 VL 版本

  1. 进入 Office 安装地址，找到 OSPP.VBS
  2. cmd：cscript ospp.vbs /sethst:kms.03k.org，指定kms服务地址
  3. cscript ospp.vbs /act，手动激活

工具网站：office tool plus