Bảng điều khiển ánh sáng Gringotts

Vai trò và Mục tiêu
Bạn là một nghệ sĩ kỹ thuật thành thạo cả Blender (lập trình bpy) lẫn Web 3D hiện đại (Three.js). Hãy dùng mô hình hóa thủ tục trong Blender cục bộ để xây dựng Ngân hàng Phù thủy Gringotts phong cách LEGO, hoàn thiện vật liệu phong hóa và kết xuất dưới ba sắc thái ánh sáng, rồi cung cấp một bảng điều khiển web tương tác để điều chỉnh sắc thái ánh sáng và chi tiết theo thời gian thực trên trình duyệt.
Xuyên suốt: lưu mọi đầu ra vào không gian làm việc hiện tại; mở và kiểm tra mọi kết quả kết xuất, lặp lại để xử lý mọi vấn đề phát hiện được; trước khi bàn giao trang web, thực sự mở và xác minh trang trong trình duyệt thật/không giao diện, đồng thời không để lại tiến trình máy chủ chạy nền.

Sắc thái tham chiếu (hai ảnh tham chiếu)
Tham chiếu mô hình hóa: ảnh chính thức của bộ LEGO 76417 Gringotts — mặt tiền đá cẩm thạch trắng + cột tiền sảnh + biển "GRINGOTTS BANK" + mái vòm xanh + rồng Ukrainian Ironbelly phía trên + hầm ngầm và đường ray xe mỏ được các trụ đá chống đỡ bên dưới.
Tham chiếu không khí: tranh ý tưởng sảnh đá cẩm thạch Gringotts — đá cẩm thạch tối phong hóa, đồ trang trí vàng, ánh sáng vàng ấm từ trên cao của đèn chùm pha lê, các luồng sáng lạnh xuyên qua cửa sổ tròn, những đốm sáng nến, tương phản sáng tối mạnh và ánh sáng thể tích.

Phần 1: Xây dựng cảnh (script Blender bpy, chạy ở chế độ nền -b --python)
Quy ước tỷ lệ: 1 đơn vị LEGO = 1 đơn vị Blender; khoảng cách stud 1.6, bán kính stud 0.45, chiều cao stud 0.35. Mọi vật liệu đều có cảm giác nhựa LEGO (Principled, Roughness≈0.28, Coat≈0.25).
Các cấu trúc bắt buộc:
Khối chính ngân hàng: tòa nhà chính bằng đá cẩm thạch trắng/xám nhạt (rộng 22 × cao 15), mặt tiền có các đường gạch ngang; tiền sảnh bốn cột (đế cột + thân cột + đai vòng + đầu cột) + dầm đầu cột; cửa đôi nâu thụt vào + tay nắm cầu vàng + khung cửa trắng; cửa sổ tròn phía trên cửa (thanh chia ô chữ thập màu vàng); biển chữ 3D vàng "GRINGOTTS BANK" (đặt giữa hai cột trong để tránh bị che khuất); các tòa nhà cánh ba tầng ở hai bên (khung cửa sổ trắng, phào chỉ, stud mái).
Chi tiết mặt tiền: hai cửa sổ khung đen nghiêng ra ngoài + lan can ban công đen; tổng cộng 4 đèn tường gang đúc trên tường lối vào và tường cánh (vật liệu phát sáng LampGlow).
Tháp mái vòm: thân trống trắng (8 cửa sổ nhỏ + vòng phào) + mái vòm bán cầu xanh + gân vàng và quả cầu đỉnh.
Ukrainian Ironbelly: thân xám trắng nằm trên mép trước mái vòm, cánh màng trong/ngoài hai lớp (có xương dọc mép trước, ngón cánh, vuốt cánh), sừng vàng và đồng tử vàng, gai lưng, bốn chi chụp với vuốt vàng, đuôi quấn quanh mái vòm; phun lửa hai lớp (lửa ngoài cam FireOuter + lửa trong vàng sáng FireInner, phát sáng); xích sắt 9 mắt từ cổ tới mái vòm.
Bên trái · cửa hàng thú cưng ma thuật: mặt tiền đỏ đậm + biển MENAGERIE vàng, khung cửa sổ xanh, mái xám hai dốc, tháp nhọn đen bốn góc, ống khói cam ×2.
Bên phải · tòa nhà phụ: tường sọc be/trắng hai tầng, mái hai dốc, đèn tường ×2, một con cú nhỏ trên mái.
Khu vực ngầm: các trụ đá xếp lớp, so le (ba vật liệu đá xám) chống đỡ nền; cửa hầm tròn phía trước (đĩa cửa vàng + nan và moay-ơ xám đậm); hai đoạn đường ray xe mỏ cong (ray + tà vẹt) + xe chở đầy đồng tiền vàng; vòng ray ở mặt đất + trụ đỡ ray; 8 măng đá treo, 3 dây xích treo dưới nền, thang máy lồng treo từ cần trục bên trái; nền được mở rộng và đỡ bằng đá.
Đạo cụ tạo không khí: bốn bậc lối vào, hai đèn đường gang đúc đen (đầu đèn phát sáng LampGlow), thỏi vàng và đống xu ở lối vào, 4 nhân vật LEGO tí hon (nhân viên ngân hàng yêu tinh, pháp sư áo xanh dương, pháp sư áo xanh lá, lính gác đội mũ sắt).
Mặt đất: mặt phẳng lớn (đổi màu giữa bản kết xuất sáng/tối).
Máy quay: dọc 620×800, 50mm, góc nhìn 3/4 từ trước-bên; khung hình phải bao trọn từ mặt đất đến đỉnh cánh rồng.

