Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 | 1364x 1364x 1364x 1364x 1364x 1364x 1364x 1364x 1364x 412x 412x 412x 412x 412x 412x 412x 412x 412x 412x 3388x 3388x 3388x 3388x 3388x 3388x 1884x 1884x 1884x 3388x 3388x 412x 1x 412x 412x 412x 412x 412x 412x 412x 412x 412x 412x 1x 1x 412x 412x 412x 412x 412x 1x 1x 1x 1342x 1342x | import BoundingRectangle from "../Core/BoundingRectangle.js";
import Color from "../Core/Color.js";
import defined from "../Core/defined.js";
import destroyObject from "../Core/destroyObject.js";
import FramebufferManager from "../Renderer/FramebufferManager.js";
import PassState from "../Renderer/PassState.js";
import PixelDatatype from "../Renderer/PixelDatatype.js";
import PixelFormat from "../Core/PixelFormat.js";
import Sync from "../Renderer/Sync.js";
import RuntimeError from "../Core/RuntimeError.js";
/**
* @private
*/
function PickFramebuffer(context) {
// Override per-command states
const passState = new PassState(context);
passState.blendingEnabled = false;
passState.scissorTest = {
enabled: true,
rectangle: new BoundingRectangle(),
};
passState.viewport = new BoundingRectangle();
this._context = context;
this._fb = new FramebufferManager({
depthStencil: true,
});
this._passState = passState;
this._width = 0;
this._height = 0;
}
/**
* Return the picked object(s) rendered within a given rectangle.
*
* @private
* @param {object} context The active context.
* @param {Uint8Array|Uint16Array|Float32Array|Uint32Array} pixels The pixels in the specified rectangle.
* @param {number} width The rectangle width.
* @param {number} height The rectangle height.
* @param {number} [limit=1] If supplied, stop iterating after collecting this many objects.
* @returns {object[]} A list of rendered objects, ordered by distance to the middle of the rectangle.
*/
function pickObjectsFromPixels(context, pixels, width, height, limit = 1) {
const max = Math.max(width, height);
const length = max * max;
const halfWidth = Math.floor(width * 0.5);
const halfHeight = Math.floor(height * 0.5);
let x = 0;
let y = 0;
let dx = 0;
let dy = -1;
// Spiral around the center pixel, this is a workaround until
// we can access the depth buffer on all browsers.
// The region does not have to square and the dimensions do not have to be odd, but
// loop iterations would be wasted. Prefer square regions where the size is odd.
const objects = new Set();
for (let i = 0; i < length; ++i) {
Eif (
-halfWidth <= x &&
x <= halfWidth &&
-halfHeight <= y &&
y <= halfHeight
) {
const index = 4 * ((halfHeight - y) * width + x + halfWidth);
const pickColor = Color.bytesToRgba(
pixels[index],
pixels[index + 1],
pixels[index + 2],
pixels[index + 3],
);
const object = context.getObjectByPickColor(pickColor);
Iif (defined(object)) {
objects.add(object);
if (objects.size >= limit) {
break;
}
}
}
// if (top right || bottom left corners) || (top left corner) || (bottom right corner + (1, 0))
// change spiral direction
if (x === y || (x < 0 && -x === y) || (x > 0 && x === 1 - y)) {
const temp = dx;
dx = -dy;
dy = temp;
}
x += dx;
y += dy;
}
return [...objects];
}
PickFramebuffer.prototype.begin = function (screenSpaceRectangle, viewport) {
const context = this._context;
const { width, height } = viewport;
BoundingRectangle.clone(
screenSpaceRectangle,
this._passState.scissorTest.rectangle,
);
// Create or recreate renderbuffers and framebuffer used for picking
this._width = width;
this._height = height;
this._fb.update(context, width, height);
this._passState.framebuffer = this._fb.framebuffer;
this._passState.viewport.width = width;
this._passState.viewport.height = height;
return this._passState;
};
/**
* Return the picked objects rendered within a given rectangle using asynchronously without stalling the GPU.
* Requires WebGL2.
*
* @param {BoundingRectangle} screenSpaceRectangle
* @param {FrameState} frameState
* @param {number} [limit=1] If supplied, stop iterating after collecting this many objects.
* @returns {Promise<object[]>} A list of rendered objects, ordered by distance to the middle of the rectangle.
*
* @exception {RuntimeError} Async Picking Request Timeout.
* @exception {DeveloperError} A WebGL 2 context is required.
*/
PickFramebuffer.prototype.endAsync = async function (
screenSpaceRectangle,
frameState,
limit = 1,
) {
const width = screenSpaceRectangle.width ?? 1.0;
const height = screenSpaceRectangle.height ?? 1.0;
const context = this._context;
const framebuffer = this._fb.framebuffer;
let pixelDatatype = PixelDatatype.UNSIGNED_BYTE;
let pixelFormat = PixelFormat.RGBA;
if (defined(framebuffer) && framebuffer.numberOfColorAttachments > 0) {
pixelDatatype = framebuffer.getColorTexture(0).pixelDatatype;
pixelFormat = framebuffer.getColorTexture(0).pixelFormat;
}
const pbo = context.readPixelsToPBO({
x: screenSpaceRectangle.x,
y: screenSpaceRectangle.y,
width: width,
height: height,
framebuffer: framebuffer,
});
const sync = Sync.create({
context: context,
});
// Wait for the GPU to signal that it is ready to readback the PBO data
try {
await sync.waitForSignal((next) => frameState.afterRender.push(next));
const pixels = PixelFormat.createTypedArray(
pixelFormat,
pixelDatatype,
width,
height,
);
pbo.getBufferData(pixels);
const pickedObjects = pickObjectsFromPixels(
context,
pixels,
width,
height,
limit,
);
return pickedObjects;
} catch (e) {
throw new RuntimeError("Async Picking Request Timeout");
} finally {
sync.destroy();
pbo.destroy();
}
};
/**
* Return the picked objects rendered within a given rectangle.
*
* @param {BoundingRectangle} screenSpaceRectangle
* @param {number} [limit=1] If supplied, stop iterating after collecting this many objects.
* @returns {object[]} A list of rendered objects, ordered by distance to the middle of the rectangle.
*/
PickFramebuffer.prototype.end = function (screenSpaceRectangle, limit = 1) {
const width = screenSpaceRectangle.width ?? 1.0;
const height = screenSpaceRectangle.height ?? 1.0;
const context = this._context;
const pixels = context.readPixels({
x: screenSpaceRectangle.x,
y: screenSpaceRectangle.y,
width: width,
height: height,
framebuffer: this._fb.framebuffer,
});
return pickObjectsFromPixels(context, pixels, width, height, limit);
};
/**
* Return a typed array containing the RGBA (byte) components of the
* pixel that is at the center of the given rectangle.
*
* This may, for example, be voxel tile and sample information as rendered
* by a pickVoxel pass, within a given rectangle. Or it may be the result
* of a metadata picking rendering pass.
*
* @param {BoundingRectangle} screenSpaceRectangle
* @returns {Uint8Array} The RGBA components
*/
PickFramebuffer.prototype.readCenterPixel = function (screenSpaceRectangle) {
const width = screenSpaceRectangle.width ?? 1.0;
const height = screenSpaceRectangle.height ?? 1.0;
const context = this._context;
const pixels = context.readPixels({
x: screenSpaceRectangle.x,
y: screenSpaceRectangle.y,
width: width,
height: height,
framebuffer: this._fb.framebuffer,
});
// Read the center pixel
const halfWidth = Math.floor(width * 0.5);
const halfHeight = Math.floor(height * 0.5);
const index = 4 * (halfHeight * width + halfWidth);
return pixels.slice(index, index + 4);
};
PickFramebuffer.prototype.isDestroyed = function () {
return false;
};
PickFramebuffer.prototype.destroy = function () {
this._fb.destroy();
return destroyObject(this);
};
export default PickFramebuffer;
|