= [];
+
+ private _v:Visual;
+
+ constructor(opt:any) {
+ super(opt)
+
+ this._v = new Visual({
+ el:this.getEl()
+ })
+
+ const text = '水の中で見えるテキスト';
+
+ let txt = '';
+ let arr = Array.from(text);
+ for(let i = 0; i < arr.length; i++) {
+ txt += '' + arr[i % arr.length] + '';
+ }
+ txt += '
';
+ (document.querySelector('.l-text') as HTMLElement).innerHTML = txt;
+ document.querySelectorAll('.l-text span').forEach((val) => {
+ const t = new Text({
+ el:val
+ });
+ this._text.push(t);
+ })
+
+ this._resize();
+ }
+
+
+ protected _update(): void {
+ super._update();
+
+ // モニターサイズと位置
+ const displayInfo: {x:number, y:number, width:number, height:number} = {
+ width:window.screen.width,
+ height:window.screen.height,
+ x:window.screenX,
+ y:window.screenY,
+ }
+
+ this._pos.y += (displayInfo.y - this._pos.y) * 0.1
+
+ // const sw = Func.instance.sw();
+ const sh = Func.instance.sh();
+
+ // 波の位置
+ const waveY = Util.instance.map(this._pos.y, -sh * 0.5, sh * 1, 0, displayInfo.height - sh);
+ this._v.baseY = waveY;
+
+ }
+
+
+ protected _resize(): void {
+ super._resize();
+ }
+}
\ No newline at end of file
diff --git a/src/parts/text.ts b/src/parts/text.ts
new file mode 100755
index 0000000..9b45c41
--- /dev/null
+++ b/src/parts/text.ts
@@ -0,0 +1,36 @@
+import { MyDisplay } from "../core/myDisplay";
+import { Tween } from "../core/tween";
+import { Util } from "../libs/util";
+
+// -----------------------------------------
+//
+// -----------------------------------------
+export class Text extends MyDisplay {
+
+ // private _noise:number = Util.instance.random(0, 1)
+
+ constructor(opt:any) {
+ super(opt)
+
+ this._c = Util.instance.random(0, 10000)
+
+ this._resize();
+ }
+
+
+ protected _update(): void {
+ super._update();
+
+ const radian = Util.instance.radian(this._c * 1);
+ Tween.instance.set(this.getEl(), {
+ rotationZ:Math.sin(radian) * 10,
+ y:Math.cos(radian * 1.2) * 10,
+ x:Math.sin(radian * -0.95) * 2,
+ })
+ }
+
+
+ protected _resize(): void {
+ super._resize();
+ }
+}
\ No newline at end of file
diff --git a/src/parts/visual.ts b/src/parts/visual.ts
new file mode 100755
index 0000000..5291103
--- /dev/null
+++ b/src/parts/visual.ts
@@ -0,0 +1,126 @@
+import { Func } from '../core/func';
+import { Canvas } from '../webgl/canvas';
+import { Object3D } from 'three/src/core/Object3D';
+import { MeshBasicMaterial } from "three/src/materials/MeshBasicMaterial";
+import { Mesh } from 'three/src/objects/Mesh';
+import { Color } from 'three/src/math/Color';
+import { Vector3 } from 'three/src/math/Vector3';
+import { CatmullRomCurve3 } from 'three/src/extras/curves/CatmullRomCurve3';
+import { Util } from "../libs/util";
+import { ShapeGeometry } from 'three/src/geometries/ShapeGeometry';
+import { Shape } from 'three/src/extras/core/Shape';
+
+export class Visual extends Canvas {
+
+ private _con:Object3D;
+ private _mesh:Mesh;
+
+ public baseY:number = 0;
+
+ constructor(opt: any) {
+ super(opt);
+
+ this._con = new Object3D();
+ this.mainScene.add(this._con);
+
+ this._mesh = new Mesh(
+ this._makeGeo(),
+ new MeshBasicMaterial({
+ color:0x0000ff,
+ }),
+ );
+ this._con.add(this._mesh);
+
+ this._resize();
+ }
+
+
+ protected _update(): void {
+ super._update();
+
+ this._mesh.geometry.dispose();
+ this._mesh.geometry = this._makeGeo();
+
+ if (this.isNowRenderFrame()) {
+ this._render()
+ }
+ }
+
+
+ private _render(): void {
+ const bgColor = new Color(0xffffff)
+ this.renderer.setClearColor(bgColor, 1)
+ this.renderer.render(this.mainScene, this.camera)
+ }
+
+
+ public isNowRenderFrame(): boolean {
+ return this.isRender
+ }
+
+
+ _resize(isRender: boolean = true): void {
+ super._resize();
+
+ const w = Func.instance.sw();
+ const h = Func.instance.sh();
+
+ this.renderSize.width = w;
+ this.renderSize.height = h;
+
+ this.updateCamera(this.camera, w, h);
+
+ let pixelRatio: number = window.devicePixelRatio || 1;
+
+ this.renderer.setPixelRatio(pixelRatio);
+ this.renderer.setSize(w, h);
+ this.renderer.clear();
+
+ if (isRender) {
+ this._render();
+ }
+ }
+
+
+ // ---------------------------------
+ //
+ // ---------------------------------
+ private _makeGeo():ShapeGeometry {
+ const arr:Array = []
+
+ const sw = Func.instance.sw();
+ const sh = Func.instance.sh();
+ const radius = sh * 0.1;
+
+ let startX = sw * -0.6;
+ let endX = sw * 0.6;
+ let startY = this.baseY;
+
+ let ang = 0;
+ let i = startX;
+ const interval = sw * 0.05;
+ while(i < endX) {
+ const radian = Util.instance.radian(this._c + ang);
+ arr.push(new Vector3(i, startY + Math.sin(radian) * radius, 0));
+ i += interval;
+ ang += 10;
+ }
+
+ arr.push(new Vector3(endX, -sh, 0));
+ arr.push(new Vector3(startX, -sh, 0));
+
+ const curve = new CatmullRomCurve3(arr, true);
+ const points = curve.getPoints(50);
+
+ const shape = new Shape()
+ points.forEach((val,i) => {
+ if(i == 0) {
+ shape.moveTo(val.x, val.y);
+ } else {
+ shape.lineTo(val.x, val.y)
+ }
+ });
+
+ return new ShapeGeometry(shape);
+ }
+}
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..df27f29
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,50 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #000;
+ font-family: 'Noto Serif JP', serif;
+}
+
+.l-main {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.l-text {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-size: 48px;
+ color: #FFF;
+ letter-spacing: 0.5em;
+}
+
+.l-text span {
+ display: inline-block;
+}
+
+
+
+.link {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ padding: 10px;
+ font-size: 18px;
+ color: inherit;
+ text-decoration: none;
+ color: #FFF;
+ background-color: #000;
+ z-index: 9999;
+}
\ No newline at end of file
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/src/webgl/canvas.ts b/src/webgl/canvas.ts
new file mode 100755
index 0000000..afbba38
--- /dev/null
+++ b/src/webgl/canvas.ts
@@ -0,0 +1,83 @@
+import { MyDisplay } from "../core/myDisplay";
+import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer';
+import { Scene } from 'three/src/scenes/Scene';
+import { Rect } from "../libs/rect";
+import { OrthographicCamera } from 'three/src/cameras/OrthographicCamera';
+// import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera';
+import { Camera } from 'three/src/cameras/Camera';
+import { Mesh } from 'three/src/objects/Mesh';
+import { Points } from 'three/src/objects/Points';
+import { Vector3 } from 'three/src/math/Vector3';
+
+export class Canvas extends MyDisplay {
+
+ public camera:Camera
+ public renderer:WebGLRenderer
+ public mainScene:Scene
+
+ public isRender:boolean = true
+ public renderSize:Rect = new Rect()
+
+ constructor(opt:any = {}) {
+ super(opt)
+
+ let renderParam:any = {
+ canvas : this.el,
+ antialias: false,
+ preserveDrawingBuffer : true,
+ powerPreference : 'low-power',
+ }
+ this.renderer = new WebGLRenderer(renderParam)
+ this.renderer.autoClear = true
+ this.renderer.setClearColor(0xffffff, 1)
+
+ this.mainScene = new Scene()
+
+ this.camera = this._makeCamera()
+ this.updateCamera(this.camera, 10, 10)
+ }
+
+ init() {
+ super.init()
+ }
+
+ protected _makeCamera():Camera {
+ return new OrthographicCamera(1, 1, 1, 1)
+ // return new PerspectiveCamera(50, 1, 0.0000001, 50000)
+ }
+
+ public updateCamera(camera:Camera, w:number = 10, h:number = 10) {
+ this._updateOrthCamera(camera as OrthographicCamera, w, h)
+ // this._updateOrthCamera(camera as PerspectiveCamera, w, h)
+ }
+
+ protected _updateOrthCamera(camera:OrthographicCamera, w:number = 10, h:number = 10) {
+ // protected _updateOrthCamera(camera:PerspectiveCamera, w:number = 10, h:number = 10) {
+ camera.left = -w * 0.5
+ camera.right = w * 0.5
+ camera.top = h * 0.5
+ camera.bottom = -h * 0.5
+ camera.near = -10000
+ camera.far = 100000
+ camera.updateProjectionMatrix()
+ camera.position.set(0, 0, 0)
+ camera.lookAt(new Vector3(0, 0, 0))
+
+ // camera.aspect = w / h
+ // camera.updateProjectionMatrix()
+ // camera.position.z = h / Math.tan(camera.fov * Math.PI / 360) / 2
+ }
+
+ protected _update():void {
+ super._update()
+ }
+
+ protected _setUni(m:Mesh | Points, name:string, val:any):void {
+ const uni = this._getUni(m)
+ uni[name].value = val
+ }
+
+ protected _getUni(mesh:any):any {
+ return mesh.material.uniforms
+ }
+}
\ No newline at end of file
diff --git a/src/webgl/ieTexture.ts b/src/webgl/ieTexture.ts
new file mode 100755
index 0000000..7f1b72a
--- /dev/null
+++ b/src/webgl/ieTexture.ts
@@ -0,0 +1,25 @@
+import { Texture } from 'three/src/textures/Texture';
+// import { RGBAFormat,RGBAFOr } from 'three/src/constants';
+
+export class IETexture {
+
+ constructor() {
+ }
+
+ // -----------------------------------
+ //
+ // -----------------------------------
+ public load(src:string, onLoaded:any):Texture {
+ const t = new Texture()
+ const img = new Image()
+ img.onload = () => {
+ t.image = img
+ // const isJPEG = (src.indexOf('.jpg') > 0)
+ // t.format = isJPEG ? RGBFormat : RGBAFormat
+ t.needsUpdate = true
+ if(onLoaded != undefined) onLoaded()
+ }
+ img.src = src
+ return t
+ }
+}
diff --git a/src/webgl/myObject3D.ts b/src/webgl/myObject3D.ts
new file mode 100755
index 0000000..2507d36
--- /dev/null
+++ b/src/webgl/myObject3D.ts
@@ -0,0 +1,59 @@
+import { Update } from "../libs/update";
+import { Resize } from "../libs/resize";
+import { Object3D } from 'three/src/core/Object3D';
+import { Mesh } from 'three/src/objects/Mesh';
+
+export class MyObject3D extends Object3D {
+
+ private _updateHandler:any
+ private _layoutHandler:any
+
+ protected _c:number = 0
+
+ constructor() {
+ super()
+
+ this._updateHandler = this._update.bind(this)
+ Update.instance.add(this._updateHandler)
+
+ this._layoutHandler = this._resize.bind(this)
+ Resize.instance.add(this._layoutHandler)
+ }
+
+ init() {
+ }
+
+ // 破棄
+ public dispose() {
+ Update.instance.remove(this._updateHandler)
+ this._updateHandler = null
+
+ Resize.instance.remove(this._layoutHandler)
+ this._layoutHandler = null
+ }
+
+
+ protected _update():void {
+ this._c++
+ }
+
+
+ protected _resize():void {
+ }
+
+
+ protected _getUni(mesh:any):any {
+ return mesh.material.uniforms
+ }
+
+
+ protected _setUni(m:Mesh, name:string, val:any):void {
+ const uni = this._getUni(m)
+ uni[name].value = val
+ }
+
+
+ protected _call(f:any):void {
+ if(f != undefined) f()
+ }
+}
\ No newline at end of file
diff --git a/src/webgl/texLoader.ts b/src/webgl/texLoader.ts
new file mode 100755
index 0000000..de7c103
--- /dev/null
+++ b/src/webgl/texLoader.ts
@@ -0,0 +1,151 @@
+import { TextureLoader } from 'three/src/loaders/TextureLoader';
+import { Texture } from 'three/src/textures/Texture';
+import { Util } from '../libs/util';
+import { IETexture } from './ieTexture';
+
+export class TexLoader {
+
+ private static _instance:TexLoader;
+
+ private _list:Array = []
+ private _tex:Array = []
+ // private _num:number = 0
+ private _loadedNum:number = 0
+ private _isIE:boolean = Util.instance.isIE()
+
+ public onComplete?:Function
+ public onProgress?:Function
+
+ constructor() {
+ }
+
+ public static get instance():TexLoader {
+ if (!this._instance) {
+ this._instance = new TexLoader();
+ }
+ return this._instance;
+ }
+
+
+ // -----------------------------------
+ //
+ // -----------------------------------
+ public load(opt:any):void {
+ this.onComplete = opt.onComplete
+ this.onProgress = opt.onProgress
+
+ if(opt.list.length == 0) {
+ if(this.onComplete != undefined) {
+ this.onComplete()
+ }
+ return
+ }
+
+ this._list = opt.list
+ this._loadedNum = 0
+
+ this._load()
+ }
+
+
+ // -----------------------------------
+ //
+ // -----------------------------------
+ private _load():void {
+ const data = this._list[this._loadedNum]
+
+ if(this.check(data.src)) {
+ this._loadedImg()
+ return
+ }
+
+ let texloader,tex
+ if(this._isIE) {
+ texloader = new IETexture()
+ tex = texloader.load(data.src, () => {
+ this._loadedImg()
+ })
+ } else {
+ texloader = new TextureLoader()
+ texloader.crossOrigin = '*'
+ tex = texloader.load(data.src, () => {
+ this._loadedImg()
+ })
+ }
+
+ this._tex.push({
+ tex:tex,
+ src:data.src
+ })
+ }
+
+
+ // -----------------------------------
+ //
+ // -----------------------------------
+ private _loadedImg():void {
+ this._loadedNum++
+
+ if(this.onProgress != undefined) {
+ this.onProgress(this._loadedNum / this._list.length)
+ }
+
+ if(this._loadedNum >= this._list.length) {
+ if(this.onComplete != undefined) {
+ this.onComplete()
+ }
+ return
+ }
+
+ this._load()
+ }
+
+
+ // -----------------------------------
+ //
+ // -----------------------------------
+ public get(src:string):Texture {
+
+ let preTex:any = null;
+ this._tex.forEach((item) => {
+ if(item.src == src) {
+ preTex = item.tex
+ }
+ })
+ if(preTex != null) {
+ return preTex
+ }
+
+ let t:any
+ if(!this._isIE) {
+ t = new TextureLoader()
+ t.crossOrigin = 'anonymous'
+ } else {
+ t = new IETexture()
+ }
+
+ const tex = t.load(src)
+
+ this._tex.push({
+ tex:tex,
+ src:src
+ })
+
+ return tex
+ }
+
+
+ // -----------------------------------
+ //
+ // -----------------------------------
+ public check(src:string):boolean {
+ let flg = false
+ this._tex.forEach((item) => {
+ if(item.src == src) {
+ flg = true
+ }
+ })
+ return flg
+ }
+
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..1885c8f
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,18 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "useDefineForClassFields": true,
+ "module": "ESNext",
+ "lib": ["ESNext", "DOM"],
+ "moduleResolution": "Node",
+ "strict": true,
+ "sourceMap": true,
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
+ "noEmit": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noImplicitReturns": true
+ },
+ "include": ["src"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..ff36c62
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,11 @@
+import glsl from 'vite-plugin-glsl'
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [glsl()],
+ base: './',
+ server: {
+ host: true
+ }
+})
\ No newline at end of file