init

.gitignore

@@ -22,4 +22,5 @@ pnpm-debug.log*
 
 package-lock.json
 
-_bk
+_bk
+_note

README.md

@@ -1,13 +1,23 @@
-# Toys.028 | WebGL Carousel Demo.06 ~ PaperAnimation
+# Toys.029 | WebGL School Task.07 ~ Plane geometry animation using pure WebGL.
+
+## 🪬 ~ 要件
+- テクスチャを複数同時に利用する実装に挑戦してみましょう。
+※ 生 WebGL で実装すること
+
 
 ## 👾 ~ Demo
 
-- https://dev.shoya-kajita.com/028/
+
+- https://dev.shoya-kajita.com/029/
 
 <img src="public/assets/img/head/screenshot.webp">
 
+<img src="screenshot1.webp">
+
 <img src="screenshot2.webp">
 
+<img src="screenshot3.webp">
+
 ## 🎮 ~ Getting Started
 
 ```
@@ -26,9 +36,17 @@ npm run preview
 
 ## 📝 ~ Note
 
-- https://www.pentacreation.com/blog/2021/06/210605.html
-- https://tympanus.net/codrops/2020/01/22/how-to-unroll-images-with-three-js/
-- https://tympanus.net/Development/UnrollingImages/
-- https://github.com/akella/UnrollingImages/blob/master/js/shader/vertex.glsl
+### matcap
+
+- https://github.com/hughsk/matcap
 
-<img src="sample_sine.gif">
+```glsl
+// vec3 eye: the camera's current position.
+// vec3 normal: the surface's normal vector.
+
+vec2 matcap(vec3 eye, vec3 normal) {
+  vec3 reflected = reflect(eye, normal);
+  float m = 2.8284271247461903 * sqrt( reflected.z+1.0 );
+  return reflected.xy / m + 0.5;
+}
+```

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "astro": "^2.2.1",
     "gsap": "^3.11.4",
-    "three": "^0.148.0"
+    "lil-gui": "^0.18.2"
   },
   "devDependencies": {
     "@astrojs/sitemap": "^1.2.2",

src/assets/js/app.js

@@ -11,124 +11,63 @@ import "../scss/app.scss";
 
 // --------------------------
 import gsap from "gsap";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
-gsap.registerPlugin(ScrollTrigger);
 
 // --------------------------
 
 // module
 
 // --------------------------
-import { Global } from "./module/Global";
-import { Ua } from "./module/Ua";
-import { SetPropertySize } from "./module/SetPropertySize";
-
-// --------------------------
-
-// WebGL
-
-// --------------------------
+import { SetGui } from "./lib/setGui";
 import { WebGL } from "./webgl/WebGL";
 
 // --------------------------
 
-// windows
+// window
 
 // --------------------------
 window.MODE = process.env.NODE_ENV === "development";
 window.GSAP = gsap;
-window.ScrollTrigger = ScrollTrigger;
-window.G = new Global();
 
 window.addEventListener("DOMContentLoaded", (e) => {
-  const BREAK_POINT = 768;
+  new SetGui();
 
-  const body = document.body,
-    ua = new Ua(body);
-
-  const params = {
-    w: window.innerWidth,
-    h: window.innerHeight,
-    beforeWidth: window.innerWidth,
-    longer: 0,
-    shorter: 0,
-    aspect: 0,
-  };
-  params.aspect = params.w / params.h;
-  params.longer = params.w > params.h ? params.w : params.h;
-  params.shorter = params.w < params.h ? params.w : params.h;
+  const world = document.getElementById("world");
+  const worldRect = world.getBoundingClientRect();
 
   const bool = {
-    isMatchMediaWidth: window.matchMedia("(max-width: 768px)").matches,
     isMatchMediaHover: window.matchMedia("(hover: hover)").matches,
-    isPc: ua.data.device === "pc",
-    isIphone: ua.data.iphone === "iphone",
-    isDeve: MODE, // false
   };
 
-  const timer = {
-    resize: null,
-    orientation: null,
+  const params = {
+    w: window.innerWidth,
+    h: bool.isMatchMediaHover ? window.innerHeight : worldRect.height,
   };
 
-  SetPropertySize(params.w, params.h);
-
-  const webgl = new WebGL(body, params, bool);
+  const webgl = new WebGL(params);
+  webgl.init();
 
-  const raf = () => {
-    const time = performance.now() / 1000;
-    webgl.raf(time);
-  };
+  GSAP.ticker.add(webgl.raf);
+  GSAP.ticker.fps(30);
 
   const resize = () => {
-    bool.isMatchMediaWidth = window.matchMedia("(max-width: 768px)").matches;
     params.w = window.innerWidth;
-    params.h = window.innerHeight;
-    params.aspect = params.w / params.h;
-    params.longer = params.w > params.h ? params.w : params.h;
-    params.shorter = params.w < params.h ? params.w : params.h;
-
-    const props = {
-      isMatchMediaWidth: bool.isMatchMediaWidth,
-      w: params.w,
-      h: params.h,
-      aspect: params.aspect,
-      longer: params.longer,
-      shorter: params.shorter,
-    };
+    params.h = bool.isMatchMediaHover ? window.innerHeight : world.getBoundingClientRect().height;
 
-    SetPropertySize(params.w, params.h);
-    webgl.resize(props);
-
-    clearTimeout(timer.resize);
-    timer.resize = setTimeout(() => {
-      const threshold = () => {
-        const w = window.innerWidth;
-        if (w > BREAK_POINT) if (params.beforeWidth < BREAK_POINT + 1) window.location.reload();
-        if (w < BREAK_POINT + 1) if (params.beforeWidth > BREAK_POINT + 1) window.location.reload();
-        params.beforeWidth = w;
-      };
-      threshold();
-    }, 100);
+    webgl.resize(params);
   };
+  resize();
+  window.addEventListener("resize", resize, { passive: true });
 
-  const orientation = () => {
-    if (window.orientation != 0) {
-      if (params.w < params.h) {
-        clearTimeout(timer.orientation);
-        timer.orientation = setTimeout(() => {
-          window.location.reload();
-        }, 300);
-      }
-    }
-  };
-
-  document.fonts.ready.then((e) => {
-    webgl.init();
-    GSAP.ticker.add(raf);
-    GSAP.ticker.fps(30);
-    resize();
-    window.addEventListener("resize", resize, { passive: true });
-    if (!bool.isPc) window.addEventListener("orientationchange", orientation);
-  });
+  if (bool.isMatchMediaHover) {
+    // 右クリック禁止
+    document.oncontextmenu = function () {
+      return false;
+    };
+    document.getElementsByTagName("html")[0].oncontextmenu = function () {
+      return false;
+    };
+    document.body.oncontextmenu = function () {
+      return false;
+    };
+  }
 });

src/assets/js/webgl/lib/SetGui.js → src/assets/js/lib/setGui.js

@@ -1,14 +1,14 @@
-import GUI from "three/examples/jsm/libs/lil-gui.module.min";
+import GUI from "lil-gui";
 
 export class SetGui {
   constructor() {
     this.gui = null;
     window.GUI = null;
     // if (MODE) {
-    this.gui = new GUI();
-    window.GUI = this.gui;
-    this.toOpen();
-    // this.toClose();
+    //   this.gui = new GUI();
+    //   window.GUI = this.gui;
+    //   this.toOpen();
+    //   // this.toClose();
     // }
   }