10
Tôi đang thử nghiệm với một cảnh Three.js đơn giản (người mới làm quen trong lĩnh vực này). Tôi đang sử dụng WebGLRenderer Three.js và đã thiết lập một mặt phẳng, một khối lập phương tạo bóng và nguồn ánh sáng định hướng. Kết quả được hiển thị trong hình ảnh.Chất lượng của bóng tối Three.js trong Chrome/MacOS?
Làm thế nào để:
1. Tăng chất lượng của đồ họa bóng?
2. Loại bỏ các cạnh lởm chởm?
tôi đã thiết lập khử răng cưa là true nhưng nó không có vẻ để giúp đỡ trong bất kỳ trình duyệt ...
renderer = new THREE.WebGLRenderer ({antialias: true});
Các shadowMapType là hữu ích, cảm ơn! Tăng kích thước shadowMap không có hiệu lực. Bất kỳ ý tưởng trên các cạnh lởm chởm? Làm cho cảnh hai lần kích thước của phần tử canvas dường như giúp một chút. – dani
Đặt antialias thành true nên đã tạo sự khác biệt. Nhưng như một phương sách cuối cùng, bạn cũng có thể thử effectFXAA ShaderPass mà bạn có thể thấy các triển khai trong thư mục ví dụ. Có một số (webgl_lines_colors.html, webgl_geometry_text.html) – gaitat
Điều chỉnh kích thước của máy ảnh bóng cũng sẽ hữu ích. Bạn nên hạn chế sự bực bội xem của camera bóng tối càng nhỏ càng tốt, để nó chỉ vừa đủ cảnh của bạn. Bằng cách này bạn tận dụng lợi thế của độ phân giải và độ phân giải có sẵn. shadowCameraNear và shadowCameraFar sẽ là nghi phạm đầu tiên. Trong trường hợp đèn định hướng, cũng có thứ gì đó như shadowCameraLeft, trên cùng, bên phải, dưới cùng… – yaku