{"id":17801346,"url":"https://github.com/luruke/magicshader","last_synced_at":"2025-04-09T11:09:42.590Z","repository":{"id":72363432,"uuid":"179478485","full_name":"luruke/magicshader","owner":"luruke","description":"🔮 Tiny helper for three.js to debug and write shaders","archived":false,"fork":false,"pushed_at":"2021-03-16T10:30:28.000Z","size":9237,"stargazers_count":241,"open_issues_count":8,"forks_count":14,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-02T10:14:07.525Z","etag":null,"topics":["datgui","debug","glsl","shader","threejs","webgl"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/luruke.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,"dei":null}},"created_at":"2019-04-04T10:46:11.000Z","updated_at":"2025-02-18T21:57:17.000Z","dependencies_parsed_at":"2024-02-04T21:08:14.338Z","dependency_job_id":"e6b76d9d-877f-4678-9104-22adc8e5ae46","html_url":"https://github.com/luruke/magicshader","commit_stats":{"total_commits":24,"total_committers":3,"mean_commits":8.0,"dds":"0.45833333333333337","last_synced_commit":"25ba98d9c8e6c737ffeb83ffe1da9811b3c81770"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luruke%2Fmagicshader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luruke%2Fmagicshader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luruke%2Fmagicshader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luruke%2Fmagicshader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luruke","download_url":"https://codeload.github.com/luruke/magicshader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248027407,"owners_count":21035594,"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":["datgui","debug","glsl","shader","threejs","webgl"],"created_at":"2024-10-27T12:36:38.589Z","updated_at":"2025-04-09T11:09:42.574Z","avatar_url":"https://github.com/luruke.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🔮 MagicShader\n\n\u003e ⚠️ probably won't work with modern version of threejs, last time I tested was with r114  \n\u003e pr is welcome\n\nA thin wrapper on top of `RawShaderMaterial`, that allows to easily create new uniforms and live-edit them via `dat.gui`.\n\nNo need to create the uniforms manually and bind them with `dat.gui`.  \nJust write some comments in your GLSL, and everything will work magically ✨\n\n\n## 🕵️‍♂️ How to use\nInstall via npm\n\n```\nnpm i -D magicshader\n```\n\nand just use it instead of `RawShaderMaterial`:\n\n```javascript\nimport MagicShader from 'magicshader';\n\nconst material = new MagicShader({...})\n```\n\nThe parameters are exactly the same.\n\n## 🤷‍♀️ Ok...where the magic is?\n\nNow you can add the `// ms({})`  magic comment after your uniforms.\n\n\nExample:\n\n```javascript\nconst material = new MagicShader({\n  vertexShader: `\n    precision highp float;\n    \n    attribute vec3 position;\n    uniform mat4 modelViewMatrix;\n    uniform mat4 projectionMatrix;\n    \n    void main() {\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }\n  `,\n  fragmentShader: `\n    precision highp float;\n\n    uniform vec3 color; // ms({ value: '#ff0000' })\n\n    void main() {\n      gl_FragColor = vec4(color, 1.0);\n    }\n  `\n});\n```\n\nThis will give you:  \n![1](./images/1.gif \"1\")\n\nNo need to init your uniform or bind `dat.gui`.  \nYou can just work on your GLSL files.\n\n\n## 👨‍💻 What else?\n```javascript\nconst material = new MagicShader({\n  name: 'Cube Shader!',\n  vertexShader: `\n    precision highp float;\n    \n    attribute vec3 position;\n    uniform mat4 modelViewMatrix;\n    uniform mat4 projectionMatrix;\n\n    uniform vec3 translate; // ms({ value: [0, 0, 0], step: 0.01 })\n    uniform float scale; // ms({ value: 0.5, options: { small: 0.5, medium: 1, big: 2 } })\n    uniform mat4 aMatrix4; // ms({ value: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] })\n\n    void main() {\n      vec3 pos = position + translate;\n      pos *= scale;\n\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);\n    }\n  `,\n  fragmentShader: `\n    precision highp float;\n    \n    uniform vec3 color; // ms({ value: '#ff0000' })\n    uniform float brightness; // ms({ value: 0, range: [0, 0.5], step: 0.1 })\n    uniform vec2 dummyValue; // ms({ value: [1024, 768], range: [[0, 2000], [0, 1500]] })\n    uniform bool visible; // ms({ value: 1, name: 'Visibility' })\n    uniform int test; // ms({ value: 0 })\n\n    void main() {\n      gl_FragColor = vec4(color + brightness, 1.0);\n    }\n  `\n});\n```\n\nWill result in:  \n![full](./images/full.gif \"full\")\n\n## 🕵️‍ SpectorJS\n\nWith the [SpectorJS extension](https://github.com/BabylonJS/Spector.js/blob/master/documentation/extension.md) enabled, you can live-edit the shaders. You can even add and modify \"magic\" uniforms on the fly.\n\n![full](./images/spector.gif \"full\")\n\n## 💅 Ok, cool. Just finished my app and I'm ready to deploy\n\nThen you can hide the `dat.gui` UI\n```javascript\nimport MagicShader, { gui } from 'magicshader';\ngui.destroy();\n```\n\n\n## 😴 TODO\n\n- [ ] Do more tests...\n- [ ] add support for sampler2D and FBO?\n- [ ] check if it works with firefox/safari shader editor\n- [ ] inspect/edit threejs default uniforms (like `projectionMatrix`)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluruke%2Fmagicshader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluruke%2Fmagicshader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluruke%2Fmagicshader/lists"}