智慧水务管理系统 - 精河县供水工程综合管理平台

renderBufferPolygonCollection.js 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386
  1. // @ts-check
  2. import defined from "../Core/defined.js";
  3. import Cartesian3 from "../Core/Cartesian3.js";
  4. import Color from "../Core/Color.js";
  5. import BufferPolygon from "./BufferPolygon.js";
  6. import Buffer from "../Renderer/Buffer.js";
  7. import BufferUsage from "../Renderer/BufferUsage.js";
  8. import VertexArray from "../Renderer/VertexArray.js";
  9. import ComponentDatatype from "../Core/ComponentDatatype.js";
  10. import RenderState from "../Renderer/RenderState.js";
  11. import BlendingState from "./BlendingState.js";
  12. import ShaderSource from "../Renderer/ShaderSource.js";
  13. import ShaderProgram from "../Renderer/ShaderProgram.js";
  14. import DrawCommand from "../Renderer/DrawCommand.js";
  15. import Pass from "../Renderer/Pass.js";
  16. import PrimitiveType from "../Core/PrimitiveType.js";
  17. import BufferPolygonMaterialVS from "../Shaders/BufferPolygonMaterialVS.js";
  18. import BufferPolygonMaterialFS from "../Shaders/BufferPolygonMaterialFS.js";
  19. import EncodedCartesian3 from "../Core/EncodedCartesian3.js";
  20. import AttributeCompression from "../Core/AttributeCompression.js";
  21. import IndexDatatype from "../Core/IndexDatatype.js";
  22. import BufferPolygonMaterial from "./BufferPolygonMaterial.js";
  23. import BlendOption from "./BlendOption.js";
  24. /** @import {TypedArray} from "../Core/globalTypes.js"; */
  25. /** @import FrameState from "./FrameState.js"; */
  26. /** @import BufferPolygonCollection from "./BufferPolygonCollection.js"; */
  27. /**
  28. * TODO(PR#13211): Need 'keyof' syntax to avoid duplicating attribute names.
  29. * @typedef {'positionHigh' | 'positionLow' | 'pickColor' | 'showColorAlpha'} BufferPolygonAttribute
  30. * @ignore
  31. */
  32. /**
  33. * Attribute locations when using 64-bit position precision.
  34. * @type {Record<BufferPolygonAttribute, number>}
  35. * @ignore
  36. */
  37. const BufferPolygonAttributeLocationsFloat64 = {
  38. positionHigh: 0,
  39. positionLow: 1,
  40. pickColor: 2,
  41. showColorAlpha: 3,
  42. };
  43. /**
  44. * Attribute locations when using <= 32-bit position precision.
  45. * @type {Record<string, number>}
  46. * @ignore
  47. */
  48. const BufferPolygonAttributeLocations = {
  49. position: 0,
  50. pickColor: 1,
  51. showColorAlpha: 2,
  52. };
  53. /**
  54. * @typedef {object} BufferPolygonRenderContext
  55. * @property {VertexArray} [vertexArray]
  56. * @property {Record<string, TypedArray>} [attributeArrays]
  57. * @property {TypedArray} [indexArray]
  58. * @property {RenderState} [renderState]
  59. * @property {ShaderProgram} [shaderProgram]
  60. * @property {DrawCommand} [command]
  61. * @property {Function} destroy
  62. * @ignore
  63. */
  64. // Scratch variables.
  65. const polygon = new BufferPolygon();
  66. const material = new BufferPolygonMaterial();
  67. const pickColor = new Color();
  68. const cartesian = new Cartesian3();
  69. const encodedCartesian = new EncodedCartesian3();
  70. /**
  71. * @param {BufferPolygonCollection} collection
  72. * @param {FrameState} frameState
  73. * @param {BufferPolygonRenderContext} [renderContext]
  74. * @returns {BufferPolygonRenderContext}
  75. * @ignore
  76. */
  77. function renderBufferPolygonCollection(collection, frameState, renderContext) {
  78. const context = frameState.context;
  79. renderContext = renderContext || { destroy: destroyRenderContext };
  80. const useFloat64 = collection._positionDatatype === ComponentDatatype.DOUBLE;
  81. const attributeLocations = useFloat64
  82. ? BufferPolygonAttributeLocationsFloat64
  83. : BufferPolygonAttributeLocations;
  84. if (
  85. !defined(renderContext.attributeArrays) ||
  86. !defined(renderContext.indexArray)
  87. ) {
  88. const { vertexCountMax, triangleCountMax } = collection;
  89. // @ts-expect-error Requires https://github.com/CesiumGS/cesium/pull/13203.
  90. renderContext.indexArray = IndexDatatype.createTypedArray(
  91. vertexCountMax,
  92. triangleCountMax * 3,
  93. );
  94. renderContext.attributeArrays = {
  95. ...(!useFloat64
  96. ? { position: collection._positionView }
  97. : {
  98. positionHigh: new Float32Array(vertexCountMax * 3),
  99. positionLow: new Float32Array(vertexCountMax * 3),
  100. }),
  101. pickColor: new Uint8Array(vertexCountMax * 4),
  102. showColorAlpha: new Float32Array(vertexCountMax * 3),
  103. };
  104. }
  105. if (collection._dirtyCount > 0) {
  106. const { attributeArrays } = renderContext;
  107. const { _dirtyOffset, _dirtyCount } = collection;
  108. const indexArray = renderContext.indexArray;
  109. const pickColorArray = attributeArrays.pickColor;
  110. const showColorAlphaArray = attributeArrays.showColorAlpha;
  111. for (let i = _dirtyOffset, il = _dirtyOffset + _dirtyCount; i < il; i++) {
  112. collection.get(i, polygon);
  113. if (!polygon._dirty) {
  114. continue;
  115. }
  116. let tOffset = polygon.triangleOffset;
  117. let vOffset = polygon.vertexOffset;
  118. const polygonIndexArray = polygon.getTriangles();
  119. // Update index.
  120. for (let j = 0, jl = polygon.triangleCount; j < jl; j++) {
  121. indexArray[tOffset * 3] = vOffset + polygonIndexArray[j * 3];
  122. indexArray[tOffset * 3 + 1] = vOffset + polygonIndexArray[j * 3 + 1];
  123. indexArray[tOffset * 3 + 2] = vOffset + polygonIndexArray[j * 3 + 2];
  124. tOffset++;
  125. }
  126. const show = polygon.show;
  127. const cartesianArray = !useFloat64 ? null : polygon.getPositions();
  128. polygon.getMaterial(material);
  129. const encodedColor = AttributeCompression.encodeRGB8(material.color);
  130. Color.fromRgba(polygon._pickId, pickColor);
  131. // Update vertex arrays.
  132. for (let j = 0, jl = polygon.vertexCount; j < jl; j++) {
  133. if (useFloat64) {
  134. // @ts-expect-error TODO(tsd-jsdoc): See https://github.com/CesiumGS/cesium/pull/13302.
  135. Cartesian3.fromArray(cartesianArray, j * 3, cartesian);
  136. EncodedCartesian3.fromCartesian(cartesian, encodedCartesian);
  137. attributeArrays.positionHigh[vOffset * 3] = encodedCartesian.high.x;
  138. attributeArrays.positionHigh[vOffset * 3 + 1] =
  139. encodedCartesian.high.y;
  140. attributeArrays.positionHigh[vOffset * 3 + 2] =
  141. encodedCartesian.high.z;
  142. attributeArrays.positionLow[vOffset * 3] = encodedCartesian.low.x;
  143. attributeArrays.positionLow[vOffset * 3 + 1] = encodedCartesian.low.y;
  144. attributeArrays.positionLow[vOffset * 3 + 2] = encodedCartesian.low.z;
  145. }
  146. pickColorArray[vOffset * 4] = Color.floatToByte(pickColor.red);
  147. pickColorArray[vOffset * 4 + 1] = Color.floatToByte(pickColor.green);
  148. pickColorArray[vOffset * 4 + 2] = Color.floatToByte(pickColor.blue);
  149. pickColorArray[vOffset * 4 + 3] = Color.floatToByte(pickColor.alpha);
  150. showColorAlphaArray[vOffset * 3] = show ? 1 : 0;
  151. showColorAlphaArray[vOffset * 3 + 1] = encodedColor;
  152. showColorAlphaArray[vOffset * 3 + 2] = material.color.alpha;
  153. vOffset++;
  154. }
  155. polygon._dirty = false;
  156. }
  157. }
  158. if (!defined(renderContext.vertexArray)) {
  159. const { attributeArrays } = renderContext;
  160. renderContext.vertexArray = new VertexArray({
  161. context,
  162. indexBuffer: Buffer.createIndexBuffer({
  163. context,
  164. typedArray: renderContext.indexArray,
  165. usage: BufferUsage.STATIC_DRAW,
  166. // @ts-expect-error https://github.com/CesiumGS/cesium/issues/13420
  167. indexDatatype: IndexDatatype.fromTypedArray(renderContext.indexArray),
  168. }),
  169. attributes: [
  170. ...(!useFloat64
  171. ? [
  172. {
  173. index: BufferPolygonAttributeLocations.position,
  174. componentDatatype: collection._positionDatatype,
  175. componentsPerAttribute: 3,
  176. normalize: collection._positionNormalized,
  177. vertexBuffer: Buffer.createVertexBuffer({
  178. typedArray: attributeArrays.position,
  179. context,
  180. usage: BufferUsage.STATIC_DRAW,
  181. }),
  182. },
  183. ]
  184. : [
  185. {
  186. index: BufferPolygonAttributeLocationsFloat64.positionHigh,
  187. componentDatatype: ComponentDatatype.FLOAT,
  188. componentsPerAttribute: 3,
  189. vertexBuffer: Buffer.createVertexBuffer({
  190. typedArray: attributeArrays.positionHigh,
  191. context,
  192. usage: BufferUsage.STATIC_DRAW,
  193. }),
  194. },
  195. {
  196. index: BufferPolygonAttributeLocationsFloat64.positionLow,
  197. componentDatatype: ComponentDatatype.FLOAT,
  198. componentsPerAttribute: 3,
  199. vertexBuffer: Buffer.createVertexBuffer({
  200. typedArray: attributeArrays.positionLow,
  201. context,
  202. usage: BufferUsage.STATIC_DRAW,
  203. }),
  204. },
  205. ]),
  206. {
  207. index: attributeLocations.pickColor,
  208. componentDatatype: ComponentDatatype.UNSIGNED_BYTE,
  209. componentsPerAttribute: 4,
  210. vertexBuffer: Buffer.createVertexBuffer({
  211. typedArray: attributeArrays.pickColor,
  212. context,
  213. usage: BufferUsage.STATIC_DRAW,
  214. }),
  215. },
  216. {
  217. index: attributeLocations.showColorAlpha,
  218. componentDatatype: ComponentDatatype.FLOAT,
  219. componentsPerAttribute: 3,
  220. vertexBuffer: Buffer.createVertexBuffer({
  221. typedArray: attributeArrays.showColorAlpha,
  222. context,
  223. usage: BufferUsage.STATIC_DRAW,
  224. }),
  225. },
  226. ],
  227. });
  228. } else if (collection._dirtyCount > 0) {
  229. const { indexOffset, indexCount, vertexOffset, vertexCount } =
  230. getPolygonDirtyRanges(collection);
  231. renderContext.vertexArray.copyIndexFromRange(
  232. renderContext.indexArray,
  233. indexOffset,
  234. indexCount,
  235. );
  236. for (const key in attributeLocations) {
  237. if (Object.hasOwn(attributeLocations, key)) {
  238. const attribute = /** @type {BufferPolygonAttribute} */ (key);
  239. renderContext.vertexArray.copyAttributeFromRange(
  240. attributeLocations[attribute],
  241. renderContext.attributeArrays[attribute],
  242. vertexOffset,
  243. vertexCount,
  244. );
  245. }
  246. }
  247. }
  248. if (!defined(renderContext.renderState)) {
  249. renderContext.renderState = RenderState.fromCache({
  250. blending:
  251. collection._blendOption === BlendOption.OPAQUE
  252. ? BlendingState.DISABLED
  253. : BlendingState.ALPHA_BLEND,
  254. depthTest: { enabled: true },
  255. });
  256. }
  257. if (!defined(renderContext.shaderProgram)) {
  258. renderContext.shaderProgram = ShaderProgram.fromCache({
  259. context,
  260. vertexShaderSource: new ShaderSource({
  261. sources: [BufferPolygonMaterialVS],
  262. defines: useFloat64 ? ["USE_FLOAT64"] : [],
  263. }),
  264. fragmentShaderSource: new ShaderSource({
  265. sources: [BufferPolygonMaterialFS],
  266. }),
  267. attributeLocations,
  268. });
  269. }
  270. const drawCount = collection.triangleCount * 3;
  271. if (!defined(renderContext.command)) {
  272. renderContext.command = new DrawCommand({
  273. vertexArray: renderContext.vertexArray,
  274. renderState: renderContext.renderState,
  275. shaderProgram: renderContext.shaderProgram,
  276. primitiveType: PrimitiveType.TRIANGLES,
  277. pass:
  278. collection._blendOption === BlendOption.OPAQUE
  279. ? Pass.OPAQUE
  280. : Pass.TRANSLUCENT,
  281. pickId: collection._allowPicking ? "v_pickColor" : undefined,
  282. owner: collection,
  283. count: drawCount,
  284. modelMatrix: collection.modelMatrix, // shared reference
  285. boundingVolume: collection.boundingVolume, // shared reference
  286. debugShowBoundingVolume: collection.debugShowBoundingVolume,
  287. });
  288. }
  289. const command = renderContext.command;
  290. if (command.count !== drawCount) {
  291. command.count = drawCount;
  292. }
  293. if (command.debugShowBoundingVolume !== collection.debugShowBoundingVolume) {
  294. command.debugShowBoundingVolume = collection.debugShowBoundingVolume;
  295. }
  296. frameState.commandList.push(command);
  297. collection._dirtyCount = 0;
  298. collection._dirtyOffset = 0;
  299. return renderContext;
  300. }
  301. /**
  302. * Computes dirty ranges for attribute and index buffers in a collection.
  303. * @param {BufferPolygonCollection} collection
  304. * @ignore
  305. */
  306. function getPolygonDirtyRanges(collection) {
  307. const { _dirtyOffset, _dirtyCount } = collection;
  308. collection.get(_dirtyOffset, polygon);
  309. const vertexOffset = polygon.vertexOffset;
  310. const indexOffset = polygon.triangleOffset * 3;
  311. collection.get(_dirtyOffset + _dirtyCount - 1, polygon);
  312. const vertexCount = polygon.vertexOffset + polygon.vertexCount - vertexOffset;
  313. const indexCount =
  314. (polygon.triangleOffset + polygon.triangleCount) * 3 - indexOffset;
  315. return { indexOffset, indexCount, vertexOffset, vertexCount };
  316. }
  317. /**
  318. * Destroys render context resources. Deleting properties from the context
  319. * object isn't necessary, as collection.destroy() will discard the object.
  320. * @ignore
  321. */
  322. function destroyRenderContext() {
  323. const context = /** @type {BufferPolygonRenderContext} */ (this);
  324. if (defined(context.vertexArray)) {
  325. context.vertexArray.destroy();
  326. }
  327. if (defined(context.shaderProgram)) {
  328. context.shaderProgram.destroy();
  329. }
  330. if (defined(context.renderState)) {
  331. RenderState.removeFromCache(context.renderState);
  332. }
  333. }
  334. export default renderBufferPolygonCollection;