Webgl

shader-dev là một skill GLSL thực dụng dành cho hiệu ứng thời gian thực kiểu ShaderToy. Dùng shader-dev skill để xây dựng hoặc gỡ lỗi ray marching, SDF scenes, lighting, particles, fluid motion, post-processing và shader-dev cho UI Design với ít phải đoán mò hơn so với một prompt chung chung.

Kỹ năng threejs-textures cho Frontend Development bao quát việc tải texture, ánh xạ UV, colorSpace, wrapping, filtering và environment maps để hình ảnh hiển thị đúng trên các material của Three.js.

threejs-shaders là một hướng dẫn thực dụng để viết shader Three.js với GLSL, ShaderMaterial, uniforms, biến dạng vertex và hiệu ứng fragment. Hãy dùng nó khi phát triển frontend nếu bạn cần một nền tảng shader có thể dùng ngay, lựa chọn material rõ ràng hơn và ít phải đoán mò hơn so với một prompt chung chung.

threejs-materials là một skill về materials trong Three.js, giúp chọn, cấu hình và xử lý lỗi cho material của mesh. Dùng khi cần PBR chân thực, flat shading không đổ bóng, toon, chế độ debug, tạo kiểu dựa trên texture, và shader tùy chỉnh. Skill này hữu ích cho các team Frontend Development cần ra quyết định về material nhanh hơn và nhất quán hơn.

Skill threejs-postprocessing cho Phát triển Frontend: thêm các pipeline EffectComposer, bloom, depth of field, blur, color grading và các pass tùy chỉnh theo không gian màn hình. Dùng hướng dẫn này để thiết lập chuỗi render, tinh chỉnh hiệu ứng và tích hợp composer rendering vào một scene Three.js sẵn có.

threejs-loaders giúp bạn tải đúng các tài nguyên Three.js, bao gồm model GLTF/GLB, texture, môi trường HDR và các tài nguyên bất đồng bộ khác. Dùng skill threejs-loaders cho Frontend Development khi bạn cần tải ổn định, xử lý tiến trình tải và giảm lỗi trước khi scene sẵn sàng.

threejs-lighting là một skill thực tiễn về ánh sáng trong Three.js cho Frontend Development. Nó giúp bạn chọn đúng loại đèn, thiết lập bóng đổ, thêm ánh sáng môi trường và sửa những scene trông phẳng, quá tối hoặc bị cháy sáng. Hãy dùng hướng dẫn threejs-lighting khi bạn cần thiết lập ánh sáng scene nhanh hơn và nhất quán hơn.

threejs-geometry giúp bạn chọn và dựng geometry cho Three.js trong các cảnh thực tế: các shape có sẵn, BufferGeometry, mesh tùy chỉnh và instancing. Dùng skill threejs-geometry cho Frontend Development khi bạn cần đúng constructor, đúng thứ tự tham số và đầu ra chú trọng hiệu năng.

threejs-fundamentals giúp lập trình viên frontend xây dựng và debug phần thiết lập ứng dụng Three.js cốt lõi: scene, camera, renderer, lights, meshes, transforms và object hierarchy. Dùng hướng dẫn threejs-fundamentals này để xử lý canvas trắng, đặt đối tượng đúng vị trí và hoàn thiện scene đầu tiên thật gọn gàng.

Skill threejs-animation dành cho hệ thống chuyển động Three.js: keyframes, animation clips, mixers, actions, phát skeletal, morph targets và chuyển động procedural. Hãy dùng khi làm Frontend Development nếu bạn cần phát animation GLTF, hòa trộn clip hoặc xây dựng vòng lặp animation gọn gàng với ít phỏng đoán hơn.