前言

這是我第一篇學習 shader 的文章，藉由上完 three.js journey lessons 27 - Shaders 後，嘗試延伸用老師的範例畫出自己國家的國旗

為什麼需要寫 shader?

Three.js 裡已經有內建各式各樣的 Geometry (ex. PlaneGeometry, BoxGeometry) 可以創建不同形狀的物體，但如果需要對這些 Geometry 裡個別的頂點們進行操作 (ex. 改變位置、顏色) 就需要 Shader 來進行精細的操作

前言

Threejs 中的 texture(貼圖) 可以設置 offset, repeat 及 wrap 屬性，但大部分文章都只有文字說明而沒有視覺化的範例，所以寫了一個視覺化範例讓自己能夠理解

Demo

圖片渲染在 (x,y) 平面上，右方橘色線為 x 軸，上方綠色線為 y 軸

此為 event loop 系列文章 - 第 4 篇：

1. Javascript 中的 event loop 及瀏覽器渲染機制
2. 從程式碼角度來看 event loop
3. 使用原生的 queueMicrotask 處理微任務
4. Vue.nextTick() 中的 event loop

前言

這篇文章想藉由閱讀 Vue.nextTick() 的源碼來看 event loop 的使用

Vue.nextTick 的使用方式

官方文件寫明 Vue.nextTick() 是拿來等待下一次 DOM 更新的方法，因為 Vue 在每次響應式數據改變後是異步去更新 DOM，所以如果在數據改變後，馬上獲取 DOM 的資料會是舊的，這時就需要用到 Vue.nextTick() 獲取更新後的 DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script setup>
import { ref, nextTick } from 'vue'

const count = ref(0)

async function increment() {
  count.value++

  // DOM 还未更新
  console.log(document.getElementById('counter').textContent) // 0

  await nextTick()
  
  // DOM 此时已经更新
  console.log(document.getElementById('counter').textContent) // 1
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

此為 event loop 系列文章 - 第 3 篇：

1. Javascript 中的 event loop 及瀏覽器渲染機制
2. 從程式碼角度來看 event loop
3. 使用原生的 queueMicrotask 處理微任務
4. Vue.nextTick() 中的 event loop

前言

在研究 event loop 的過程中，赫然發現原來瀏覽器已經有了原生的 queueMicrotask 讓開發者可以自行管理微任務的執行，下面我們來看看什麼情況下會需要用到這個功能吧

基本用法

基本上 queueMicrotask 就如同使用 new Promise() 一樣，會將 callback 加入到 微任務佇列 (microtask queue)

1
2
3
4
5
6
7
8

let callback = () => console.log("Regular timeout callback has run");

let urgentCallback = () =>  console.log("*** Oh noes! An urgent callback has run!");

console.log("Main program started");
setTimeout(callback, 0);
queueMicrotask(urgentCallback);
console.log("Main program exiting");

此為 event loop 系列文章 - 第 2 篇：

1. Javascript 中的 event loop 及瀏覽器渲染機制
2. 從程式碼角度來看 event loop
3. 使用原生的 queueMicrotask 處理微任務
4. Vue.nextTick() 中的 event loop

前言

上一篇介紹了 event loop 的運行原理，這篇文章希望藉由各種範例進一步體會 event loop 的執行順序

各種不同的 event loop 範例

1. 基本的 event loop 執行順序

1
2
3
4
5
6
7
8
9

setTimeout(() => {
  console.log('timeout')
}, 0)

Promise.resolve().then(() => {
  console.log('promise');
});

console.log('main script');

此為 event loop 系列文章 - 第 1 篇：

1. Javascript 中的 event loop 及瀏覽器渲染機制
2. 從程式碼角度來看 event loop
3. 使用原生的 queueMicrotask 處理微任務
4. Vue.nextTick() 中的 event loop

前言

event loop 是 js 中一個蠻重要的概念，雖然以前知道 宏任務 (macrotask) 及 微任務 (microtask) 優先級上的差別，但似乎一直不知道 event loop 與瀏覽器渲染間的關係，而大部分的文章都只單獨介紹 event loop 或是 瀏覽器渲染流程，所以寫了這篇文章統整 event loop 與 瀏覽器渲染 間的關聯性

event loop 的作用

以前端來說，在瀏覽器中使用者的畫面點擊、呼叫後端 api、window.addEventListener，這些全部都由 js 執行，但 js 是單線程的程式語言，同一時間就是只能做一件事，所以當事情同時發生時，需要讓 js 知道哪行程式碼是先被執行的、而接下來又該執行哪段程式碼，這個負責安排執行順序的東西，基本上就叫做 event loop

event loop 的宿主環境

嚴格來說 event loop 並不是定義在 js 上的東西，而是根據不同環境有不同的 event loop 規則，以瀏覽器來說就會有瀏覽器的 event loop 規則，而 nodejs 的話又會有另一套 nodejs 的 event loop 規則，今天這篇文章只探討瀏覽器的 event loop

THREE.Vector3 是 threejs 中最常用到的基礎類別，代表 3 維向量的運算

Vector3 的方法

- add(v: Vector3): this

1
2
3

const addVector3 = new THREE.Vector3(1, 1, 1);
addVector3.add(new THREE.Vector3(2, 2, 2));
console.log('.add', addVector3); // {x: 3, y: 3, z: 3}

- addScalar(s: Float): this

1
2
3

const addScalarVector3 = new THREE.Vector3(1, 1, 1);
addScalarVector3.addScalar(2);
console.log('.addScalar', addScalarVector3); // {x: 3, y: 3, z: 3}

THREE.Plane 在 threejs 中用來表示數學上的平面

數學中的平面方程式

a, b, c 代表平面的法向量，d 是一個常數值

1

ax + by + cz + d = 0;

創建平面

以下程式碼創建了一個 y - 1 = 0 的平面，法向量為 [0, 1, 0]，常數值為 -1

1
2
3

const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0).normalize(), -1);
console.log("normal", plane.normal); // {x: 0, y: 1, z: 0}
console.log("constant", plane.constant); // -1

說明

向量內積代表從其中一個向量投影到另一個向量

定義

餘弦定理是三角形中三邊長度與一個角的 餘弦值(cos) 的數學式，公式定義如下：