CubeMapFace.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
  1. import Check from "../Core/Check.js";
  2. import defaultValue from "../Core/defaultValue.js";
  3. import defined from "../Core/defined.js";
  4. import DeveloperError from "../Core/DeveloperError.js";
  5. import PixelFormat from "../Core/PixelFormat.js";
  6. import PixelDatatype from "./PixelDatatype.js";
  7. /**
  8. * @private
  9. */
  10. function CubeMapFace(
  11. context,
  12. texture,
  13. textureTarget,
  14. targetFace,
  15. internalFormat,
  16. pixelFormat,
  17. pixelDatatype,
  18. size,
  19. preMultiplyAlpha,
  20. flipY,
  21. initialized
  22. ) {
  23. this._context = context;
  24. this._texture = texture;
  25. this._textureTarget = textureTarget;
  26. this._targetFace = targetFace;
  27. this._pixelDatatype = pixelDatatype;
  28. this._internalFormat = internalFormat;
  29. this._pixelFormat = pixelFormat;
  30. this._size = size;
  31. this._preMultiplyAlpha = preMultiplyAlpha;
  32. this._flipY = flipY;
  33. this._initialized = initialized;
  34. }
  35. Object.defineProperties(CubeMapFace.prototype, {
  36. pixelFormat: {
  37. get: function () {
  38. return this._pixelFormat;
  39. },
  40. },
  41. pixelDatatype: {
  42. get: function () {
  43. return this._pixelDatatype;
  44. },
  45. },
  46. _target: {
  47. get: function () {
  48. return this._targetFace;
  49. },
  50. },
  51. });
  52. /**
  53. * Copies texels from the source to the cubemap's face.
  54. * @param {Object} options Object with the following properties:
  55. * @param {Object} options.source The source {@link ImageData}, {@link HTMLImageElement}, {@link HTMLCanvasElement}, {@link HTMLVideoElement},
  56. * or an object with a width, height, and arrayBufferView properties.
  57. * @param {Number} [options.xOffset=0] An offset in the x direction in the cubemap where copying begins.
  58. * @param {Number} [options.yOffset=0] An offset in the y direction in the cubemap where copying begins.
  59. * @param {Boolean} [options.skipColorSpaceConversion=false] If true, any custom gamma or color profiles in the texture will be ignored.
  60. * @exception {DeveloperError} xOffset must be greater than or equal to zero.
  61. * @exception {DeveloperError} yOffset must be greater than or equal to zero.
  62. * @exception {DeveloperError} xOffset + source.width must be less than or equal to width.
  63. * @exception {DeveloperError} yOffset + source.height must be less than or equal to height.
  64. * @exception {DeveloperError} This CubeMap was destroyed, i.e., destroy() was called.
  65. *
  66. * @example
  67. * // Create a cubemap with 1x1 faces, and make the +x face red.
  68. * const cubeMap = new CubeMap({
  69. * context : context
  70. * width : 1,
  71. * height : 1
  72. * });
  73. * cubeMap.positiveX.copyFrom({
  74. * source: {
  75. * width : 1,
  76. * height : 1,
  77. * arrayBufferView : new Uint8Array([255, 0, 0, 255])
  78. * }
  79. * });
  80. */
  81. CubeMapFace.prototype.copyFrom = function (options) {
  82. //>>includeStart('debug', pragmas.debug);
  83. Check.defined("options", options);
  84. //>>includeEnd('debug');
  85. const xOffset = defaultValue(options.xOffset, 0);
  86. const yOffset = defaultValue(options.yOffset, 0);
  87. //>>includeStart('debug', pragmas.debug);
  88. Check.defined("options.source", options.source);
  89. Check.typeOf.number.greaterThanOrEquals("xOffset", xOffset, 0);
  90. Check.typeOf.number.greaterThanOrEquals("yOffset", yOffset, 0);
  91. if (xOffset + options.source.width > this._size) {
  92. throw new DeveloperError(
  93. "xOffset + options.source.width must be less than or equal to width."
  94. );
  95. }
  96. if (yOffset + options.source.height > this._size) {
  97. throw new DeveloperError(
  98. "yOffset + options.source.height must be less than or equal to height."
  99. );
  100. }
  101. //>>includeEnd('debug');
  102. const source = options.source;
  103. const gl = this._context._gl;
  104. const target = this._textureTarget;
  105. const targetFace = this._targetFace;
  106. gl.activeTexture(gl.TEXTURE0);
  107. gl.bindTexture(target, this._texture);
  108. const width = source.width;
  109. const height = source.height;
  110. let arrayBufferView = source.arrayBufferView;
  111. const size = this._size;
  112. const pixelFormat = this._pixelFormat;
  113. const internalFormat = this._internalFormat;
  114. const pixelDatatype = this._pixelDatatype;
  115. const preMultiplyAlpha = this._preMultiplyAlpha;
  116. const flipY = this._flipY;
  117. const skipColorSpaceConversion = defaultValue(
  118. options.skipColorSpaceConversion,
  119. false
  120. );
  121. let unpackAlignment = 4;
  122. if (defined(arrayBufferView)) {
  123. unpackAlignment = PixelFormat.alignmentInBytes(
  124. pixelFormat,
  125. pixelDatatype,
  126. width
  127. );
  128. }
  129. gl.pixelStorei(gl.UNPACK_ALIGNMENT, unpackAlignment);
  130. if (skipColorSpaceConversion) {
  131. gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
  132. } else {
  133. gl.pixelStorei(
  134. gl.UNPACK_COLORSPACE_CONVERSION_WEBGL,
  135. gl.BROWSER_DEFAULT_WEBGL
  136. );
  137. }
  138. let uploaded = false;
  139. if (!this._initialized) {
  140. if (xOffset === 0 && yOffset === 0 && width === size && height === size) {
  141. // initialize the entire texture
  142. if (defined(arrayBufferView)) {
  143. gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
  144. gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
  145. if (flipY) {
  146. arrayBufferView = PixelFormat.flipY(
  147. arrayBufferView,
  148. pixelFormat,
  149. pixelDatatype,
  150. size,
  151. size
  152. );
  153. }
  154. gl.texImage2D(
  155. targetFace,
  156. 0,
  157. internalFormat,
  158. size,
  159. size,
  160. 0,
  161. pixelFormat,
  162. PixelDatatype.toWebGLConstant(pixelDatatype, this._context),
  163. arrayBufferView
  164. );
  165. } else {
  166. // Only valid for DOM-Element uploads
  167. gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, preMultiplyAlpha);
  168. gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
  169. gl.texImage2D(
  170. targetFace,
  171. 0,
  172. internalFormat,
  173. pixelFormat,
  174. PixelDatatype.toWebGLConstant(pixelDatatype, this._context),
  175. source
  176. );
  177. }
  178. uploaded = true;
  179. } else {
  180. gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
  181. gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
  182. // initialize the entire texture to zero
  183. const bufferView = PixelFormat.createTypedArray(
  184. pixelFormat,
  185. pixelDatatype,
  186. size,
  187. size
  188. );
  189. gl.texImage2D(
  190. targetFace,
  191. 0,
  192. internalFormat,
  193. size,
  194. size,
  195. 0,
  196. pixelFormat,
  197. PixelDatatype.toWebGLConstant(pixelDatatype, this._context),
  198. bufferView
  199. );
  200. }
  201. this._initialized = true;
  202. }
  203. if (!uploaded) {
  204. if (defined(arrayBufferView)) {
  205. gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
  206. gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
  207. if (flipY) {
  208. arrayBufferView = PixelFormat.flipY(
  209. arrayBufferView,
  210. pixelFormat,
  211. pixelDatatype,
  212. width,
  213. height
  214. );
  215. }
  216. gl.texSubImage2D(
  217. targetFace,
  218. 0,
  219. xOffset,
  220. yOffset,
  221. width,
  222. height,
  223. pixelFormat,
  224. PixelDatatype.toWebGLConstant(pixelDatatype, this._context),
  225. arrayBufferView
  226. );
  227. } else {
  228. // Only valid for DOM-Element uploads
  229. gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, preMultiplyAlpha);
  230. gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
  231. // Source: ImageData, HTMLImageElement, HTMLCanvasElement, or HTMLVideoElement
  232. gl.texSubImage2D(
  233. targetFace,
  234. 0,
  235. xOffset,
  236. yOffset,
  237. pixelFormat,
  238. PixelDatatype.toWebGLConstant(pixelDatatype, this._context),
  239. source
  240. );
  241. }
  242. }
  243. gl.bindTexture(target, null);
  244. };
  245. /**
  246. * Copies texels from the framebuffer to the cubemap's face.
  247. *
  248. * @param {Number} [xOffset=0] An offset in the x direction in the cubemap where copying begins.
  249. * @param {Number} [yOffset=0] An offset in the y direction in the cubemap where copying begins.
  250. * @param {Number} [framebufferXOffset=0] An offset in the x direction in the framebuffer where copying begins from.
  251. * @param {Number} [framebufferYOffset=0] An offset in the y direction in the framebuffer where copying begins from.
  252. * @param {Number} [width=CubeMap's width] The width of the subimage to copy.
  253. * @param {Number} [height=CubeMap's height] The height of the subimage to copy.
  254. *
  255. * @exception {DeveloperError} Cannot call copyFromFramebuffer when the texture pixel data type is FLOAT.
  256. * @exception {DeveloperError} Cannot call copyFromFramebuffer when the texture pixel data type is HALF_FLOAT.
  257. * @exception {DeveloperError} This CubeMap was destroyed, i.e., destroy() was called.
  258. * @exception {DeveloperError} xOffset must be greater than or equal to zero.
  259. * @exception {DeveloperError} yOffset must be greater than or equal to zero.
  260. * @exception {DeveloperError} framebufferXOffset must be greater than or equal to zero.
  261. * @exception {DeveloperError} framebufferYOffset must be greater than or equal to zero.
  262. * @exception {DeveloperError} xOffset + source.width must be less than or equal to width.
  263. * @exception {DeveloperError} yOffset + source.height must be less than or equal to height.
  264. * @exception {DeveloperError} This CubeMap was destroyed, i.e., destroy() was called.
  265. *
  266. * @example
  267. * // Copy the framebuffer contents to the +x cube map face.
  268. * cubeMap.positiveX.copyFromFramebuffer();
  269. */
  270. CubeMapFace.prototype.copyFromFramebuffer = function (
  271. xOffset,
  272. yOffset,
  273. framebufferXOffset,
  274. framebufferYOffset,
  275. width,
  276. height
  277. ) {
  278. xOffset = defaultValue(xOffset, 0);
  279. yOffset = defaultValue(yOffset, 0);
  280. framebufferXOffset = defaultValue(framebufferXOffset, 0);
  281. framebufferYOffset = defaultValue(framebufferYOffset, 0);
  282. width = defaultValue(width, this._size);
  283. height = defaultValue(height, this._size);
  284. //>>includeStart('debug', pragmas.debug);
  285. Check.typeOf.number.greaterThanOrEquals("xOffset", xOffset, 0);
  286. Check.typeOf.number.greaterThanOrEquals("yOffset", yOffset, 0);
  287. Check.typeOf.number.greaterThanOrEquals(
  288. "framebufferXOffset",
  289. framebufferXOffset,
  290. 0
  291. );
  292. Check.typeOf.number.greaterThanOrEquals(
  293. "framebufferYOffset",
  294. framebufferYOffset,
  295. 0
  296. );
  297. if (xOffset + width > this._size) {
  298. throw new DeveloperError(
  299. "xOffset + source.width must be less than or equal to width."
  300. );
  301. }
  302. if (yOffset + height > this._size) {
  303. throw new DeveloperError(
  304. "yOffset + source.height must be less than or equal to height."
  305. );
  306. }
  307. if (this._pixelDatatype === PixelDatatype.FLOAT) {
  308. throw new DeveloperError(
  309. "Cannot call copyFromFramebuffer when the texture pixel data type is FLOAT."
  310. );
  311. }
  312. if (this._pixelDatatype === PixelDatatype.HALF_FLOAT) {
  313. throw new DeveloperError(
  314. "Cannot call copyFromFramebuffer when the texture pixel data type is HALF_FLOAT."
  315. );
  316. }
  317. //>>includeEnd('debug');
  318. const gl = this._context._gl;
  319. const target = this._textureTarget;
  320. gl.activeTexture(gl.TEXTURE0);
  321. gl.bindTexture(target, this._texture);
  322. gl.copyTexSubImage2D(
  323. this._targetFace,
  324. 0,
  325. xOffset,
  326. yOffset,
  327. framebufferXOffset,
  328. framebufferYOffset,
  329. width,
  330. height
  331. );
  332. gl.bindTexture(target, null);
  333. this._initialized = true;
  334. };
  335. export default CubeMapFace;