├── .npmrc
├── tsconfig.json
├── .prettierignore
├── postcss.config.js
├── src
    ├── components
    │   ├── Footer.astro
    │   ├── ActiveLink.astro
    │   └── Header.astro
    ├── env.d.ts
    ├── js
    │   ├── glsl
    │   │   ├── main.vert
    │   │   └── main.frag
    │   └── modules
    │   │   └── scene.ts
    ├── pages
    │   ├── about.astro
    │   └── index.astro
    └── layouts
    │   └── Layout.astro
├── tailwind.config.js
├── .vscode
    ├── launch.json
    ├── extensions.json
    └── settings.json
├── .gitignore
├── .editorconfig
├── .prettierrc.js
├── astro.config.mjs
├── public
    └── favicon.svg
├── package.json
├── README.md
└── .eslintrc.js


/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict = true
2 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "astro/tsconfigs/strict"
3 | }


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | yarn.lock
4 | pnpm-lock.yaml
5 | dist/
6 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     'tailwindcss/nesting': {},
4 |   },
5 | };
6 | 


--------------------------------------------------------------------------------
/src/components/Footer.astro:
--------------------------------------------------------------------------------
1 | ---
2 | ---
3 | 
4 | <footer class="p-4">
5 |   <p>® 2023</p>
6 | </footer>
7 | 


--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference path="../.astro/types.d.ts" />
2 | /// <reference types="astro/client" />
3 | 


--------------------------------------------------------------------------------
/src/js/glsl/main.vert:
--------------------------------------------------------------------------------
1 | attribute vec2 uv;
2 | attribute vec2 position;
3 | varying vec2 vUv;
4 | 
5 | void main() {
6 |   vUv = uv;
7 |   gl_Position = vec4(position, 0, 1);
8 | }
9 | 


