From 8bb91323e302bfe20e93e3a24cc06371dc5087ac Mon Sep 17 00:00:00 2001
From: PastLeo <chgu82837@gmail.com>
Date: Sun, 15 Aug 2021 15:19:09 +0800
Subject: [PATCH] 02-texture-2d: day 7 - racing-pattern

---
 02-texture-2d.js | 42 ++++++++++++++++++++++++++++++------------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/02-texture-2d.js b/02-texture-2d.js
index 98c506f..2b16091 100644
--- a/02-texture-2d.js
+++ b/02-texture-2d.js
@@ -47,24 +47,42 @@ async function main() {
   const resolutionUniformLocation = gl.getUniformLocation(program, 'u_resolution');
   const textureUniformLocation = gl.getUniformLocation(program, 'u_texture');
 
-  const image = await loadImage('https://i.imgur.com/ISdY40yh.jpg');
+  // const image = await loadImage('https://i.imgur.com/ISdY40yh.jpg');
   // const image = await loadImage('https://i.imgur.com/vryPVknh.jpg');
   const texture = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_2D, texture);
+  // gl.texImage2D(
+  //   gl.TEXTURE_2D,
+  //   0, // level
+  //   gl.RGB, // internalFormat
+  //   gl.RGB, // format
+  //   gl.UNSIGNED_BYTE, // type
+  //   image, // data
+  // );
+
+  const whiteColor = [255, 255, 255, 255];
+  const blackColor = [0, 0, 0, 255];
   gl.texImage2D(
     gl.TEXTURE_2D,
     0, // level
-    gl.RGB, // internalFormat
-    gl.RGB, // format
+    gl.RGBA, // internalFormat
+    2, // width
+    2, // height
+    0, // border
+    gl.RGBA, // format
     gl.UNSIGNED_BYTE, // type
-    image, // data
+    new Uint8Array([
+      ...whiteColor, ...blackColor,
+      ...blackColor, ...whiteColor,
+    ])
   );
 
-  gl.generateMipmap(gl.TEXTURE_2D);
+  // gl.generateMipmap(gl.TEXTURE_2D);
 
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
 
   // a_position
   const positionBuffer = gl.createBuffer();
@@ -112,12 +130,12 @@ async function main() {
     gl.ARRAY_BUFFER,
     new Float32Array([
       0, 0, // A
-      1, 0, // B
-      1, 1, // C
+      8, 0, // B
+      8, 8, // C
 
       0, 0, // D
-      1, 1, // E
-      0, 1, // F
+      8, 8, // E
+      0, 8, // F
     ]),
     gl.STATIC_DRAW,
   );