CubeMap.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  1. import Check from '../Core/Check.js';
  2. import defaultValue from '../Core/defaultValue.js';
  3. import defined from '../Core/defined.js';
  4. import defineProperties from '../Core/defineProperties.js';
  5. import destroyObject from '../Core/destroyObject.js';
  6. import DeveloperError from '../Core/DeveloperError.js';
  7. import CesiumMath from '../Core/Math.js';
  8. import PixelFormat from '../Core/PixelFormat.js';
  9. import ContextLimits from './ContextLimits.js';
  10. import CubeMapFace from './CubeMapFace.js';
  11. import MipmapHint from './MipmapHint.js';
  12. import PixelDatatype from './PixelDatatype.js';
  13. import Sampler from './Sampler.js';
  14. import TextureMagnificationFilter from './TextureMagnificationFilter.js';
  15. import TextureMinificationFilter from './TextureMinificationFilter.js';
  16. /**
  17. * @private
  18. */
  19. function CubeMap(options) {
  20. options = defaultValue(options, defaultValue.EMPTY_OBJECT);
  21. //>>includeStart('debug', pragmas.debug);
  22. Check.defined('options.context', options.context);
  23. //>>includeEnd('debug');
  24. var context = options.context;
  25. var source = options.source;
  26. var width;
  27. var height;
  28. if (defined(source)) {
  29. var faces = [source.positiveX, source.negativeX, source.positiveY, source.negativeY, source.positiveZ, source.negativeZ];
  30. //>>includeStart('debug', pragmas.debug);
  31. if (!faces[0] || !faces[1] || !faces[2] || !faces[3] || !faces[4] || !faces[5]) {
  32. throw new DeveloperError('options.source requires positiveX, negativeX, positiveY, negativeY, positiveZ, and negativeZ faces.');
  33. }
  34. //>>includeEnd('debug');
  35. width = faces[0].width;
  36. height = faces[0].height;
  37. //>>includeStart('debug', pragmas.debug);
  38. for ( var i = 1; i < 6; ++i) {
  39. if ((Number(faces[i].width) !== width) || (Number(faces[i].height) !== height)) {
  40. throw new DeveloperError('Each face in options.source must have the same width and height.');
  41. }
  42. }
  43. //>>includeEnd('debug');
  44. } else {
  45. width = options.width;
  46. height = options.height;
  47. }
  48. var size = width;
  49. var pixelFormat = defaultValue(options.pixelFormat, PixelFormat.RGBA);
  50. var pixelDatatype = defaultValue(options.pixelDatatype, PixelDatatype.UNSIGNED_BYTE);
  51. //>>includeStart('debug', pragmas.debug);
  52. if (!defined(width) || !defined(height)) {
  53. throw new DeveloperError('options requires a source field to create an initialized cube map or width and height fields to create a blank cube map.');
  54. }
  55. if (width !== height) {
  56. throw new DeveloperError('Width must equal height.');
  57. }
  58. if (size <= 0) {
  59. throw new DeveloperError('Width and height must be greater than zero.');
  60. }
  61. if (size > ContextLimits.maximumCubeMapSize) {
  62. throw new DeveloperError('Width and height must be less than or equal to the maximum cube map size (' + ContextLimits.maximumCubeMapSize + '). Check maximumCubeMapSize.');
  63. }
  64. if (!PixelFormat.validate(pixelFormat)) {
  65. throw new DeveloperError('Invalid options.pixelFormat.');
  66. }
  67. if (PixelFormat.isDepthFormat(pixelFormat)) {
  68. throw new DeveloperError('options.pixelFormat cannot be DEPTH_COMPONENT or DEPTH_STENCIL.');
  69. }
  70. if (!PixelDatatype.validate(pixelDatatype)) {
  71. throw new DeveloperError('Invalid options.pixelDatatype.');
  72. }
  73. if ((pixelDatatype === PixelDatatype.FLOAT) && !context.floatingPointTexture) {
  74. throw new DeveloperError('When options.pixelDatatype is FLOAT, this WebGL implementation must support the OES_texture_float extension.');
  75. }
  76. if ((pixelDatatype === PixelDatatype.HALF_FLOAT) && !context.halfFloatingPointTexture) {
  77. throw new DeveloperError('When options.pixelDatatype is HALF_FLOAT, this WebGL implementation must support the OES_texture_half_float extension.');
  78. }
  79. //>>includeEnd('debug');
  80. var sizeInBytes = PixelFormat.textureSizeInBytes(pixelFormat, pixelDatatype, size, size) * 6;
  81. // Use premultiplied alpha for opaque textures should perform better on Chrome:
  82. // http://media.tojicode.com/webglCamp4/#20
  83. var preMultiplyAlpha = options.preMultiplyAlpha || ((pixelFormat === PixelFormat.RGB) || (pixelFormat === PixelFormat.LUMINANCE));
  84. var flipY = defaultValue(options.flipY, true);
  85. var gl = context._gl;
  86. var textureTarget = gl.TEXTURE_CUBE_MAP;
  87. var texture = gl.createTexture();
  88. gl.activeTexture(gl.TEXTURE0);
  89. gl.bindTexture(textureTarget, texture);
  90. function createFace(target, sourceFace, preMultiplyAlpha, flipY) {
  91. var arrayBufferView = sourceFace.arrayBufferView;
  92. if (!defined(arrayBufferView)) {
  93. arrayBufferView = sourceFace.bufferView;
  94. }
  95. var unpackAlignment = 4;
  96. if (defined(arrayBufferView)) {
  97. unpackAlignment = PixelFormat.alignmentInBytes(pixelFormat, pixelDatatype, width);
  98. }
  99. gl.pixelStorei(gl.UNPACK_ALIGNMENT, unpackAlignment);
  100. if (defined(arrayBufferView)) {
  101. gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
  102. gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
  103. if (flipY) {
  104. arrayBufferView = PixelFormat.flipY(arrayBufferView, pixelFormat, pixelDatatype, size, size);
  105. }
  106. gl.texImage2D(target, 0, pixelFormat, size, size, 0, pixelFormat, pixelDatatype, arrayBufferView);
  107. } else {
  108. // Only valid for DOM-Element uploads
  109. gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, preMultiplyAlpha);
  110. gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
  111. // Source: ImageData, HTMLImageElement, HTMLCanvasElement, or HTMLVideoElement
  112. gl.texImage2D(target, 0, pixelFormat, pixelFormat, pixelDatatype, sourceFace);
  113. }
  114. }
  115. if (defined(source)) {
  116. createFace(gl.TEXTURE_CUBE_MAP_POSITIVE_X, source.positiveX, preMultiplyAlpha, flipY);
  117. createFace(gl.TEXTURE_CUBE_MAP_NEGATIVE_X, source.negativeX, preMultiplyAlpha, flipY);
  118. createFace(gl.TEXTURE_CUBE_MAP_POSITIVE_Y, source.positiveY, preMultiplyAlpha, flipY);
  119. createFace(gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, source.negativeY, preMultiplyAlpha, flipY);
  120. createFace(gl.TEXTURE_CUBE_MAP_POSITIVE_Z, source.positiveZ, preMultiplyAlpha, flipY);
  121. createFace(gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, source.negativeZ, preMultiplyAlpha, flipY);
  122. } else {
  123. gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X, 0, pixelFormat, size, size, 0, pixelFormat, pixelDatatype, null);
  124. gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_X, 0, pixelFormat, size, size, 0, pixelFormat, pixelDatatype, null);
  125. gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_Y, 0, pixelFormat, size, size, 0, pixelFormat, pixelDatatype, null);
  126. gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, 0, pixelFormat, size, size, 0, pixelFormat, pixelDatatype, null);
  127. gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_Z, 0, pixelFormat, size, size, 0, pixelFormat, pixelDatatype, null);
  128. gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, 0, pixelFormat, size, size, 0, pixelFormat, pixelDatatype, null);
  129. }
  130. gl.bindTexture(textureTarget, null);
  131. this._context = context;
  132. this._textureFilterAnisotropic = context._textureFilterAnisotropic;
  133. this._textureTarget = textureTarget;
  134. this._texture = texture;
  135. this._pixelFormat = pixelFormat;
  136. this._pixelDatatype = pixelDatatype;
  137. this._size = size;
  138. this._hasMipmap = false;
  139. this._sizeInBytes = sizeInBytes;
  140. this._preMultiplyAlpha = preMultiplyAlpha;
  141. this._flipY = flipY;
  142. this._sampler = undefined;
  143. var initialized = defined(source);
  144. this._positiveX = new CubeMapFace(gl, texture, textureTarget, gl.TEXTURE_CUBE_MAP_POSITIVE_X, pixelFormat, pixelDatatype, size, preMultiplyAlpha, flipY, initialized);
  145. this._negativeX = new CubeMapFace(gl, texture, textureTarget, gl.TEXTURE_CUBE_MAP_NEGATIVE_X, pixelFormat, pixelDatatype, size, preMultiplyAlpha, flipY, initialized);
  146. this._positiveY = new CubeMapFace(gl, texture, textureTarget, gl.TEXTURE_CUBE_MAP_POSITIVE_Y, pixelFormat, pixelDatatype, size, preMultiplyAlpha, flipY, initialized);
  147. this._negativeY = new CubeMapFace(gl, texture, textureTarget, gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, pixelFormat, pixelDatatype, size, preMultiplyAlpha, flipY, initialized);
  148. this._positiveZ = new CubeMapFace(gl, texture, textureTarget, gl.TEXTURE_CUBE_MAP_POSITIVE_Z, pixelFormat, pixelDatatype, size, preMultiplyAlpha, flipY, initialized);
  149. this._negativeZ = new CubeMapFace(gl, texture, textureTarget, gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, pixelFormat, pixelDatatype, size, preMultiplyAlpha, flipY, initialized);
  150. this.sampler = defined(options.sampler) ? options.sampler : new Sampler();
  151. }
  152. defineProperties(CubeMap.prototype, {
  153. positiveX : {
  154. get : function() {
  155. return this._positiveX;
  156. }
  157. },
  158. negativeX : {
  159. get : function() {
  160. return this._negativeX;
  161. }
  162. },
  163. positiveY : {
  164. get : function() {
  165. return this._positiveY;
  166. }
  167. },
  168. negativeY : {
  169. get : function() {
  170. return this._negativeY;
  171. }
  172. },
  173. positiveZ : {
  174. get : function() {
  175. return this._positiveZ;
  176. }
  177. },
  178. negativeZ : {
  179. get : function() {
  180. return this._negativeZ;
  181. }
  182. },
  183. sampler : {
  184. get : function() {
  185. return this._sampler;
  186. },
  187. set : function(sampler) {
  188. var minificationFilter = sampler.minificationFilter;
  189. var magnificationFilter = sampler.magnificationFilter;
  190. var mipmap =
  191. (minificationFilter === TextureMinificationFilter.NEAREST_MIPMAP_NEAREST) ||
  192. (minificationFilter === TextureMinificationFilter.NEAREST_MIPMAP_LINEAR) ||
  193. (minificationFilter === TextureMinificationFilter.LINEAR_MIPMAP_NEAREST) ||
  194. (minificationFilter === TextureMinificationFilter.LINEAR_MIPMAP_LINEAR);
  195. var context = this._context;
  196. var pixelDatatype = this._pixelDatatype;
  197. // float textures only support nearest filtering unless the linear extensions are supported, so override the sampler's settings
  198. if ((pixelDatatype === PixelDatatype.FLOAT && !context.textureFloatLinear) || (pixelDatatype === PixelDatatype.HALF_FLOAT && !context.textureHalfFloatLinear)) {
  199. minificationFilter = mipmap ? TextureMinificationFilter.NEAREST_MIPMAP_NEAREST : TextureMinificationFilter.NEAREST;
  200. magnificationFilter = TextureMagnificationFilter.NEAREST;
  201. }
  202. var gl = context._gl;
  203. var target = this._textureTarget;
  204. gl.activeTexture(gl.TEXTURE0);
  205. gl.bindTexture(target, this._texture);
  206. gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, minificationFilter);
  207. gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, magnificationFilter);
  208. gl.texParameteri(target, gl.TEXTURE_WRAP_S, sampler.wrapS);
  209. gl.texParameteri(target, gl.TEXTURE_WRAP_T, sampler.wrapT);
  210. if (defined(this._textureFilterAnisotropic)) {
  211. gl.texParameteri(target, this._textureFilterAnisotropic.TEXTURE_MAX_ANISOTROPY_EXT, sampler.maximumAnisotropy);
  212. }
  213. gl.bindTexture(target, null);
  214. this._sampler = sampler;
  215. }
  216. },
  217. pixelFormat: {
  218. get : function() {
  219. return this._pixelFormat;
  220. }
  221. },
  222. pixelDatatype : {
  223. get : function() {
  224. return this._pixelDatatype;
  225. }
  226. },
  227. width : {
  228. get : function() {
  229. return this._size;
  230. }
  231. },
  232. height : {
  233. get : function() {
  234. return this._size;
  235. }
  236. },
  237. sizeInBytes : {
  238. get : function() {
  239. if (this._hasMipmap) {
  240. return Math.floor(this._sizeInBytes * 4 / 3);
  241. }
  242. return this._sizeInBytes;
  243. }
  244. },
  245. preMultiplyAlpha : {
  246. get : function() {
  247. return this._preMultiplyAlpha;
  248. }
  249. },
  250. flipY : {
  251. get : function() {
  252. return this._flipY;
  253. }
  254. },
  255. _target : {
  256. get : function() {
  257. return this._textureTarget;
  258. }
  259. }
  260. });
  261. /**
  262. * Generates a complete mipmap chain for each cubemap face.
  263. *
  264. * @param {MipmapHint} [hint=MipmapHint.DONT_CARE] A performance vs. quality hint.
  265. *
  266. * @exception {DeveloperError} hint is invalid.
  267. * @exception {DeveloperError} This CubeMap's width must be a power of two to call generateMipmap().
  268. * @exception {DeveloperError} This CubeMap's height must be a power of two to call generateMipmap().
  269. * @exception {DeveloperError} This CubeMap was destroyed, i.e., destroy() was called.
  270. *
  271. * @example
  272. * // Generate mipmaps, and then set the sampler so mipmaps are used for
  273. * // minification when the cube map is sampled.
  274. * cubeMap.generateMipmap();
  275. * cubeMap.sampler = new Sampler({
  276. * minificationFilter : Cesium.TextureMinificationFilter.NEAREST_MIPMAP_LINEAR
  277. * });
  278. */
  279. CubeMap.prototype.generateMipmap = function(hint) {
  280. hint = defaultValue(hint, MipmapHint.DONT_CARE);
  281. //>>includeStart('debug', pragmas.debug);
  282. if ((this._size > 1) && !CesiumMath.isPowerOfTwo(this._size)) {
  283. throw new DeveloperError('width and height must be a power of two to call generateMipmap().');
  284. }
  285. if (!MipmapHint.validate(hint)) {
  286. throw new DeveloperError('hint is invalid.');
  287. }
  288. //>>includeEnd('debug');
  289. this._hasMipmap = true;
  290. var gl = this._context._gl;
  291. var target = this._textureTarget;
  292. gl.hint(gl.GENERATE_MIPMAP_HINT, hint);
  293. gl.activeTexture(gl.TEXTURE0);
  294. gl.bindTexture(target, this._texture);
  295. gl.generateMipmap(target);
  296. gl.bindTexture(target, null);
  297. };
  298. CubeMap.prototype.isDestroyed = function() {
  299. return false;
  300. };
  301. CubeMap.prototype.destroy = function() {
  302. this._context._gl.deleteTexture(this._texture);
  303. this._positiveX = destroyObject(this._positiveX);
  304. this._negativeX = destroyObject(this._negativeX);
  305. this._positiveY = destroyObject(this._positiveY);
  306. this._negativeY = destroyObject(this._negativeY);
  307. this._positiveZ = destroyObject(this._positiveZ);
  308. this._negativeZ = destroyObject(this._negativeZ);
  309. return destroyObject(this);
  310. };
  311. export default CubeMap;