--------------------------------------------------------------------------------
/src/pages/about.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Layout from '../layouts/Layout.astro';
3 | ---
4 | 
5 | <Layout title="About">
6 |   <h1 class="text-2xl font-bold">About page</h1>
7 | </Layout>
8 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 |   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2.0",
 3 |   "configurations": [
 4 |     {
 5 |       "command": "./node_modules/.bin/astro dev",
 6 |       "name": "Development server",
 7 |       "request": "launch",
 8 |       "type": "node-terminal"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/src/js/glsl/main.frag:
--------------------------------------------------------------------------------
 1 | precision highp float;
 2 | uniform float uTime;
 3 | uniform vec3 uColor;
 4 | uniform float uOffset;
 5 | varying vec2 vUv;
 6 | 
 7 | void main() {
 8 |   gl_FragColor.rgb = 0.3 + 0.3 * cos(vUv.xyx * uOffset + uTime) + uColor;
 9 |   gl_FragColor.a = 1.0;
10 | }
11 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "recommendations": [
 3 |     "astro-build.astro-vscode",
 4 |     "bradlc.vscode-tailwindcss",
 5 |     "EditorConfig.EditorConfig",
 6 |     "dbaeumer.vscode-eslint",
 7 |     "esbenp.prettier-vscode"
 8 |   ],
 9 |   "unwantedRecommendations": []
10 | }
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # build output
 2 | dist/
 3 | 
 4 | # generated types
 5 | .astro/
 6 | 
 7 | # dependencies
 8 | node_modules/
 9 | 
10 | # logs
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # environment variables
17 | .env
18 | .env.production
19 | 
20 | # macOS-specific files
21 | .DS_Store
22 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | end_of_line = lf
 6 | insert_final_newline = true
 7 | trim_trailing_whitespace = true
 8 | indent_style = space
 9 | indent_size = 2
10 | 
11 | [*.{md,markdown}]
12 | trim_trailing_whitespace = false
13 | 
14 | [*.{css,scss,sass}]
15 | indent_style = tab
16 | indent_size = 4
17 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @type {import('prettier').Options}
 3 |  **/
 4 | module.exports = {
 5 |   singleQuote: true,
 6 |   semi: true,
 7 |   plugins: [require.resolve('prettier-plugin-astro')],
 8 |   overrides: [
 9 |     {
10 |       files: '*.astro',
11 |       options: {
12 |         parser: 'astro',
13 |       },
14 |     },
15 |   ],
16 | };
17 | 


--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from '../layouts/Layout.astro';
 3 | ---
 4 | 
 5 | <Layout title="Home">
 6 |   <h1 class="text-2xl font-bold">Home page</h1>
 7 |   <canvas class="scene fixed inset-0 -z-10"></canvas>
 8 | </Layout>
 9 | <script>
10 |   import Scene from '../js/modules/scene';
11 | 
12 |   (() => {
13 |     new Scene();
14 |   })();
15 | </script>
16 | 


--------------------------------------------------------------------------------
/src/components/ActiveLink.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | export interface Props {
 3 |   href: string;
 4 |   className?: string;
 5 |   activeClassName?: string;
 6 | }
 7 | 
 8 | const { href, className, activeClassName } = Astro.props;
 9 | 
10 | const isActive = href === Astro.url.pathname;
11 | ---
12 | 
13 | <a href={href} class:list={[className, isActive && activeClassName]}>
14 |   <slot />
15 | </a>
16 | 


--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | import { defineConfig } from 'astro/config';
 3 | import tailwind from '@astrojs/tailwind';
 4 | // import relativeLinks from 'astro-relative-links';
 5 | 
 6 | // https://astro.build/config
 7 | export default defineConfig({
 8 |   scopedStyleStrategy: 'class',
 9 |   integrations: [
10 |     tailwind(),
11 |     // relativeLinks(),
12 |   ],
13 |   devToolbar: {
14 |     enabled: false,
15 |   },
16 | });
17 | 


--------------------------------------------------------------------------------
/src/layouts/Layout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Footer from '../components/Footer.astro';
 3 | import Header from '../components/Header.astro';
 4 | 
 5 | export interface Props {
 6 |   title: string;
 7 | }
 8 | 
 9 | const { title } = Astro.props;
10 | ---
11 | 
12 | <!DOCTYPE html>
13 | <html lang="ja">
14 |   <head>
15 |     <meta charset="UTF-8" />
16 |     <meta name="viewport" content="width=device-width" />
17 |     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
18 |     <title>{title}</title>
19 |   </head>
20 |   <body class="flex min-h-screen flex-col">
21 |     <Header />
22 |     <main class="grow">
23 |       <slot />
24 |     </main>
25 |     <Footer />
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/src/components/Header.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import ActiveLink from './ActiveLink.astro';
 3 | ---
 4 | 
 5 | <header class="flex justify-between">
 6 |   <p class="p-4 font-bold">Hello</p>
 7 |   <nav>
 8 |     <ul class="flex">
 9 |       {
10 |         [
11 |           {
12 |             label: 'Home',
13 |             href: '/',
14 |           },
15 |           {
16 |             label: 'About',
17 |             href: '/about/',
18 |           },
19 |         ].map(({ label, href }) => {
20 |           return (
21 |             <li>
22 |               <ActiveLink
23 |                 className="block p-4"
24 |                 activeClassName="underline"
25 |                 href={href}
26 |               >
27 |                 {label}
28 |               </ActiveLink>
29 |             </li>
30 |           );
31 |         })
32 |       }
33 |     </ul>
34 |   </nav>
35 | </header>
36 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
 2 |   <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
 3 |   <path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
 4 |   <defs>
 5 |     <linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
 6 |       <stop stop-color="#000"/>
 7 |       <stop offset="1" stop-color="#000" stop-opacity="0"/>
 8 |     </linearGradient>
 9 |   </defs>
10 | 	<style>
11 |     @media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
12 |   </style>
13 | </svg>
14 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "eslint.validate": [
 3 |     "javascript",
 4 |     "javascriptreact",
 5 |     "astro", // Enable .astro
 6 |     "typescript", // Enable .ts
 7 |     "typescriptreact" // Enable .tsx
 8 |   ],
 9 |   "[html]": {
10 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
11 |   },
12 |   "[javascript]": {
13 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
14 |   },
15 |   "[json]": {
16 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
17 |   },
18 |   "[markdown]": {
19 |     "files.trimTrailingWhitespace": false
20 |   },
21 |   "[typescript]": {
22 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
23 |   },
24 |   "[typescriptreact]": {
25 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
26 |   },
27 |   "editor.codeActionsOnSave": {
28 |     "source.fixAll.eslint": "explicit"
29 |   },
30 |   "editor.formatOnSave": true,
31 |   "editor.defaultFormatter": "esbenp.prettier-vscode"
32 | }
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bulge-effect",
 3 |   "version": "0.0.2",
 4 |   "engines": {
 5 |     "node": ">= 18"
 6 |   },
 7 |   "scripts": {
 8 |     "dev": "astro dev",
 9 |     "start": "astro dev",
10 |     "build": "astro check && astro build",
11 |     "preview": "astro preview",
12 |     "astro": "astro"
13 |   },
14 |   "dependencies": {
15 |     "@astrojs/check": "^0.9.3",
16 |     "@astrojs/tailwind": "^5.1.0",
17 |     "astro": "^4.13.3",
18 |     "astro-relative-links": "^0.4.0",
19 |     "gsap": "^3.12.5",
20 |     "lil-gui": "^0.19.2",
21 |     "ogl": "^1.0.8",
22 |     "tailwindcss": "^3.4.9",
23 |     "typescript": "^5.6.2"
24 |   },
25 |   "devDependencies": {
26 |     "@typescript-eslint/parser": "^8.0.1",
27 |     "eslint": "^9.9.0",
28 |     "eslint-plugin-astro": "^1.2.3",
29 |     "eslint-plugin-tailwindcss": "^3.17.4",
30 |     "glsl-noise": "^0.0.0",
31 |     "glslify": "^7.1.1",
32 |     "prettier": "^3.3.3",
33 |     "prettier-plugin-astro": "^0.14.1"
34 |   }
35 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Astro template builder to quickly generate 2D shaders in the browser.
 2 | 
 3 | ```
 4 | npm create astro@latest -- --template ixkaito/astro-2d-shader-template
 5 | ```
 6 | 
 7 | ## 🚀 Project Structure
 8 | 
 9 | Inside of your Astro project, you'll see the following folders and files:
10 | 
11 | ```
12 | /
13 | ├── public/
14 | │   └── favicon.svg
15 | ├── src/
16 | │   ├── components/
17 | │   │   └── ActiveLink.astro
18 | │   │   └── Footer.astro
19 | │   │   └── Header.astro
20 | │   ├── layouts/
21 | │   │   └── Layout.astro
22 | │   └── pages/
23 | │       └── about.astro
24 | │       └── index.astro
25 | └── package.json
26 | ```
27 | 
28 | Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
29 | 
30 | There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
31 | 
32 | Any static assets, like images, can be placed in the `public/` directory.
33 | 
34 | ## 🧞 Commands
35 | 
36 | All commands are run from the root of the project, from a terminal:
37 | 
38 | | Command                | Action                                           |
39 | | :--------------------- | :----------------------------------------------- |
40 | | `npm install`          | Installs dependencies                            |
41 | | `npm run dev`          | Starts local dev server at `localhost:3000`      |
42 | | `npm run build`        | Build your production site to `./dist/`          |
43 | | `npm run preview`      | Preview your build locally, before deploying     |
44 | | `npm run astro ...`    | Run CLI commands like `astro add`, `astro check` |
45 | | `npm run astro --help` | Get help using the Astro CLI                     |
46 | 
47 | ## 👀 Want to learn more?
48 | 
49 | Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
50 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   plugins: ['tailwindcss'],
 3 |   extends: ['plugin:tailwindcss/recommended'],
 4 |   settings: {
 5 |     tailwindcss: {
 6 |       classRegex: '^(active)?[cC]lass(Name)?$',
 7 |     },
 8 |   },
 9 |   parserOptions: {
10 |     sourceType: 'module',
11 |     ecmaVersion: 2022,
12 |   },
13 |   overrides: [
14 |     {
15 |       // Define the configuration for `.astro` file.
16 |       files: ['*.astro'],
17 |       extends: ['plugin:astro/recommended'],
18 |       // Enable this plugin
19 |       plugins: ['astro'],
20 |       env: {
21 |         // Enables global variables available in Astro components.
22 |         node: true,
23 |         'astro/astro': true,
24 |         es2020: true,
25 |       },
26 |       // Allows Astro components to be parsed.
27 |       parser: 'astro-eslint-parser',
28 |       // Parse the script in `.astro` as TypeScript by adding the following configuration.
29 |       // It's the setting you need when using TypeScript.
30 |       parserOptions: {
31 |         parser: '@typescript-eslint/parser',
32 |         extraFileExtensions: ['.astro'],
33 |         // The script of Astro components uses ESM.
34 |         sourceType: 'module',
35 |       },
36 |       rules: {
37 |         // Enable recommended rules
38 |         'astro/no-conflict-set-directives': 'error',
39 |         'astro/no-unused-define-vars-in-style': 'error',
40 | 
41 |         // override/add rules settings here, such as:
42 |         // "astro/no-set-html-directive": "error"
43 |       },
44 |     },
45 |     {
46 |       // Define the configuration for `<script>` tag.
47 |       // Script in `<script>` is assigned a virtual file name with the `.js` extension.
48 |       files: ['**/*.astro/*.js', '*.astro/*.js'],
49 |       env: {
50 |         browser: true,
51 |         es2020: true,
52 |       },
53 |       parserOptions: {
54 |         sourceType: 'module',
55 |       },
56 |       rules: {
57 |         // override/add rules settings here, such as:
58 |         // "no-unused-vars": "error"
59 | 
60 |         // If you are using "prettier/prettier" rule,
61 |         // you don't need to format inside <script> as it will be formatted as a `.astro` file.
62 |         'prettier/prettier': 'off',
63 |       },
64 |     },
65 |   ],
66 | };
67 | 