Phần 2: Phong hóa vật liệu
Thêm node phong hóa thủ tục cho 10 vật liệu — đá cẩm thạch, gạch trắng, gạch xám, ba loại đá, xanh mái vòm, tường nâu be, thân rồng, cánh rồng — (không UV; dùng tọa độ Generated):
Noise Texture (Scale 3.5–8, Detail 6, Roughness 0.75) → ColorRamp (màu vết ố tối ↔ màu nền gốc) → Mix (MULTIPLY, Factor 0.35–0.6) → Base Color, tạo vết ố và thấm vệt mưa.
Noise tần số cao thứ hai (Scale≈22) → Map Range → Roughness (biến đổi trong khoảng ±0.15/+0.45 so với độ nhám gốc).
Thêm cơ chế chặn áp dụng trùng lặp (bỏ qua nếu node đã tồn tại).

Phần 3: Ba sắc thái ánh sáng và kết xuất
Kết xuất ba PNG 620×800 dưới cùng một máy quay bằng cách chuyển nhóm đèn (EEVEE, bật raytracing, AgX tương phản trung bình-cao):
Bản sáng gringotts_light.png: môi trường world gần trắng (strength≈0.45), đèn vùng DISK chính trắng ấm + ánh sáng phụ xanh lạnh + đèn viền từ trên (energy 350–750), mặt đất xám nhạt. Chất lượng ảnh sản phẩm: vùng trắng không cháy sáng, phân tách sáng tối rõ trên cột và mặt tiền.
Bản đêm gringotts_dark.png: world xanh-đen đậm (xanh cực tối ở strength≈0.85), ánh trăng xanh lạnh chính + ánh sáng phụ lạnh yếu + ánh sáng trước ấm mờ; tăng phát sáng đèn đường/đèn tường lên 35–40 cùng đèn điểm ấm; ánh sáng ấm tại cửa hầm, đèn điểm ở ngọn lửa. Tổng thể có đường viền dễ đọc + điểm nhấn ánh sáng ấm.
Bản sảnh vàng gringotts_golden.png (theo tham chiếu không khí): world tối ấm (0.035, 0.024, 0.012); đèn vùng vàng ấm mạnh từ phía trên (≈7000, màu 1.0/0.74/0.38, mô phỏng đèn chùm) + ánh sáng trước ấm + ánh sáng phụ ấm; các luồng đèn Spot xanh lạnh hai bên (≈10000–14000); Principled Volume khối lập phương lớn (Density≈0.0045, Anisotropy 0.35) để thấy rõ chùm sáng; Glare trong compositor (Fog Glow, Threshold 1.0, Size 0.7) tạo bloom; bật mọi đèn điểm nến/lửa.
Lưu ý tương thích Blender 5.x: dùng scene.compositing_node_group cho compositor (API node-group; enum Type của Glare là 'Fog Glow'); tên node mới bị ảnh hưởng bởi ngôn ngữ UI, vì vậy hãy đặt use_translate_new_dataname = False ở đầu script hoặc tìm node bằng n.type=='BSDF_PRINCIPLED'. Thay tòa nhà ngân hàng Gringotts bằng lâu đài Hogwarts: giữ nguyên ba nút sắc thái ánh sáng và bốn thiết lập sẵn máy quay, đổi thành toàn cảnh, tháp Đại Sảnh Đường, tháp thiên văn và nhà thuyền Hồ Đen; vật liệu phong hóa cùng logic thanh trượt lửa/đèn giữ nguyên. Phần 4: Bảng điều khiển ánh sáng tương tác (trang web)
Ngăn xếp kỹ thuật: Vite + Three.js (npm run dev phải khởi động và chuyển tiếp đối số host/port). Xuất mô hình từ Blender qua glTF dưới dạng GLB (chỉ mesh; chuyển văn bản thành mesh trước khi xuất). Đồng thời tạo texture grunge nhiễu đa octave 512px grunge.png bằng Python (PIL/numpy) (nền gần trắng + vệt đốm tối + vệt mưa dọc).
Tính năng trang (phải triển khai và xác minh toàn bộ):
Bảng điều khiển kính mờ bên trái, tiêu đề "Gringotts · Lighting Console".
3 nút sắc thái ánh sáng: ☀️ Bright / 🌙 Night / 🏛️ Golden Hall — tương ứng ba bộ tham số ánh sáng ở Phần 3 (màu nền, đèn hemisphere, màu-cường độ-vị trí đèn directional/spot, màu sương), mặc định Golden Hall.
4 nút máy quay: Panorama / Front Facade / Dome Dragon / Underground Vault — máy quay bay giữa các vị trí với easing (OrbitControls, bật damping).
4 thanh trượt: 🔥 Fire Intensity (emissiveIntensity của vật liệu Fire + đèn điểm ngọn lửa), 🏮 Lamp Intensity (vật liệu LampGlow + 8 đèn điểm), 🌫️ Fog Density (mật độ FogExp2 theo tỷ lệ từng sắc thái), 🕸️ Weathering Amount (texture grunge phủ dưới dạng map + làm tối màu nền + tăng độ nhám; xóa hoàn toàn ở 0).
Lửa và đèn có hoạt ảnh nhấp nháy ngẫu nhiên; nút bật/tắt tự xoay.
Hỗ trợ tham số URL cho trạng thái trực tiếp (?mood=night&cam=vault&fire=1.5).
Tone mapping ACESFilmic, UI trang tối, không có cổng đăng nhập/quyền hạn, tương tác được ngay ở màn hình đầu tiên.
Xác minh: khởi động máy chủ dev tạm thời, dùng Chrome không giao diện (--use-angle=swiftshader) để chụp màn hình và kiểm tra trực quan ba trạng thái — Golden Hall mặc định, ?mood=night&cam=vault, và ?mood=bright&cam=dragon — xác nhận kết xuất đúng; phải dừng máy chủ sau khi xác minh, và bản bàn giao phải gồm liên kết xem trước [http://localhost:7100/](http://localhost:7100/) cùng đường dẫn dự án tuyệt đối.

Sản phẩm bàn giao
gringotts_lego.blend — cảnh hoàn chỉnh có thể chỉnh sửa (với vật liệu phong hóa và ánh sáng Golden Hall)
gringotts_light.png / gringotts_dark.png / gringotts_golden.png — ba bản kết xuất sắc thái
gringotts-web/ — bảng điều khiển ánh sáng tương tác (có mô hình GLB và texture grunge)
script bpy cho các giai đoạn mô hình hóa/nâng cao/kết xuất (có thể tái tạo)

Giới hạn chất lượng
Sau mỗi lần kết xuất, mở ảnh và kiểm tra: khung hình đầy đủ (không cắt cánh rồng), vùng trắng không cháy sáng, bóng dễ đọc, biển không bị che; điều chỉnh tham số và kết xuất lại nếu bất kỳ kiểm tra nào thất bại.
Các con số phải nhất quán: vị trí đèn/tọa độ máy quay dùng quy đổi Blender→Three.js (x, z, −y).
Không được giả mạo thành công: giữ lỗi gốc cho mọi bước thất bại và sửa lỗi đó; chỉ thử lại tối đa một lần trước khi đổi hướng tiếp cận.

Vai trò và Mục tiêu
Bạn là một nghệ sĩ kỹ thuật thành thạo cả Blender (lập trình bpy) lẫn Web 3D hiện đại (Three.js). Hãy dùng mô hình hóa thủ tục trong Blender cục bộ để xây dựng Ngân hàng Phù thủy Gringotts phong cách LEGO, hoàn thiện vật liệu phong hóa và kết xuất dưới ba sắc thái ánh sáng, rồi cung cấp một bảng điều khiển web tương tác để điều chỉnh sắc thái ánh sáng và chi tiết theo thời gian thực trên trình duyệt.
Xuyên suốt: lưu mọi đầu ra vào không gian làm việc hiện tại; mở và kiểm tra mọi kết quả kết xuất, lặp lại để xử lý mọi vấn đề phát hiện được; trước khi bàn giao trang web, thực sự mở và xác minh trang trong trình duyệt thật/không giao diện, đồng thời không để lại tiến trình máy chủ chạy nền.

Sắc thái tham chiếu (hai ảnh tham chiếu)
Tham chiếu mô hình hóa: ảnh chính thức của bộ LEGO 76417 Gringotts — mặt tiền đá cẩm thạch trắng + cột tiền sảnh + biển "GRINGOTTS BANK" + mái vòm xanh + rồng Ukrainian Ironbelly phía trên + hầm ngầm và đường ray xe mỏ được các trụ đá chống đỡ bên dưới.
Tham chiếu không khí: tranh ý tưởng sảnh đá cẩm thạch Gringotts — đá cẩm thạch tối phong hóa, đồ trang trí vàng, ánh sáng vàng ấm từ trên cao của đèn chùm pha lê, các luồng sáng lạnh xuyên qua cửa sổ tròn, những đốm sáng nến, tương phản sáng tối mạnh và ánh sáng thể tích.

Phần 1: Xây dựng cảnh (script Blender bpy, chạy ở chế độ nền -b --python)
Quy ước tỷ lệ: 1 đơn vị LEGO = 1 đơn vị Blender; khoảng cách stud 1.6, bán kính stud 0.45, chiều cao stud 0.35. Mọi vật liệu đều có cảm giác nhựa LEGO (Principled, Roughness≈0.28, Coat≈0.25).
Các cấu trúc bắt buộc:
Khối chính ngân hàng: tòa nhà chính bằng đá cẩm thạch trắng/xám nhạt (rộng 22 × cao 15), mặt tiền có các đường gạch ngang; tiền sảnh bốn cột (đế cột + thân cột + đai vòng + đầu cột) + dầm đầu cột; cửa đôi nâu thụt vào + tay nắm cầu vàng + khung cửa trắng; cửa sổ tròn phía trên cửa (thanh chia ô chữ thập màu vàng); biển chữ 3D vàng "GRINGOTTS BANK" (đặt giữa hai cột trong để tránh bị che khuất); các tòa nhà cánh ba tầng ở hai bên (khung cửa sổ trắng, phào chỉ, stud mái).
Chi tiết mặt tiền: hai cửa sổ khung đen nghiêng ra ngoài + lan can ban công đen; tổng cộng 4 đèn tường gang đúc trên tường lối vào và tường cánh (vật liệu phát sáng LampGlow).
Tháp mái vòm: thân trống trắng (8 cửa sổ nhỏ + vòng phào) + mái vòm bán cầu xanh + gân vàng và quả cầu đỉnh.
Ukrainian Ironbelly: thân xám trắng nằm trên mép trước mái vòm, cánh màng trong/ngoài hai lớp (có xương dọc mép trước, ngón cánh, vuốt cánh), sừng vàng và đồng tử vàng, gai lưng, bốn chi chụp với vuốt vàng, đuôi quấn quanh mái vòm; phun lửa hai lớp (lửa ngoài cam FireOuter + lửa trong vàng sáng FireInner, phát sáng); xích sắt 9 mắt từ cổ tới mái vòm.
Bên trái · cửa hàng thú cưng ma thuật: mặt tiền đỏ đậm + biển MENAGERIE vàng, khung cửa sổ xanh, mái xám hai dốc, tháp nhọn đen bốn góc, ống khói cam ×2.
Bên phải · tòa nhà phụ: tường sọc be/trắng hai tầng, mái hai dốc, đèn tường ×2, một con cú nhỏ trên mái.
Khu vực ngầm: các trụ đá xếp lớp, so le (ba vật liệu đá xám) chống đỡ nền; cửa hầm tròn phía trước (đĩa cửa vàng + nan và moay-ơ xám đậm); hai đoạn đường ray xe mỏ cong (ray + tà vẹt) + xe chở đầy đồng tiền vàng; vòng ray ở mặt đất + trụ đỡ ray; 8 măng đá treo, 3 dây xích treo dưới nền, thang máy lồng treo từ cần trục bên trái; nền được mở rộng và đỡ bằng đá.
Đạo cụ tạo không khí: bốn bậc lối vào, hai đèn đường gang đúc đen (đầu đèn phát sáng LampGlow), thỏi vàng và đống xu ở lối vào, 4 nhân vật LEGO tí hon (nhân viên ngân hàng yêu tinh, pháp sư áo xanh dương, pháp sư áo xanh lá, lính gác đội mũ sắt).
Mặt đất: mặt phẳng lớn (đổi màu giữa bản kết xuất sáng/tối).
Máy quay: dọc 620×800, 50mm, góc nhìn 3/4 từ trước-bên; khung hình phải bao trọn từ mặt đất đến đỉnh cánh rồng.

Phần 2: Phong hóa vật liệu
Thêm node phong hóa thủ tục cho 10 vật liệu — đá cẩm thạch, gạch trắng, gạch xám, ba loại đá, xanh mái vòm, tường nâu be, thân rồng, cánh rồng — (không UV; dùng tọa độ Generated):
Noise Texture (Scale 3.5–8, Detail 6, Roughness 0.75) → ColorRamp (màu vết ố tối ↔ màu nền gốc) → Mix (MULTIPLY, Factor 0.35–0.6) → Base Color, tạo vết ố và thấm vệt mưa.
Noise tần số cao thứ hai (Scale≈22) → Map Range → Roughness (biến đổi trong khoảng ±0.15/+0.45 so với độ nhám gốc).
Thêm cơ chế chặn áp dụng trùng lặp (bỏ qua nếu node đã tồn tại).

Phần 3: Ba sắc thái ánh sáng và kết xuất
Kết xuất ba PNG 620×800 dưới cùng một máy quay bằng cách chuyển nhóm đèn (EEVEE, bật raytracing, AgX tương phản trung bình-cao):
Bản sáng gringotts_light.png: môi trường world gần trắng (strength≈0.45), đèn vùng DISK chính trắng ấm + ánh sáng phụ xanh lạnh + đèn viền từ trên (energy 350–750), mặt đất xám nhạt. Chất lượng ảnh sản phẩm: vùng trắng không cháy sáng, phân tách sáng tối rõ trên cột và mặt tiền.
Bản đêm gringotts_dark.png: world xanh-đen đậm (xanh cực tối ở strength≈0.85), ánh trăng xanh lạnh chính + ánh sáng phụ lạnh yếu + ánh sáng trước ấm mờ; tăng phát sáng đèn đường/đèn tường lên 35–40 cùng đèn điểm ấm; ánh sáng ấm tại cửa hầm, đèn điểm ở ngọn lửa. Tổng thể có đường viền dễ đọc + điểm nhấn ánh sáng ấm.
Bản sảnh vàng gringotts_golden.png (theo tham chiếu không khí): world tối ấm (0.035, 0.024, 0.012); đèn vùng vàng ấm mạnh từ phía trên (≈7000, màu 1.0/0.74/0.38, mô phỏng đèn chùm) + ánh sáng trước ấm + ánh sáng phụ ấm; các luồng đèn Spot xanh lạnh hai bên (≈10000–14000); Principled Volume khối lập phương lớn (Density≈0.0045, Anisotropy 0.35) để thấy rõ chùm sáng; Glare trong compositor (Fog Glow, Threshold 1.0, Size 0.7) tạo bloom; bật mọi đèn điểm nến/lửa.
Lưu ý tương thích Blender 5.x: dùng scene.compositing_node_group cho compositor (API node-group; enum Type của Glare là 'Fog Glow'); tên node mới bị ảnh hưởng bởi ngôn ngữ UI, vì vậy hãy đặt use_translate_new_dataname = False ở đầu script hoặc tìm node bằng n.type=='BSDF_PRINCIPLED'. Chuyển toàn bộ nội dung bảng điều khiển — tiêu đề, nút, thanh trượt — sang tiếng Anh và thêm lời thuyết minh tiếng Anh một dòng cho mỗi trong bốn thiết lập sẵn máy quay (ví dụ: "The dragon never sleeps."), hướng đến người hâm mộ Harry Potter quốc tế, đồng thời giữ phong cách UI kính mờ tối. Phần 4: Bảng điều khiển ánh sáng tương tác (trang web)
Ngăn xếp kỹ thuật: Vite + Three.js (npm run dev phải khởi động và chuyển tiếp đối số host/port). Xuất mô hình từ Blender qua glTF dưới dạng GLB (chỉ mesh; chuyển văn bản thành mesh trước khi xuất). Đồng thời tạo texture grunge nhiễu đa octave 512px grunge.png bằng Python (PIL/numpy) (nền gần trắng + vệt đốm tối + vệt mưa dọc).
Tính năng trang (phải triển khai và xác minh toàn bộ):
Bảng điều khiển kính mờ bên trái, tiêu đề "Gringotts · Lighting Console".
3 nút sắc thái ánh sáng: ☀️ Bright / 🌙 Night / 🏛️ Golden Hall — tương ứng ba bộ tham số ánh sáng ở Phần 3 (màu nền, đèn hemisphere, màu-cường độ-vị trí đèn directional/spot, màu sương), mặc định Golden Hall.
4 nút máy quay: Panorama / Front Facade / Dome Dragon / Underground Vault — máy quay bay giữa các vị trí với easing (OrbitControls, bật damping).
4 thanh trượt: 🔥 Fire Intensity (emissiveIntensity của vật liệu Fire + đèn điểm ngọn lửa), 🏮 Lamp Intensity (vật liệu LampGlow + 8 đèn điểm), 🌫️ Fog Density (mật độ FogExp2 theo tỷ lệ từng sắc thái), 🕸️ Weathering Amount (texture grunge phủ dưới dạng map + làm tối màu nền + tăng độ nhám; xóa hoàn toàn ở 0).
Lửa và đèn có hoạt ảnh nhấp nháy ngẫu nhiên; nút bật/tắt tự xoay.
Hỗ trợ tham số URL cho trạng thái trực tiếp (?mood=night&cam=vault&fire=1.5).
Tone mapping ACESFilmic, UI trang tối, không có cổng đăng nhập/quyền hạn, tương tác được ngay ở màn hình đầu tiên.
Xác minh: khởi động máy chủ dev tạm thời, dùng Chrome không giao diện (--use-angle=swiftshader) để chụp màn hình và kiểm tra trực quan ba trạng thái — Golden Hall mặc định, ?mood=night&cam=vault, và ?mood=bright&cam=dragon — xác nhận kết xuất đúng; phải dừng máy chủ sau khi xác minh, và bản bàn giao phải gồm liên kết xem trước [http://localhost:7100/](http://localhost:7100/) cùng đường dẫn dự án tuyệt đối.

Sản phẩm bàn giao
gringotts_lego.blend — cảnh hoàn chỉnh có thể chỉnh sửa (với vật liệu phong hóa và ánh sáng Golden Hall)
gringotts_light.png / gringotts_dark.png / gringotts_golden.png — ba bản kết xuất sắc thái
gringotts-web/ — bảng điều khiển ánh sáng tương tác (có mô hình GLB và texture grunge)
script bpy cho các giai đoạn mô hình hóa/nâng cao/kết xuất (có thể tái tạo)

Giới hạn chất lượng
Sau mỗi lần kết xuất, mở ảnh và kiểm tra: khung hình đầy đủ (không cắt cánh rồng), vùng trắng không cháy sáng, bóng dễ đọc, biển không bị che; điều chỉnh tham số và kết xuất lại nếu bất kỳ kiểm tra nào thất bại.
Các con số phải nhất quán: vị trí đèn/tọa độ máy quay dùng quy đổi Blender→Three.js (x, z, −y).
Không được giả mạo thành công: giữ lỗi gốc cho mọi bước thất bại và sửa lỗi đó; chỉ thử lại tối đa một lần trước khi đổi hướng tiếp cận.