{"id":15065631,"url":"https://github.com/tomfanhm/fast-webgl","last_synced_at":"2026-01-06T02:03:14.520Z","repository":{"id":257788718,"uuid":"856279203","full_name":"tomfanhm/fast-webgl","owner":"tomfanhm","description":"A library for using WebGL in a fast and easy way.","archived":false,"fork":false,"pushed_at":"2024-09-20T16:22:59.000Z","size":34,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-03T03:17:00.219Z","etag":null,"topics":["library","typescript","vite","webgl"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomfanhm.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-12T09:55:55.000Z","updated_at":"2024-09-20T16:23:03.000Z","dependencies_parsed_at":"2024-09-21T14:53:44.921Z","dependency_job_id":null,"html_url":"https://github.com/tomfanhm/fast-webgl","commit_stats":null,"previous_names":["tomfanhm/fast-webgl"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomfanhm%2Ffast-webgl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomfanhm%2Ffast-webgl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomfanhm%2Ffast-webgl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomfanhm%2Ffast-webgl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomfanhm","download_url":"https://codeload.github.com/tomfanhm/fast-webgl/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239289981,"owners_count":19614465,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["library","typescript","vite","webgl"],"created_at":"2024-09-25T00:43:34.923Z","updated_at":"2025-11-01T13:30:18.768Z","avatar_url":"https://github.com/tomfanhm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fast-WebGL\n\n`Fast-WebGL` is a simple and efficient WebGL wrapper designed to simplify working with WebGL shaders, textures, and uniforms. It abstracts the boilerplate setup and makes it easier to render graphics using shaders.\n\n## Installation\n\nInstall dependencies:\n\n```bash\nnpm install fast-webgl\n```\n\n## Usage\n\n### Basic Setup\n\nTo use `FastWebGL`, you need to provide a canvas element, vertex and fragment shader source code, and optional textures and uniforms.\n\n```javascript\n// Example vertex shader source\nconst vertexSource = `\n  attribute vec2 a_position;\n  void main() {\n    gl_Position = vec4(a_position, 0.0, 1.0);\n  }\n`\n\n// Example fragment shader source\nconst fragmentSource = `\n  precision mediump float;\n  uniform vec2 u_resolution;\n  uniform float u_time;\n  void main() {\n    // Normalized coordinates\n    vec2 st = gl_FragCoord.xy / u_resolution;\n    // Gradient effect based on time and position\n    gl_FragColor = vec4(st.x, st.y, abs(sin(u_time)), 1.0);\n  }\n`\n\n// HTML Canvas element\nconst canvas = document.getElementById(\"webglCanvas\")\n\n// Initialize FastWebGL\nconst webgl = new FastWebGL({\n  canvas,\n  vertexSource,\n  fragmentSource,\n  textures: [],\n  uniforms: [{ name: \"u_time\", value: 0.0 }],\n  options: {\n    width: 800,\n    height: 600,\n  },\n})\n\n// Animation loop to update time uniform\nfunction render() {\n  const time = webgl.getElapsedTime()\n  webgl.updateUniform(\"u_time\", time)\n  webgl.draw()\n  requestAnimationFrame(render)\n}\n\n// Start rendering\nrender()\n```\n\n### Parameters\n\nWhen initializing `FastWebGL`, pass the following options:\n\n```typescript\ntype Params = {\n  canvas: HTMLCanvasElement // The canvas element for WebGL rendering\n  vertexSource: string // GLSL vertex shader source code\n  fragmentSource: string // GLSL fragment shader source code\n  textures?: {\n    // Optional textures\n    name: string // Name of the texture uniform in the shader\n    source: string // Path to the texture image\n    options?: TextureOptions // Optional texture settings\n  }[]\n  uniforms?: Uniform[] // Optional list of uniforms for the shaders\n  options?: {\n    width?: number // Canvas width (default is the window's inner width)\n    height?: number // Canvas height (default is the window's inner height)\n  }\n}\n```\n\n### Methods\n\n- **`getContext(): WebGLRenderingContext`**  \n  Returns the WebGL context associated with the canvas.\n- **`getProgram(): WebGLProgram`**  \n  Retrieves the compiled and linked WebGL program.\n- **`updateUniform(name: string, value: number | number[])`**  \n  Updates the value of a uniform variable in the shader.\n\n- **`resize(width: number, height: number)`**  \n  Resizes the canvas and updates the WebGL viewport.\n\n- **`draw()`**  \n  Draws the current WebGL scene.\n\n- **`getElapsedTime(): number`**  \n  Returns the elapsed time in seconds since the WebGL context was created.\n\n- **`dispose()`**  \n  Disposes of all WebGL resources, including shaders, textures, and the WebGL program.\n\n### Textures and Uniforms\n\n- **Textures** are passed as an array of objects. Each object should include the name of the texture uniform in the shader, the source of the texture (e.g., an image path), and optional texture settings.\n- **Uniforms** are passed as an array of objects. Each object should include the name of the uniform and its initial value (which can be a single number or an array of numbers).\n\n### Example with Textures and Uniforms\n\n```javascript\nconst webgl = new FastWebGL({\n  canvas,\n  vertexSource,\n  fragmentSource,\n  textures: [\n    {\n      name: \"u_texture\",\n      source: \"texture.jpg\",\n    },\n  ],\n  uniforms: [\n    { name: \"u_time\", value: 0.0 },\n    { name: \"u_resolution\", value: [canvas.width, canvas.height] },\n  ],\n})\n```\n\n## Contributing\n\nContributions are welcome! For major changes, please open an issue first to discuss what you would like to change. Ensure to update tests as appropriate.\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomfanhm%2Ffast-webgl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomfanhm%2Ffast-webgl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomfanhm%2Ffast-webgl/lists"}