Tóm tắt nhanh:
ak-shaderviết fragment shader GLSL cho hiệu ứng vẽ bằng GPU: vân đá, mây, hoạ tiết lặp, hình SDF viền mềm, nền chuyển động theo chuột. Nó xem renderer, phiên bản GLSL và uniform của project trước khi viết, và chỉ coi là xong khi shader đã chạy và hiện hình trong target thật. Nó không đổi cách project tạo và cập nhật uniform.
Công khai: mình là maintainer của AgentKit và có quan hệ affiliate: link AgentKit trong bài là link affiliate, mua qua link này bạn được giảm 30%.
Tóm tắt
Dùng khi bạn cần một hiệu ứng vẽ bằng GPU trong WebGL, Three.js, Processing hay để thử trên ShaderToy, glslViewer: texture thủ tục, hình sắc nét ở mọi kích thước, nền lặp hoặc nền chuyển động.
flowchart LR
A["Mô tả hiệu ứng hoặc hoạ tiết"] --> B["ak-shader"]
B --> C["Shader GLSL đã render trong target thật"]
C --> D["Dùng trong WebGL, Three.js, Processing"]
C --> E["Thử nhanh trên ShaderToy hoặc glslViewer"]Nó dựa trên 4 ý:
| Ý | Câu hỏi | Ví dụ |
|---|---|---|
| Mỗi pixel tự tính màu | Shader nghĩ theo cách nào? | Vẽ hình tròn: mỗi pixel đo khoảng cách tới tâm rồi chọn màu |
| Uniform: dữ liệu từ ngoài vào | Shader lấy thời gian, kích thước khung, chuột từ đâu? | Mẫu dùng u_time, u_resolution, u_mouse; ShaderToy gọi là iTime, iResolution, iMouse |
| Target thật | Shader chạy ở đâu, theo luật nào? | Xem renderer, phiên bản WebGL, GLSL, precision, uniform; GLSL ES 3 không dùng gl_FragColor |
| Xong là khi thấy hình | Bằng chứng nào cho thấy shader đúng? | Biên dịch, render trong app thật, xem hình, đo hiệu năng |
Skill mang sẵn kiến thức theo mảng: SDF, hàm tạo dáng như smoothstep, lưới lặp và ma trận xoay, Truchet, noise (value, Perlin, simplex, Voronoi, Worley), fBm, màu RGB và HSB, công thức texture như mây, đá, gỗ, lửa, nước. Nó chỉ mở phần cần cho hiệu ứng bạn nhờ.
Prompt mẫu cho texture thủ tục:
/ak-shader Nền vân đá cẩm thạch trắng xám cho trang <tên trang>, canvas WebGL đã có.
Ràng buộc: giữ uniform hiện có, chạy mượt trên laptop thường.
Xong khi: thấy vân đá trên trang đang chạy, không lỗi biên dịch.Skill này không có cờ. Sau /ak-shader bạn mô tả hiệu ứng hoặc hoạ tiết, kèm môi trường (WebGL, Three.js, ShaderToy) và ràng buộc hiệu năng nếu có.
Phần dưới đây là bản chi tiết: luồng chạy, 5 tình huống kèm prompt, cách ghi đầu vào, lịch sử thay đổi theo bản ak và các lỗi hay vấp. Bản chi tiết và trang trực quan dành cho subscriber. Agent của bạn cũng tìm được trong đó qua MCP của portal.
Mở khi tài khoản có quyền subscriber
Bài này dành cho subscriber
Khi tài khoản có quyền, toàn bộ bài, bản visual tương tác và lệnh gọi từ agent đều mở.
- Đăng nhập hoặc tạo tài khoản modernEngineerQuyền đọc gắn với email tài khoản.
- Chọn gói trên trang Bảng giáGói 1, 3 hoặc 12 tháng, trả bằng chuyển khoản VietQR. Quyền đọc mở khoảng một phút sau khi tiền về.
- Hoặc nhập mã Facebook subscriberNgười ủng hộ trang qua Facebook nhận mã kích hoạt qua tin nhắn mỗi tháng.
Đã là subscriber? Đăng nhập để đọc.
Dùng bài này trong agent của bạn
Lấy API keyChép đoạn dưới, dán vào Claude Code, Codex hay agent bạn đang dùng. Agent đọc bài rồi đối chiếu với repo đang mở.
Đọc bài "ak-shader: viết fragment shader GLSL chạy được trong app thật" trên modernEngineer rồi áp dụng vào repo này.
1. Gọi tool content_get của MCP server modernengineer với locale "vi", slug "ak-shader". Nếu chưa nối MCP server modernengineer, dừng lại và hướng dẫn tôi nối theo https://modernengineer.dev/vi/mcp.
2. Tóm tắt các bước chính của bài, chỉ ra bước nào áp dụng được cho repo này.
3. Đề xuất thay đổi cụ thể và hỏi tôi trước khi sửa file.Nối MCP cho Claude Code (một lần)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Đọc trọn bài qua MCP cần API key của tài khoản subscriber hoặc đã mua guide này. Không có quyền, agent sẽ chỉ đọc được phần mở đầu.
- Phiên bản
- v1.0.0
- Cập nhật
- 22/10/2026
- Giấy phép
- Bảo lưu mọi quyền
- Slug
- ak-shader
