Merge branch 'master' of https://github.com/sky124380729/sky124380729…

….github.io
sky124380729 · Jan 3, 2024 · d13a309 · d13a309 · vercel · Jan 3, 2024
2 parents 9d8d8a4 + 8a15250
commit d13a309
Show file tree

Hide file tree

Showing 13 changed files with 1,071 additions and 0 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+packages/webgl/index.js
diff --git a/packages/webgl/backgroud-image-multiple.html b/packages/webgl/backgroud-image-multiple.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    .wrapper {
+      width: 400px;
+      height: 400px;
+      position: relative;
+      display: block;
+      background-color: gray;
+      margin: 50px auto;
+    }
+
+    .wrapper::after {
+      position: absolute;
+      content: ' ';
+      display: block;
+      width: 1px;
+      height: 400px;
+      background-color: #fff;
+      top: 0;
+      left: 200px;
+    }
+
+    .wrapper::before {
+      position: absolute;
+      content: ' ';
+      display: block;
+      width: 400px;
+      height: 1px;
+      background-color: #fff;
+      top: 200px;
+      left: 0;
+    }
+  </style>
+</head>
+<body>
+  <div class="wrapper">
+    <canvas id="canvas" width="400" height="400">此浏览器不支持canvas</canvas>
+  </div>
+
+  <script src="./index.js"></script>
+  <script>
+    const canvas = document.getElementById('canvas')
+    const gl = canvas.getContext('webgl')
+
+    const VERTEX_SHADER_SOURCE = `
+      attribute vec4 aPosition;
+      attribute vec4 aTex;
+      varying vec2 vTex;
+      void main() {
+        gl_Position = aPosition;
+        vTex = vec2(aTex.x, aTex.y);
+      }
+    `
+    const FRAGMENT_SHADER_SOURCE = `
+
+      precision lowp float;
+      uniform sampler2D uSampler;
+      uniform sampler2D uSampler1;
+      varying vec2 vTex;
+      void main() {
+        vec4 c1 = texture2D(uSampler, vTex);
+        vec4 c2 = texture2D(uSampler1, vTex);
+        gl_FragColor = c1 * c2;
+      }
+    `
+
+    const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)
+
+    const aPosition = gl.getAttribLocation(program, 'aPosition')
+
+    const aTex = gl.getAttribLocation(program, 'aTex')
+
+    const uSampler = gl.getUniformLocation(program, 'uSampler')
+
+    const uSampler1 = gl.getUniformLocation(program, 'uSampler1')
+
+    const points = new Float32Array([
+      -0.5, 0.5, 0.0, 1.0,
+      -0.5, -0.5, 0.0, 0.0,
+      0.5, 0.5, 1.0, 1.0,
+      0.5, -0.5, 1.0, 0.0,
+    ])
+
+    const buffer = gl.createBuffer()
+
+    const BYTES = points.BYTES_PER_ELEMENT
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+
+    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW)
+
+    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, BYTES * 4, 0)
+
+    gl.enableVertexAttribArray(aPosition)
+
+    gl.vertexAttribPointer(aTex, 2, gl.FLOAT, false, BYTES * 4, BYTES * 2)
+
+    gl.enableVertexAttribArray(aTex)
+
+
+    function getImage(url, location, index ) {
+      return new Promise(resolve => {
+        const img = new Image();
+        img.onload = function() {
+          // 创建纹理对象
+          const texture = gl.createTexture()
+          // 翻转 图片 y轴 （坐标系转换）
+          gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)
+          // 开启一个纹理单元
+          gl.activeTexture(gl[`TEXTURE${index}`])
+          // 绑定纹理对象
+          gl.bindTexture(gl.TEXTURE_2D, texture)
+          // 处理放大缩小的逻辑
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
+          // 横向 纵向 平铺的方式
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
+          // 配置纹理对象
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img)
+
+          gl.uniform1i(location, index)
+
+          resolve();
+        }
+        img.src = url
+      })
+    }
+
+    Promise.all([getImage('./imgs/levi.jpg', uSampler, 0), getImage('./imgs/tomato.jpg', uSampler1, 1)]).then(() => {
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
+    })
+
+  </script>
+</body>
+</html>
diff --git a/packages/webgl/backgroud-image.html b/packages/webgl/backgroud-image.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    .wrapper {
+      width: 400px;
+      height: 400px;
+      position: relative;
+      display: block;
+      background-color: gray;
+      margin: 50px auto;
+    }
+
+    .wrapper::after {
+      position: absolute;
+      content: ' ';
+      display: block;
+      width: 1px;
+      height: 400px;
+      background-color: #fff;
+      top: 0;
+      left: 200px;
+    }
+
+    .wrapper::before {
+      position: absolute;
+      content: ' ';
+      display: block;
+      width: 400px;
+      height: 1px;
+      background-color: #fff;
+      top: 200px;
+      left: 0;
+    }
+  </style>
+</head>
+<body>
+  <div class="wrapper">
+    <canvas id="canvas" width="400" height="400">此浏览器不支持canvas</canvas>
+  </div>
+
+  <script src="./index.js"></script>
+  <script>
+    const canvas = document.getElementById('canvas')
+    const gl = canvas.getContext('webgl')
+
+    const VERTEX_SHADER_SOURCE = `
+      attribute vec4 aPosition;
+      attribute vec4 aTex;
+      varying vec2 vTex;
+      void main() {
+        gl_Position = aPosition;
+        vTex = vec2(aTex.x, aTex.y);
+      }
+    `
+    const FRAGMENT_SHADER_SOURCE = `
+
+      precision lowp float;
+      uniform sampler2D uSampler;
+      varying vec2 vTex;
+      void main() {
+        gl_FragColor = texture2D(uSampler, vTex);
+      }
+    `
+
+    const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)
+
+    const aPosition = gl.getAttribLocation(program, 'aPosition')
+
+    const aTex = gl.getAttribLocation(program, 'aTex')
+
+    const uSampler = gl.getUniformLocation(program, 'uSampler')
+
+    const points = new Float32Array([
+      -0.5, 0.5, 0.0, 1.0,
+      -0.5, -0.5, 0.0, 0.0,
+      0.5, 0.5, 1.0, 1.0,
+      0.5, -0.5, 1.0, 0.0,
+    ])
+
+    const buffer = gl.createBuffer()
+
+    const BYTES = points.BYTES_PER_ELEMENT
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+
+    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW)
+
+    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, BYTES * 4, 0)
+
+    gl.enableVertexAttribArray(aPosition)
+
+    gl.vertexAttribPointer(aTex, 2, gl.FLOAT, false, BYTES * 4, BYTES * 2)
+
+    gl.enableVertexAttribArray(aTex)
+
+
+    const img = new Image();
+
+    img.onload = function() {
+      // 创建纹理对象
+      const texture = gl.createTexture()
+      // 翻转 图片 y轴 （坐标系转换）
+      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)
+      // 开启一个纹理单元
+      gl.activeTexture(gl.TEXTURE0)
+      // 绑定纹理对象
+      gl.bindTexture(gl.TEXTURE_2D, texture)
+      // 处理放大缩小的逻辑
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
+      // 横向 纵向 平铺的方式
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
+      // 配置纹理对象
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img)
+
+      gl.uniform1i(uSampler, 0)
+
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
+
+    }
+
+    img.src = './imgs/levi.jpg'
+
+  </script>
+</body>
+</html>
diff --git a/packages/webgl/imgs/levi.jpg b/packages/webgl/imgs/levi.jpg
diff --git a/packages/webgl/imgs/tomato.jpg b/packages/webgl/imgs/tomato.jpg
diff --git a/packages/webgl/index.js b/packages/webgl/index.js
@@ -20,3 +20,33 @@ function initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {
 
   return program
 }
+
+// 平移矩阵
+function getTranslateMatrix(x = 0, y = 0, z = 0) {
+  return new Float32Array([
+    1.0, 0.0, 0.0, 0.0,
+    0.0, 1.0, 0.0, 0.0,
+    0.0, 0.0, 1.0, 0.0,
+    x, y, z, 1
+  ])
+}
+
+// 缩放矩阵
+function getScaleMatrix(x = 1, y = 1, z = 1) {
+  return new Float32Array([
+    x, 0.0, 0.0, 0.0,
+    0.0, y, 0.0, 0.0,
+    0.0, 0.0, z, 0.0,
+    0.0, 0.0, 0.0, 1
+  ])
+}
+
+// 绕z轴旋转矩阵
+function getRotateMatrix(deg) {
+  return new Float32Array([
+    Math.cos(deg), Math.sin(deg), 0.0, 0.0,
+    -Math.sin(deg), Math.cos(deg), 0.0, 0.0,
+    0.0, 0.0, 1.0, 0.0,
+    0.0, 0.0, 0.0, 1
+  ])
+}