{"id":31982423,"url":"https://github.com/bigmistqke/signal-gl","last_synced_at":"2025-10-15T02:59:28.811Z","repository":{"id":209525449,"uuid":"702464955","full_name":"bigmistqke/signal-gl","owner":"bigmistqke","description":"🚦 (WIP) inline reactive glsl with auto-bindings and tag template literals","archived":false,"fork":false,"pushed_at":"2023-12-28T04:00:56.000Z","size":1277,"stargazers_count":22,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-30T13:52:03.243Z","etag":null,"topics":["glsl","signal","solid-js","webgl"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bigmistqke.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-10-09T11:18:40.000Z","updated_at":"2025-07-25T09:43:02.000Z","dependencies_parsed_at":"2023-12-26T01:28:06.754Z","dependency_job_id":"302e9af0-d9a8-48eb-861a-1016223a50db","html_url":"https://github.com/bigmistqke/signal-gl","commit_stats":null,"previous_names":["bigmistqke/signal.gl","bigmistqke/signal-gl"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bigmistqke/signal-gl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigmistqke%2Fsignal-gl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigmistqke%2Fsignal-gl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigmistqke%2Fsignal-gl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigmistqke%2Fsignal-gl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bigmistqke","download_url":"https://codeload.github.com/bigmistqke/signal-gl/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigmistqke%2Fsignal-gl/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279040417,"owners_count":26090815,"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","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["glsl","signal","solid-js","webgl"],"created_at":"2025-10-15T02:59:27.920Z","updated_at":"2025-10-15T02:59:28.803Z","avatar_url":"https://github.com/bigmistqke.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚦 signal-gl\n\n[![GitHub package.json version (subfolder of monorepo)](https://img.shields.io/github/package-json/v/bigmistqke/signal-gl)](https://www.npmjs.com/package/@bigmistqke/signal-gl)\n[![Signal-gl bundle size](https://edge.bundlejs.com/badge?q=@bigmistqke/signal-gl@0.0.25\u0026config={%22esbuild%22:{%22external%22:[%22solid-js%22]}})](https://bundlejs.com/?q=%40bigmistqke%2Fsignal-gl%400.0.25\u0026config=%7B%22esbuild%22%3A%7B%22external%22%3A%5B%22solid-js%22%5D%7D%7D)\n[![Maintained with pnpm](https://img.shields.io/badge/maintained_with-pnpm-%23cc01ff)](https://github.com/pnpm/pnpm)\n\n`minimal` `inline` `reactive` `glsl` `auto-binding` `signals` `no boilerplate` `tag template literals`\n\n## Overview\n\n- [Premise](#premise)  \n- [Bindings](#bindings)\n- [Install](#install)\n- [Use it](#use-it)\n  - [Hello World](#hello-world-playground)\n  - [More Examples](./dev/src/examples/README.md)\n- [API](#api)\n  - [`signal-gl`](/src/core/CORE.md) _low level abstraction around webgl_\n  - [`signal-gl/world`](/src/world/WORLD.md)  _game engine built on top of `signal-gl`_\n- [Syntax Highlighting](#syntax-highlighting) \n- [Prior Art](#prior-art) \n\n## Premise\n\n- `Minimal` abstraction\n- Minimizing gap between `js` and `glsl`\n- Composition of `glsl` snippets\n- Lessen boilerplate with `auto-binding` uniforms and attributes and `sensible` defaults\n- `Purely runtime`: no additional build tools\n- Small footprint: `\u003c5kb minified + gzip`\n\n## Bindings\n\nCurrently there are only `solid` bindings, but the dependency on `solid` is minimal. If this idea has any merit it would be trivial to make bindings for other signal implementations.\n\n## Install\n\n```bash\nnpm i @bigmistqke/signal-gl\n# or\npnpm i @bigmistqke/signal-gl\n# or\nyarn add @bigmistqke/signal-gl\n```\n\n## Use it\n\n### Hello World [[playground]](https://playground.solidjs.com/anonymous/72a268af-262d-4d9a-84e4-4d60c94157b3)\n\n\u003cvideo alt=\"screen-recording 'Hello World'-example\" src=\"https://github.com/bigmistqke/signal.gl/assets/10504064/e306b06e-1b74-4f83-870c-f371c054b6f2\"\u003e\n  \u003cimg src=\"https://github.com/bigmistqke/signal.gl/assets/10504064/30b0c5ad-fd5d-4a58-812e-24734a43c52d\"/\u003e\n\u003c/video\u003e\n\n```tsx\nconst [opacity, setOpacity] = createSignal(0.5)\nconst vertices = new Float32Array([\n  -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0,\n])\n\nconst fragment = glsl`#version 300 es\n  precision mediump float;\n  in vec2 v_coord; \n  out vec4 outColor;\n  void main() {\n    float opacity = ${uniform.float(opacity)};\n    outColor = vec4(v_coord[0], v_coord[1], v_coord[0], opacity);\n  }`\n\nconst vertex = glsl`#version 300 es\n  out vec2 v_coord;  \n  out vec3 v_color;\n  void main() {\n    vec2 a_coord = ${attribute.vec2(vertices)};\n    v_coord = a_coord;\n    gl_Position = vec4(a_coord, 0, 1) ;\n  }`\n\nreturn (\n  \u003cStack onMouseMove={(e) =\u003e setOpacity(e.clientY / e.currentTarget.offsetHeight)}\u003e\n    \u003cProgram fragment={fragment} vertex={vertex} mode=\"TRIANGLES\" /\u003e\n  \u003c/Stack\u003e\n)\n```\n\n### [more examples](./dev/src/examples/README.md)\n\n## API\n\n- [`signal-gl`](/src/core/CORE.md) _low level abstraction around webgl_\n- [`signal-gl/world`](/src/world/WORLD.md)  _game engine built on top of `signal-gl`_\n\n## Syntax Highlighting\n\n_use in combination with tag template literal syntax highlighting: see [glsl-literal syntax higlighting](https://marketplace.visualstudio.com/items?itemName=boyswan.glsl-literal) for `vs-code`_\n\n\u003cimg width=\"417\" alt=\"signal-gl code with syntax highlighting\" src=\"https://github.com/bigmistqke/signal.gl/assets/10504064/d2027993-31ac-4c88-8f7f-c0b6f51d992c\"\u003e\n\n## Prior Art\n\n_these libraries could be of interest if you are looking for stable and well-tested webgl libraries_\n\n- [regl](https://github.com/regl-project/regl) _functional webgl library_\n- [ogl](https//github.com/oframe/ogl) _minimal webgl library_\n- [twgl](https//github.com/greggman/twgl.js) _tiny webgl library_\n- [four](https//github.com/CodyJasonBennett/four) _minimal webgl/webgpu alternative to three.js_\n- [useGPU](https://gitlab.com/unconed/use.gpu) _declarative, reactive webgpu library + glsl/wsgl linker/treeshaker_\n- [lume](https://github.com/lume/lume) _signal-driven custom html-elements for webgl/webgpu_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigmistqke%2Fsignal-gl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbigmistqke%2Fsignal-gl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigmistqke%2Fsignal-gl/lists"}