--------------------------------------------------------------------------------
/src/js/modules/scene.ts:
--------------------------------------------------------------------------------
  1 | import GUI from 'lil-gui';
  2 | import { Renderer, Program, Color, Mesh, Triangle } from 'ogl';
  3 | import vertex from '../glsl/main.vert?raw';
  4 | import fragment from '../glsl/main.frag?raw';
  5 | // import LoaderManager from '@/js/managers/LoaderManager'
  6 | 
  7 | class Scene {
  8 |   #renderer?: Renderer;
  9 |   #mesh?: Mesh;
 10 |   #program?: Program;
 11 |   #guiObj = {
 12 |     offset: 1,
 13 |   };
 14 | 
 15 |   constructor() {
 16 |     this.setGUI();
 17 |     this.setScene();
 18 |     this.events();
 19 |   }
 20 | 
 21 |   setGUI() {
 22 |     const gui = new GUI();
 23 | 
 24 |     const handleChange = (value: number) => {
 25 |       if (this.#program) {
 26 |         this.#program.uniforms.uOffset.value = value;
 27 |       }
 28 |     };
 29 | 
 30 |     gui.add(this.#guiObj, 'offset', 0.5, 4).onChange(handleChange);
 31 |   }
 32 | 
 33 |   setScene() {
 34 |     const canvasEl = document.querySelector('.scene');
 35 | 
 36 |     if (!(canvasEl instanceof HTMLCanvasElement)) {
 37 |       throw new Error("Couldn't find canvas element");
 38 |     }
 39 | 
 40 |     this.#renderer = new Renderer({
 41 |       dpr: Math.min(window.devicePixelRatio, 2),
 42 |       canvas: canvasEl,
 43 |     });
 44 |     const gl = this.#renderer.gl;
 45 |     gl.clearColor(1, 1, 1, 1);
 46 | 
 47 |     this.handleResize();
 48 | 
 49 |     // Rather than using a plane (two triangles) to cover the viewport here is a
 50 |     // triangle that includes -1 to 1 range for 'position', and 0 to 1 range for 'uv'.
 51 |     // Excess will be out of the viewport.
 52 | 
 53 |     //         position                uv
 54 |     //      (-1, 3)                  (0, 2)
 55 |     //         |\                      |\
 56 |     //         |__\(1, 1)              |__\(1, 1)
 57 |     //         |__|_\                  |__|_\
 58 |     //   (-1, -1)   (3, -1)        (0, 0)   (2, 0)
 59 | 
 60 |     const geometry = new Triangle(gl);
 61 | 
 62 |     // // To load files like textures, do :²
 63 |     // LoaderManager.load(
 64 |     //   [
 65 |     //     {
 66 |     //       name: 'matcap',
 67 |     //       texture: './img/matcap.png',
 68 |     //     },
 69 |     //   ],
 70 |     //   gl
 71 |     // ).then(() => {
 72 |     //   // do something
 73 |     //   console.log(LoaderManager.assets)
 74 |     // })
 75 | 
 76 |     this.#program = new Program(gl, {
 77 |       vertex,
 78 |       fragment,
 79 |       uniforms: {
 80 |         uTime: { value: 0 },
 81 |         uColor: { value: new Color(0.3, 0.2, 0.5) },
 82 |         uOffset: { value: this.#guiObj.offset },
 83 |       },
 84 |     });
 85 | 
 86 |     this.#mesh = new Mesh(gl, { geometry, program: this.#program });
 87 |   }
 88 | 
 89 |   events() {
 90 |     window.addEventListener('resize', this.handleResize, false);
 91 |     requestAnimationFrame(this.handleRAF);
 92 |   }
 93 | 
 94 |   handleResize = () => {
 95 |     this.#renderer?.setSize(window.innerWidth, window.innerHeight);
 96 |   };
 97 | 
 98 |   handleRAF = (t: number) => {
 99 |     requestAnimationFrame(this.handleRAF);
100 | 
101 |     if (this.#program) {
102 |       this.#program.uniforms.uTime.value = t * 0.001;
103 |     }
104 | 
105 |     // Don't need a camera if camera uniforms aren't required
106 |     if (this.#mesh) {
107 |       this.#renderer?.render({ scene: this.#mesh });
108 |     }
109 |   };
110 | }
111 | 
112 | export default Scene;
113 | 


--------------------------------------------------------------------------------