{"id":17036015,"url":"https://github.com/phucbm/shaders","last_synced_at":"2026-05-06T05:41:33.391Z","repository":{"id":133062589,"uuid":"396882725","full_name":"phucbm/shaders","owner":"phucbm","description":"🚀 My journey to the world of Shaders","archived":false,"fork":false,"pushed_at":"2021-08-22T16:03:46.000Z","size":122,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-17T10:22:36.573Z","etag":null,"topics":["glsl","shaders","threejs","webgl"],"latest_commit_sha":null,"homepage":"https://phucbm.github.io/shaders/","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/phucbm.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,"publiccode":null,"codemeta":null}},"created_at":"2021-08-16T16:43:46.000Z","updated_at":"2021-08-22T16:03:49.000Z","dependencies_parsed_at":"2024-07-26T04:15:52.775Z","dependency_job_id":null,"html_url":"https://github.com/phucbm/shaders","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fshaders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fshaders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fshaders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fshaders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phucbm","download_url":"https://codeload.github.com/phucbm/shaders/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245031345,"owners_count":20549913,"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","shaders","threejs","webgl"],"created_at":"2024-10-14T08:48:56.414Z","updated_at":"2026-05-06T05:41:33.344Z","avatar_url":"https://github.com/phucbm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 My journey to the world of Shaders\n\nThis repo is where I store exercises and recaps when reading [The Book of Shaders](https://thebookofshaders.com/).\n\n## Exercises\n\n### 00 - Create Shaders with Three.js\n\nIn this exercise, I created an HTML `👋 Hello world!` page for Shaders using [Three.js](https://threejs.org/). To summarize:\n\n\u003e 💡 Shaders are not JavaScript, we store them inside a `\u003cscript\u003e` tag just to get it as plain text later on. The browser will not run the code inside due to `type=\"x-shader/x-vertex\"` and `type=\"x-shader/x-fragment\"` are not the right type for JavaScript.\n  \n```html\n\u003c!-- Vertex Shader --\u003e\n\u003cscript id=\"vertexShader\" type=\"x-shader/x-vertex\"\u003e\n        void main() {\n            gl_Position = vec4( position, 1.0 );\n        }\n\u003c/script\u003e\n\n\u003c!-- Fragment Shader --\u003e\n\u003cscript id=\"fragmentShader\" type=\"x-shader/x-fragment\"\u003e\n        uniform float u_time; // Time in seconds since load\n\n        void main() {\n            gl_FragColor = vec4( abs(sin(u_time)), 0.0, 0.0, 1.0 );\n        }\n\u003c/script\u003e\n```\n\n\u003e 🎥 In Three.js, we use [THREE.ShaderMaterial()](https://threejs.org/docs/index.html?q=shader#api/en/materials/ShaderMaterial) to render Shaders.\n\nRead more at chapter\n📒 [03 - Uniforms](https://thebookofshaders.com/03/)\nand\n📗 [04 - Running your shader](https://thebookofshaders.com/04/)\n\n💎 [Result](exercises/00/)\n\n### 01 - Algorithmic drawing\n\n📓 [05 - Algorithmic drawing](https://thebookofshaders.com/05/)\n\n- https://www.iquilezles.org/www/articles/functions/functions.htm\n\n- https://renderman.pixar.com/learn\n\n- http://www.flong.com/archive/texts/code/shapers_poly/\n\n💎 [Result](exercises/01/)\n\n### 02 - Shape Functions\n\nhttps://thebookofshaders.com/06/","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphucbm%2Fshaders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphucbm%2Fshaders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphucbm%2Fshaders/lists"}