{"id":13433636,"url":"https://github.com/doxas/twigl","last_synced_at":"2025-03-17T13:30:37.466Z","repository":{"id":38988609,"uuid":"255299127","full_name":"doxas/twigl","owner":"doxas","description":"twigl.app is an online editor for One tweet shader, with gif generator and sound shader, and broadcast live coding.","archived":false,"fork":false,"pushed_at":"2023-05-04T08:56:51.000Z","size":17971,"stargazers_count":772,"open_issues_count":9,"forks_count":48,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-04-14T19:08:24.336Z","etag":null,"topics":["glsl","glsl-editor","webaudio","webgl","webgl2"],"latest_commit_sha":null,"homepage":"https://twigl.app/","language":"JavaScript","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/doxas.png","metadata":{"files":{"readme":"readme.md","changelog":null,"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}},"created_at":"2020-04-13T10:46:12.000Z","updated_at":"2024-04-14T05:12:44.000Z","dependencies_parsed_at":"2024-01-13T17:11:08.729Z","dependency_job_id":"a04748e2-23d5-461a-846c-ea47ff09b8cd","html_url":"https://github.com/doxas/twigl","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doxas%2Ftwigl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doxas%2Ftwigl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doxas%2Ftwigl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doxas%2Ftwigl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doxas","download_url":"https://codeload.github.com/doxas/twigl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244041339,"owners_count":20388220,"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":["glsl","glsl-editor","webaudio","webgl","webgl2"],"created_at":"2024-07-31T02:01:31.518Z","updated_at":"2025-03-17T13:30:37.460Z","avatar_url":"https://github.com/doxas.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n# twigl\n\ntwigl.app is an online editor for One tweet shader, with gif(or webm, jpeg, png) generator and sound shader, and broadcast live coding.\n\n\u003cdiv style=\"width: 100%; text-align: center;\"\u003e\n    \u003cimg src=\"./resource/ogp.png\" style=\"max-width: 100%;\"\u003e\n\u003c/div\u003e\n\n## get started\n\n```\n$ npm install\n$ npm start\n```\n\n## screen shot\n\n\u003cdiv style=\"width: 100%; text-align: center;\"\u003e\n  \u003cimg src=\"./resource/capture-01.jpg\" style=\"max-width: 100%; margin: 30px auto; display: block;\"\u003e\n  \u003cimg src=\"./resource/capture-02.jpg\" style=\"max-width: 100%; margin: 30px auto; display: block;\"\u003e\n  \u003cimg src=\"./resource/capture-03.jpg\" style=\"max-width: 100%; margin: 30px auto; display: block;\"\u003e\n  \u003cimg src=\"./resource/capture.gif\" style=\"max-width: 100%; margin: 30px auto; display: block;\"\u003e\n\u003c/div\u003e\n\nExample:\n\n```glsl\nprecision highp float;\nuniform float time;\nvoid main(){vec4 p=vec4((gl_FragCoord.xy/4e2),0,-4);for(int i=0;i\u003c9;++i)p+=vec4(sin(-(p.x+time*.2))+atan(p.y*p.w),cos(-p.x)+atan(p.z*p.w),cos(-(p.x+sin(time*.8)))+atan(p.z*p.w),0);gl_FragColor=p;}\n```\n\nLive: \u003ca href=\"https://bit.ly/3aBelvb\" target=\"_blank\"\u003eDEMO\u003c/a\u003e\n\n## regulation\n\nThere are four modes in twigl.app, each of which has a sub-mode that uses GLSL ES 3.0, or in addition to it, a mode that enables MRT.\n\n### classic:\n\nThis mode is compatible with GLSLSandbox.\n\nThe uniform variables are \"resolution\", \"mouse\", \"time\", \"frame\", and \"backbuffer\".\n\n### geek:\n\nIn this mode, the various uniform variables are in a single-character style.\n\n\"r\", \"m\", \"t\", \"f\", and \"b\", respectively.\n\n### geeker:\n\nIn this mode, there is no need to declare precision and uniform. They are automatically complemented on the implementation side. Otherwise, it is the same as in geek mode.\n\n### geekest:\n\nIn this mode, the description of \"void main(){}\" may be omitted (or not), and \"gl_FragCoord\" can be described as \"FC\". In addition, a variety of GLSL snippets are available.\n\nThe reason why we support the notation that does not omit the definition of the main function is to allow users to define their own functions.\n\nFor more information on snippets, please see below.\n\n## advanced\n\n### backbuffers\n\nAs a general rule, attempt to process in the highest precision texture format possible. Under ideal circumstances, a 32-bit floating-point format is used.\n\nHowever, there may be cases where floating-point textures are not available, depending on the execution environment and whether or not extensions can be enabled. In such cases, textures generated in RGBA8(unsigned byte) format are used.\n\n### 300 es\n\nGLSL ES 3.0 is available for WebGL 2.0 enabled environments.\n\nWhen using GLSL ES 3.0, use `outColor` instead of `gl_FragColor` for the final output in classic mode.\n\nIn the other geek, geeker, and geekest modes, `outColor` is shortened to `o`.\n\n### MRT (Multiple Render Targets)\n\nIn classic mode, `outColor0` and `outColor1` can be used to output to two channels simultaneously.\n\nIn non-classical mode, these are written as `o0` and `o1`.\n\nThe result of the previous frame can be referenced as `backbuffer0` and `backbuffer1` in classic mode. In other modes, they are written as `b0` and `b1`.\n\n### Input from the sound shader\n\nThe audio data generated by the sound shader can be received as a uniform variable in the shader for graphics.\n\nIn classic mode, this is a floating-point variable named `sound`. In other modes, it is denoted as `s`.\n\n## GLSL snippets in GEEKEST mode\n\ntwigl with geekest mode have included simplex-noise, you can call it as follows.\n\n```glsl\nfloat f = snoise2D(v.xy);\nfloat g = snoise3D(v.xyz);\nfloat h = snoise4D(v.xyzw);\n```\n\nIf you are more concerned with speed than accuracy, the following functions may be more appropriate.\n\n```glsl\n// fract sin noise\nfloat fsnoise(vec2 c){\n    return fract(sin(dot(c, vec2(12.9898, 78.233))) * 43758.5453);\n}\n\n// fsnoise for macOS\nfloat fsnoiseDigits(vec2 c){\n    return fract(sin(dot(c, vec2(0.129898, 0.78233))) * 437.585453);\n}\n\n// for example\nfloat i = fsnoise(v.xy);\nfloat j = fsnoiseDigits(v.xy);\n```\n\nOther pre-defined constants and functions are as follows.\n\n```glsl\nvec3 hsv(float h, float s, float v){\n    vec4 t = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\n    vec3 p = abs(fract(vec3(h) + t.xyz) * 6.0 - vec3(t.w));\n    return v * mix(vec3(t.x), clamp(p - vec3(t.x), 0.0, 1.0), s);\n}\n\nmat2 rotate2D(float r){\n    return mat2(cos(r), sin(r), -sin(r), cos(r));\n}\n\nmat3 rotate3D(float angle, vec3 axis){\n    vec3 a = normalize(axis);\n    float s = sin(angle);\n    float c = cos(angle);\n    float r = 1.0 - c;\n    return mat3(\n        a.x * a.x * r + c,\n        a.y * a.x * r + a.z * s,\n        a.z * a.x * r - a.y * s,\n        a.x * a.y * r - a.z * s,\n        a.y * a.y * r + c,\n        a.z * a.y * r + a.x * s,\n        a.x * a.z * r + a.y * s,\n        a.y * a.z * r - a.x * s,\n        a.z * a.z * r + c\n    );\n}\n\nconst float PI = 3.141592653589793;\nconst float PI2 = PI * 2.0;\n```\n\nNote that the above snippets are only available in GEEKEST mode.\n\n## keyboard shortcut\n\n| key                  | action         |\n|----------------------|----------------|\n| Alt + `Enter`        | play sound     |\n| Ctrl + Alt + `Enter` | stop sound     |\n| Ctrl + Alt + `v`     | vim mode       |\n| Ctrl + Alt + `t`     | change view    |\n| Ctrl + Alt + `.`     | up font size   |\n| Ctrl + Alt + `,`     | down font size |\n\nYou can use `Command` instead `Ctrl` on the macOS.\n\n## credit\n\n[spite/ccapture\\.js: A library to capture canvas\\-based animations at a fixed framerate](https://github.com/spite/ccapture.js)\n\n[jnordberg/gif\\.js: JavaScript GIF encoding library](https://github.com/jnordberg/gif.js)\n\n[Ace \\- The High Performance Code Editor for the Web](https://ace.c9.io/)\n\n[ashima/webgl\\-noise: Procedural Noise Shader Routines compatible with WebGL](https://github.com/ashima/webgl-noise)\n\n[Shadertoy BETA](https://www.shadertoy.com/)\n\ninterface design by [@iY0Yi](https://twitter.com/iY0Yi)\n\n## license\n\nMIT licensed.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoxas%2Ftwigl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoxas%2Ftwigl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoxas%2Ftwigl/lists"}