Three.js Truy xuất dữ liệu từ WebGLRenderTarget (sim nước)

Question

Tôi đang cố gắng chuyển cổng này (http://madebyevan.com/webgl-water/) qua BA. Tôi nghĩ rằng tôi đang nhận được gần (chỉ muốn mô phỏng cho bây giờ, không quan tâm về chất ăn da/khúc xạ nào được nêu ra). Tôi muốn làm cho nó hoạt động với các shader để tăng cường GPU.

Dưới đây là hiện tại của tôi BA thiết lập sử dụng shaders: http://jsfiddle.net/EqLL9/2/ (máy bay nhỏ thứ hai là để gỡ lỗi những gì hiện đang nằm trong WebGLRenderTarget)

Những gì tôi đang phải vật lộn với đang đọc dữ liệu trở lại từ WebGLRenderTarget (rtTexture trong ví dụ của tôi). Trong ví dụ bạn sẽ thấy 4 đỉnh xung quanh điểm trung tâm được di dời lên trên. Điều này là chính xác (sau 1 bước mô phỏng) khi nó bắt đầu với điểm trung tâm là điểm duy nhất của dịch chuyển.

Nếu tôi có thể đọc dữ liệu từ rtTexture và cập nhật kết cấu dữ liệu (buf1) mỗi khung hình, thì mô phỏng sẽ hoạt ảnh đúng cách. Làm cách nào để đọc dữ liệu trực tiếp từ một WebGLRenderTarget? Tất cả các ví dụ minh họa cách gửi dữ liệu đến đích (hiển thị cho nó), không đọc TỪ nó. Hay tôi làm tất cả sai? Một cái gì đó nói với tôi tôi sẽ phải làm việc với nhiều kết cấu và bằng cách nào đó trao đổi qua lại tương tự như cách Evan đã làm nó.

TL; DR: Làm thế nào tôi có thể sao chép dữ liệu từ một WebGLRenderTarget đến một DataTexture sau khi một cuộc gọi như thế này:
// render to rtTexture
renderer.render(sceneRTT, cameraRTT, rtTexture, true);

EDIT: Có thể đã tìm thấy các giải pháp tại jsfiddle/gero3/UyGD8/9/ Will điều tra và báo cáo lại.

Answer 1

Ok, tôi đã tìm ra cách để đọc dữ liệu sử dụng các cuộc gọi webgl mẹ đẻ:

// Render first scene into texture 
renderer.render(sceneRTT, cameraRTT, rtTexture, true); 

// read render texture into buffer 
var gl = renderer.getContext(); 
gl.readPixels(0, 0, simRes, simRes, gl.RGBA, gl.UNSIGNED_BYTE, buf1.image.data); 
buf1.needsUpdate = true; 

Các mô phỏng hiện sinh động. Tuy nhiên, nó dường như không hoạt động đúng (có thể là một lỗi câm tôi nhìn). Dường như các giá trị độ cao không bao giờ bị giảm bớt và tôi không chắc chắn tại sao. Dữ liệu từ buf1 được sử dụng trong trình đổ bóng phân đoạn, tính toán chiều cao mới (màu đỏ trong RGBA), làm giảm giá trị (nhân với 0,99), sau đó kết xuất nó thành một kết cấu. Sau đó tôi đọc dữ liệu cập nhật này từ kết cấu trở lại thành buf1.

Đây là fiddle mới nhất: http://jsfiddle.net/EqLL9/3/

tôi sẽ tiếp tục cập nhật này như tôi tiến bộ cùng.

EDIT: Hoạt động tốt ngay bây giờ. Chỉ cần có các chuẩn được thực hiện, và bây giờ làm việc trên phản xạ và khúc xạ môi trường (một lần nữa hoàn toàn là các shaders). http://relicweb.com/webgl/rt.html