Skip to content

Commit 709f2d7

Browse files
mayank1513mayank1513
authored
Merge pull request #2 from react18-tools/add-example
Enhancements: Added Rotating Cube Example, Improved GLSL Operators, and Optimized File Handling
2 parents 20ae214 + 5eef57b commit 709f2d7

File tree

21 files changed

+364
-43
lines changed

21 files changed

+364
-43
lines changed

‎.vscode/settings.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,8 @@
1313
"editor.formatOnSave": true,
1414
"editor.formatOnPaste": true,
1515
"editor.formatOnSaveMode": "file",
16-
"mayank1513.trello-kanban.Workspace.filePath": ".tkb"
16+
"mayank1513.trello-kanban.Workspace.filePath": ".tkb",
17+
"[glsl]": {
18+
"editor.defaultFormatter": "raczzalan.webgl-glsl-editor"
19+
}
1720
}

‎README.md‎

Lines changed: 57 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,61 +2,107 @@
22

33
[![test](https://github.com/react18-tools/esbuild-plugin-webgl/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/esbuild-plugin-webgl/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/c2532ae011e53b1bf011/maintainability)](https://codeclimate.com/github/react18-tools/esbuild-plugin-webgl/maintainability) [![codecov](https://codecov.io/gh/react18-tools/esbuild-plugin-webgl/graph/badge.svg)](https://codecov.io/gh/react18-tools/esbuild-plugin-webgl) [![Version](https://img.shields.io/npm/v/esbuild-plugin-webgl.svg?colorB=green)](https://www.npmjs.com/package/esbuild-plugin-webgl) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/esbuild-plugin-webgl.svg)](https://www.npmjs.com/package/esbuild-plugin-webgl) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/esbuild-plugin-webgl) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
44

5-
ESBuild plugin to load webGL shaders from `.glsl` files.
5+
ESBuild plugin to load WebGL shaders from `.glsl` files.
66

77
> <img src="https://github.com/react18-tools/esbuild-plugin-webgl/blob/main/popper.png?raw=true" style="height: 20px"/> Please consider starring [this repository](https://github.com/react18-tools/esbuild-plugin-webgl) and sharing it with your friends.
88
9+
## Overview
10+
11+
This ESBuild plugin streamlines the process of loading WebGL shaders in your JavaScript or TypeScript projects. By allowing you to import GLSL shader files directly into your project, it ensures a seamless development experience for WebGL applications. This approach promotes better separation of concerns by eliminating the need to hard code GLSL shader code into your JS or TS files. Additionally, it compresses the shader code, helping you to deliver a smaller minified bundle for your library.
12+
13+
### Key Features
14+
15+
- **Easy Integration**: Easily integrate GLSL shaders into your ESBuild workflow.
16+
- **TypeScript Support**: Full support for TypeScript, making it easier to work with shaders in a type-safe environment.
17+
- **Lightweight**: Minimal footprint, ensuring your build times remain fast.
18+
- **Flexible Configuration**: Compatible with various build tools and configurations, including `tsup` and standard `esbuild` setups.
19+
920
## Getting Started
1021

22+
Follow these steps to get started with the ESBuild Plugin WebGL:
23+
1124
### Installation
1225

26+
You can install the plugin using your preferred package manager:
27+
28+
Using `pnpm`:
29+
1330
```bash
1431
$ pnpm add esbuild-plugin-webgl
1532
```
1633

17-
**_or_**
34+
Using `npm`:
1835

1936
```bash
2037
$ npm install esbuild-plugin-webgl
2138
```
2239

23-
**_or_**
40+
Using `yarn`:
2441

2542
```bash
2643
$ yarn add esbuild-plugin-webgl
2744
```
2845

29-
> If you are using `monorepo` or `workspaces`, you can install this plugin to the root using `-w` or to a specific workspace using `--filter your-package` or `--scope your-package` for `pnpm` or `yarn` workspaces, respectively.
46+
> **Note**: If you are using a monorepo or workspaces, you can install this plugin at the root using the `-w` option or to a specific workspace using `--filter your-package` or `--scope your-package` for `pnpm` or `yarn` workspaces, respectively.
47+
48+
## Usage
49+
50+
### With `tsup`
3051

31-
## Use with `tsup`
52+
To use the plugin with `tsup`, add it to your `tsup.config.ts` or `tsup.config.js` file:
3253

3354
```ts
3455
// tsup.config.ts or tsup.config.js
3556
import { defineConfig } from "tsup";
3657
import { webglPlugin } from "esbuild-plugin-webgl";
3758

38-
export default defineConfig(options => ({
59+
export default defineConfig((options) => ({
3960
...
40-
esbuildPlugins:[webglPlugin()]
61+
esbuildPlugins: [webglPlugin()],
4162
}));
4263
```
4364

44-
## Use with `esbuild`
65+
### With `esbuild`
66+
67+
To use the plugin directly with `esbuild`, include it in your build configuration:
4568

4669
```ts
4770
import { webglPlugin } from "esbuild-plugin-webgl";
4871

4972
esbuild.build({
50-
...
51-
plugins: [webglPlugin()],
73+
...
74+
plugins: [webglPlugin()],
5275
});
5376
```
5477

78+
### Example Usage
79+
80+
Here's a quick example of how you can import and use a GLSL shader in your project:
81+
82+
```ts
83+
import vertexShader from "./shaders/vertex.glsl";
84+
import fragmentShader from "./shaders/fragment.glsl";
85+
86+
// Initialize WebGL context and use the imported shaders
87+
const gl = canvas.getContext("webgl");
88+
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
89+
gl.shaderSource(vertexShader, vertexShaderSource);
90+
gl.compileShader(vertexShader);
91+
92+
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
93+
gl.shaderSource(fragmentShader, fragmentShaderSource);
94+
gl.compileShader(fragmentShader);
95+
```
96+
5597
![Alt](https://repobeats.axiom.co/api/embed/a1fadcf8aa3054acff5d430c970af9e61254da5c.svg "Repobeats analytics image")
5698

99+
## Contributing
100+
101+
Contributions are welcome! If you find a bug or have a feature request, please open an issue. For major changes, please open a discussion first to discuss what you would like to change.
102+
57103
## License
58104

59-
This library is licensed under the MPL-2.0 open-source license.
105+
This library is licensed under the MPL-2.0 open-source license. See the [LICENSE](LICENSE) file for more details.
60106

61107
> <img src="https://github.com/react18-tools/esbuild-plugin-webgl/blob/main/popper.png?raw=true" style="height: 20px"/> Please consider enrolling in [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsoring](https://github.com/sponsors/mayank1513) our work.
62108

‎examples/nextjs/src/app/page.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import MyButton from "./button";
22
import { LandingPage } from "@repo/shared/dist/server";
3-
import { Demo } from "@repo/shared";
3+
import { Demo, RotatingCube } from "@repo/shared";
44

55
export const metadata = {
66
title: "Esbuild Plugin Webgl",
@@ -10,6 +10,7 @@ export const metadata = {
1010
export default function Page(): JSX.Element {
1111
return (
1212
<LandingPage title="Next.js Example">
13+
<RotatingCube />
1314
<Demo />
1415
<MyButton />
1516
</LandingPage>

‎lib/CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# esbuild-plugin-webgl
22

3+
## 0.0.3
4+
5+
### Patch Changes
6+
7+
- dcf38c7: Update operators
8+
- 7899ee7: Use text loader instead
9+
310
## 0.0.2
411

512
### Patch Changes

‎lib/__tests__/index.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe("WebGL plugins", () => {
1212
bundle: true,
1313
minify: true,
1414
entryPoints: [path.resolve(__dirname, "shaders/render-frag.glsl")],
15-
outdir: "dist",
15+
outdir: "__tests__/dist",
1616
treeShaking: true,
1717
plugins: [webglPlugin()],
1818
});

‎lib/__tests__/shaders/render-vert.glsl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ precision mediump float;
44
in vec2 p;
55

66
void main() {
7-
gl_PointSize = 1.0;
8-
gl_Position = vec4(p, 0.0, 1.0);
7+
gl_PointSize = 1.f;
8+
gl_Position = vec4(p, 0.f, 1.f);
99
}

‎lib/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "esbuild-plugin-webgl",
33
"author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
44
"private": false,
5-
"version": "0.0.2",
5+
"version": "0.0.3",
66
"description": "ESBuild plugin to load webGL shaders from .glsl files.",
77
"license": "MPL-2.0",
88
"main": "./dist/index.js",

‎lib/src/index.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@ export const webglPlugin: () => Plugin = () => ({
1818
.replace(/\/\*.*\*\//gm, "")
1919
// remove line comments
2020
.replace(/\/\/.*/g, "")
21-
// remove white spaces around =
22-
.replace(/ [=+*-/] /g, m => m.trim())
21+
// remove white spaces around operators
22+
.replace(/ ([=+*-/%><&^|]|[=!><+*-/]=|&&|\|\||\^\^) /g, m => m.trim())
2323
.split("\n")
2424
.map(line => line.trim())
2525
.filter(Boolean);
26-
const contents = `export default \`${lines[0]}\n${lines.slice(1).join("")}\``;
27-
return { contents, loader: "ts" };
26+
const contents = `${lines[0]}\n${lines.slice(1).join("")}`;
27+
return { contents, loader: "text" };
2828
});
2929
},
3030
});

‎packages/shared/CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
# @repo/shared
22

3+
## 0.0.3
4+
5+
### Patch Changes
6+
7+
- Updated dependencies [dcf38c7]
8+
- Updated dependencies [7899ee7]
9+
- [email protected]
10+
311
## 0.0.2
412

513
### Patch Changes

‎packages/shared/package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@repo/shared",
3-
"version": "0.0.2",
3+
"version": "0.0.3",
44
"private": true,
55
"sideEffects": false,
66
"main": "./dist/index.js",
@@ -20,6 +20,7 @@
2020
"devDependencies": {
2121
"@repo/eslint-config": "workspace:*",
2222
"@repo/typescript-config": "workspace:*",
23+
"esbuild-plugin-webgl": "workspace:*",
2324
"@testing-library/react": "^16.0.0",
2425
"@types/node": "^20.14.9",
2526
"@types/react": "^18.3.3",
@@ -40,6 +41,7 @@
4041
"@mayank1513/fork-me": "^2.1.2",
4142
"@repo/scripts": "workspace:*",
4243
"esbuild-plugin-webgl": "workspace:*",
44+
"gl-matrix": "^3.4.3",
4345
"nextjs-darkmode": "^1.0.4",
4446
"nextjs-themes": "^4.0.3",
4547
"r18gs": "^1.1.3",
@@ -56,4 +58,4 @@
5658
"optional": true
5759
}
5860
}
59-
}
61+
}

0 commit comments

Comments
 (0)