Home Reference Source

cables_dev/cables/src/core/cgl/cgl_texture.js

  1. import { Logger } from "cables-shared-client";
  2. import { uuid } from "../utils.js";
  3. import CgTexture from "../cg/cg_texture.js";
  4.  
  5. const DEFAULT_TEXTURE_SIZE = 8;
  6.  
  7. /**
  8.  * A Texture
  9.  * @namespace external:CGL
  10.  * @class
  11.  * @param {Context} __cgl cgl
  12.  * @param {Object} options
  13.  * @hideconstructor
  14.  * @example
  15.  * // generate a 256x256 pixel texture of random colors
  16.  * const size=256;
  17.  * const data = new Uint8Array(size*size*4);
  18.  *
  19.  * for(var x=0;x<size*size*4;x++) data[ x*4+3]=255;
  20.  *
  21.  * const tex=new CGL.Texture(cgl);
  22.  * tex.initFromData(data,size,size,CGL.Texture.FILTER_NEAREST,CGL.Texture.WRAP_REPEAT);
  23.  */
  24. class Texture extends CgTexture
  25. {
  26.     constructor(__cgl, options = {})
  27.     {
  28.         super(options);
  29.         if (!__cgl) throw new Error("no cgl");
  30.         this._log = new Logger("cgl_texture");
  31.         this._cgl = __cgl;
  32.         this.tex = this._cgl.gl.createTexture();
  33.         this.loading = false;
  34.         this.flip = true;
  35.         this.flipped = false;
  36.         this.shadowMap = false;
  37.         this.deleted = false;
  38.         this.image = null;
  39.         this.anisotropic = 0;
  40.         this.filter = Texture.FILTER_NEAREST;
  41.         this.wrap = Texture.WRAP_CLAMP_TO_EDGE;
  42.         this.texTarget = this._cgl.gl.TEXTURE_2D;
  43.         if (options && options.type) this.texTarget = options.type;
  44.         this.textureType = Texture.TYPE_DEFAULT;
  45.         this.unpackAlpha = true;
  46.         this._fromData = true;
  47.  
  48.         this._glDataType = -1;
  49.         this._glInternalFormat = -1;
  50.         this._glDataFormat = -1;
  51.  
  52.  
  53.         if (options)
  54.         {
  55.             if (options.isDepthTexture) this.textureType = Texture.TYPE_DEPTH;
  56.             if (options.isFloatingPointTexture === true) this.textureType = Texture.TYPE_FLOAT;
  57.  
  58.             if ("textureType" in options) this.textureType = options.textureType;
  59.             if ("filter" in options) this.filter = options.filter;
  60.             if ("wrap" in options) this.wrap = options.wrap;
  61.             if ("unpackAlpha" in options) this.unpackAlpha = options.unpackAlpha;
  62.             if ("flip" in options) this.flip = options.flip;
  63.             if ("shadowMap" in options) this.shadowMap = options.shadowMap;
  64.             if ("anisotropic" in options) this.anisotropic = options.anisotropic;
  65.         }
  66.         else
  67.         {
  68.             options = {};
  69.         }
  70.  
  71.         if (!options.pixelFormat && options.isFloatingPointTexture) this.pixelFormat = Texture.PFORMATSTR_RGBA32F;
  72.  
  73.         if (this.textureType == Texture.TYPE_DEPTH) this.pixelFormat = Texture.PFORMATSTR_DEPTH;
  74.  
  75.         this._cgl.profileData.profileTextureNew++;
  76.  
  77.  
  78.         this.setFormat(Texture.setUpGlPixelFormat(this._cgl, this.pixelFormat));
  79.         this._cgl.profileData.addHeavyEvent("texture created", this.name, options.width + "x" + options.height);
  80.  
  81.         this.setSize(options.width, options.height);
  82.         this.getInfoOneLine();
  83.     }
  84.  
  85.  
  86.  
  87.     isFloatingPoint()
  88.     {
  89.         return Texture.isPixelFormatFloat(this.pixelFormat);
  90.     }
  91.  
  92.     /**
  93.      * returns true if otherTexture has same options (width/height/filter/wrap etc)
  94.      * @function compareSettings
  95.      * @memberof Texture
  96.      * @instance
  97.      * @param {Texture} tex otherTexture
  98.      * @returns {Boolean}
  99.      */
  100.     compareSettings(tex)
  101.     {
  102.     // if (!tex) { this._log.warn("compare: no tex"); return false; }
  103.     // if (tex.width != this.width) this._log.warn("tex.width not equal", tex.width, this.width);
  104.     // if (tex.height != this.height) this._log.warn("tex.height not equal", tex.height, this.height);
  105.     // if (tex.filter != this.filter) this._log.warn("tex.filter not equal");
  106.     // if (tex.wrap != this.wrap) this._log.warn("tex.wrap not equal");
  107.     // if (tex.textureType != this.textureType) this._log.warn("tex.textureType not equal");
  108.     // if (tex.unpackAlpha != this.unpackAlpha) this._log.warn("tex.unpackAlpha not equal");
  109.     // if (tex.anisotropic != this.anisotropic) this._log.warn("tex.anisotropic not equal");
  110.     // if (tex.shadowMap != this.shadowMap) this._log.warn("tex.shadowMap not equal");
  111.     // if (tex.texTarget != this.texTarget) this._log.warn("tex.texTarget not equal");
  112.     // if (tex.flip != this.flip) this._log.warn("tex.flip not equal");
  113.  
  114.         if (!tex) return false;
  115.         return (
  116.             tex.width == this.width &&
  117.             tex.height == this.height &&
  118.             tex.filter == this.filter &&
  119.             tex.wrap == this.wrap &&
  120.             tex.textureType == this.textureType &&
  121.             tex.unpackAlpha == this.unpackAlpha &&
  122.             tex.anisotropic == this.anisotropic &&
  123.             tex.shadowMap == this.shadowMap &&
  124.             tex.texTarget == this.texTarget &&
  125.             tex.flip == this.flip
  126.         );
  127.     }
  128.  
  129.     /**
  130.      * returns a new texture with the same settings (does not copy texture itself)
  131.      * @function clone
  132.      * @memberof Texture
  133.      * @instance
  134.      * @returns {Texture}
  135.      */
  136.     clone()
  137.     {
  138.         const newTex = new Texture(this._cgl, {
  139.             "name": this.name,
  140.             "filter": this.filter,
  141.             "anisotropic": this.anisotropic,
  142.             "wrap": this.wrap,
  143.             "textureType": this.textureType,
  144.             "pixelFormat": this.pixelFormat,
  145.             "unpackAlpha": this.unpackAlpha,
  146.             "flip": this.flip,
  147.             "width": this.width,
  148.             "height": this.height,
  149.         });
  150.  
  151.         this._cgl.profileData.addHeavyEvent("texture created", this.name, this.width + "x" + this.height);
  152.  
  153.         if (!this.compareSettings(newTex))
  154.         {
  155.             this._log.error("Cloned texture settings do not compare!");
  156.             this._log.error(this);
  157.             this._log.error(newTex);
  158.         }
  159.  
  160.         return newTex;
  161.     }
  162.  
  163.  
  164.     setFormat(o)
  165.     {
  166.         this.pixelFormat = o.pixelFormat;
  167.         this._glDataFormat = o.glDataFormat;
  168.         this._glInternalFormat = o.glInternalFormat;
  169.         this._glDataType = o.glDataType;
  170.     }
  171.  
  172.  
  173.  
  174.     /**
  175.      * set pixel size of texture
  176.      * @function setSize
  177.      * @memberof Texture
  178.      * @instance
  179.      * @param {Number} w width
  180.      * @param {Number} h height
  181.      */
  182.     setSize(w, h)
  183.     {
  184.         if (this._cgl.aborted) return;
  185.         if (w != w || w <= 0 || !w) w = DEFAULT_TEXTURE_SIZE;
  186.         if (h != h || h <= 0 || !h) h = DEFAULT_TEXTURE_SIZE;
  187.  
  188.         if (w > this._cgl.maxTexSize || h > this._cgl.maxTexSize) this._log.error("texture size too big! " + w + "x" + h + " / max: " + this._cgl.maxTexSize);
  189.  
  190.         w = Math.min(w, this._cgl.maxTexSize);
  191.         h = Math.min(h, this._cgl.maxTexSize);
  192.  
  193.         w = Math.floor(w);
  194.         h = Math.floor(h);
  195.         if (this.width == w && this.height == h) return;
  196.  
  197.         w = this._cgl.checkTextureSize(w);
  198.         h = this._cgl.checkTextureSize(h);
  199.  
  200.         this.width = w;
  201.         this.height = h;
  202.         this.deleted = false;
  203.  
  204.         this.setFormat(Texture.setUpGlPixelFormat(this._cgl, this.pixelFormat));
  205.  
  206.         this.shortInfoString = this.getInfoOneLine();// w + "x" + h + "";
  207.  
  208.         this._cgl.gl.bindTexture(this.texTarget, this.tex);
  209.         this._cgl.profileData.profileTextureResize++;
  210.  
  211.         const uarr = null;
  212.  
  213.         this._cgl.gl.texImage2D(this.texTarget, 0, this._glInternalFormat, w, h, 0, this._glDataFormat, this._glDataType, uarr);
  214.  
  215.         this._setFilter();
  216.  
  217.         this.updateMipMap();
  218.  
  219.         this._cgl.gl.bindTexture(this.texTarget, null);
  220.     }
  221.  
  222.  
  223.     /**
  224.      * @function initFromData
  225.      * @memberof Texture
  226.      * @instance
  227.      * @description create texturem from rgb data
  228.      * @param {Array<Number>} data rgb color array [r,g,b,a,r,g,b,a,...]
  229.      * @param {Number} w width
  230.      * @param {Number} h height
  231.      * @param {Number} filter
  232.      * @param {Number} wrap
  233.      */
  234.     initFromData(data, w, h, filter, wrap)
  235.     {
  236.         this.filter = filter;
  237.         this.wrap = wrap;
  238.         if (filter == undefined) this.filter = Texture.FILTER_LINEAR;
  239.         if (wrap == undefined) this.wrap = Texture.WRAP_CLAMP_TO_EDGE;
  240.         this.width = w;
  241.         this.height = h;
  242.         this._fromData = true;
  243.         this.deleted = false;
  244.  
  245.         if (this.height > this._cgl.maxTexSize || this.width > this._cgl.maxTexSize)
  246.         {
  247.             const t = CGL.Texture.getTempTexture(this._cgl);
  248.             this.width = t.width;
  249.             this.height = t.height;
  250.             this.tex = t.tex;
  251.             this._log.warn("[cgl_texture] texture size too big!", this.width, this.height, this._cgl.maxTexSize);
  252.             return;
  253.         }
  254.  
  255.         if (this.flip) this._cgl.gl.pixelStorei(this._cgl.gl.UNPACK_FLIP_Y_WEBGL, this.flip);
  256.  
  257.         this._cgl.gl.bindTexture(this.texTarget, this.tex);
  258.  
  259.         this.setFormat(Texture.setUpGlPixelFormat(this._cgl, this.pixelFormat));
  260.  
  261.         this._cgl.gl.texImage2D(this.texTarget, 0, this._glInternalFormat, w, h, 0, this._glDataFormat, this._glDataType, data);
  262.  
  263.         this._setFilter();
  264.         this.updateMipMap();
  265.  
  266.         if (this.flip) this._cgl.gl.pixelStorei(this._cgl.gl.UNPACK_FLIP_Y_WEBGL, false);
  267.         this._cgl.gl.bindTexture(this.texTarget, null);
  268.     }
  269.  
  270.     updateMipMap()
  271.     {
  272.         if ((this._cgl.glVersion == 2 || this.isPowerOfTwo()) && this.filter == Texture.FILTER_MIPMAP)
  273.         {
  274.             this._cgl.gl.generateMipmap(this.texTarget);
  275.             this._cgl.profileData.profileGenMipMap++;
  276.         }
  277.     }
  278.  
  279.     /**
  280.      * set texture data from an image/canvas object
  281.      * @function initTexture
  282.      * @memberof Texture
  283.      * @instance
  284.      * @param {Object} img image
  285.      * @param {Number} filter
  286.      */
  287.     initTexture(img, filter)
  288.     {
  289.         this._cgl.printError("before initTexture");
  290.         this._cgl.checkFrameStarted("texture inittexture");
  291.         this._fromData = false;
  292.  
  293.         this._cgl.gl.pixelStorei(this._cgl.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.unpackAlpha);
  294.         if (img.width || img.videoWidth) this.width = img.videoWidth || img.width;
  295.         if (img.height || img.videoHeight) this.height = img.videoHeight || img.height;
  296.  
  297.         if (filter !== undefined) this.filter = filter; // todo: can we remove this filter param?
  298.  
  299.         if (img.height > this._cgl.maxTexSize || img.width > this._cgl.maxTexSize)
  300.         {
  301.             const t = CGL.Texture.getTempTexture(this._cgl);
  302.             this.width = t.width;
  303.             this.height = t.height;
  304.             this.tex = t.tex;
  305.             this._log.warn("[cgl_texture] texture size too big!", img.width, img.height, this._cgl.maxTexSize);
  306.             return;
  307.         }
  308.  
  309.         this._cgl.gl.bindTexture(this.texTarget, this.tex);
  310.  
  311.         this.deleted = false;
  312.         this.flipped = !this.flip;
  313.         if (this.flipped) this._cgl.gl.pixelStorei(this._cgl.gl.UNPACK_FLIP_Y_WEBGL, this.flipped);
  314.  
  315.  
  316.         this.setFormat(Texture.setUpGlPixelFormat(this._cgl, this.pixelFormat));
  317.  
  318.         this._cgl.gl.texImage2D(this.texTarget, 0, this._glInternalFormat, this._glDataFormat, this._glDataType, img);
  319.  
  320.         this._setFilter();
  321.         this.updateMipMap();
  322.  
  323.         this._cgl.gl.bindTexture(this.texTarget, null);
  324.         this._cgl.gl.pixelStorei(this._cgl.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
  325.         if (this.flipped) this._cgl.gl.pixelStorei(this._cgl.gl.UNPACK_FLIP_Y_WEBGL, false);
  326.  
  327.         this.getInfoOneLine();
  328.         this._cgl.printError("initTexture");
  329.     }
  330.  
  331.     /**
  332.      * delete texture. use this when texture is no longer needed
  333.      * @function delete
  334.      * @memberof Texture
  335.      * @instance
  336.      */
  337.     dispose()
  338.     {
  339.         this.delete();
  340.     }
  341.  
  342.     delete()
  343.     {
  344.         if (this.loading)
  345.         {
  346.         // cant delete texture when still loading
  347.         // setTimeout(this.delete.bind(this), 50);
  348.             return;
  349.         }
  350.  
  351.         this.deleted = true;
  352.         this.width = 0;
  353.         this.height = 0;
  354.         this._cgl.profileData.profileTextureDelete++;
  355.         this._cgl.gl.deleteTexture(this.tex);
  356.         this.image = null;
  357.  
  358.         this.tex = null;
  359.     }
  360.  
  361.     /**
  362.      * @function isPowerOfTwo
  363.      * @memberof Texture
  364.      * @instance
  365.      * @description return true if texture width and height are both power of two
  366.      * @return {Boolean}
  367.      */
  368.     isPowerOfTwo()
  369.     {
  370.         return Texture.isPowerOfTwo(this.width) && Texture.isPowerOfTwo(this.height);
  371.     }
  372.  
  373.     printInfo()
  374.     {
  375.         console.log(this.getInfo());
  376.     }
  377.  
  378.     getInfoReadable()
  379.     {
  380.         const info = this.getInfo();
  381.         let html = "";
  382.  
  383.         info.name = info.name.substr(0, info.name.indexOf("?rnd="));
  384.  
  385.         for (const i in info)
  386.         {
  387.             html += "* " + i + ":  **" + info[i] + "**\n";
  388.         }
  389.  
  390.         return html;
  391.     }
  392.  
  393.     getInfoOneLine()
  394.     {
  395.         let txt = "" + this.width + "x" + this.height;
  396.         txt += " ";
  397.         // if (this.textureType === CGL.Texture.TYPE_FLOAT) txt += " 32bit"; else txt += " 8bit";
  398.         // if (this.textureType === CGL.Texture.TYPE_FLOAT) txt += " 32bit"; else txt += " 8bit";
  399.         txt += this.pixelFormat;
  400.  
  401.         if (this.filter === CGL.Texture.FILTER_NEAREST) txt += " nearest";
  402.         if (this.filter === CGL.Texture.FILTER_LINEAR) txt += " linear";
  403.         if (this.filter === CGL.Texture.FILTER_MIPMAP) txt += " mipmap";
  404.  
  405.         if (this.wrap === CGL.Texture.WRAP_CLAMP_TO_EDGE) txt += " clamp";
  406.         if (this.wrap === CGL.Texture.WRAP_REPEAT) txt += " repeat";
  407.         if (this.wrap === CGL.Texture.WRAP_MIRRORED_REPEAT) txt += " repeatmir";
  408.  
  409.         this.shortInfoString = txt;
  410.  
  411.         return txt;
  412.     }
  413.  
  414.     getInfoOneLineShort()
  415.     {
  416.         let txt = "" + this.width + "x" + this.height;
  417.         // if (this.textureType === CGL.Texture.TYPE_FLOAT) txt += " 32bit"; else txt += " 8bit";
  418.         txt += " ";
  419.         txt += this.pixelFormat;
  420.  
  421.         this.shortInfoString = txt;
  422.  
  423.         return txt;
  424.     }
  425.  
  426.  
  427.     getInfo()
  428.     {
  429.         return Texture.getTexInfo(this);
  430.     }
  431.  
  432.  
  433.     _setFilter()
  434.     {
  435.         this._cgl.printError("before _setFilter");
  436.  
  437.         if (!this._fromData)
  438.         {
  439.             this._cgl.gl.pixelStorei(this._cgl.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.unpackAlpha);
  440.         }
  441.  
  442.         if (this.shadowMap)
  443.         {
  444.             this._cgl.gl.texParameteri(this._cgl.gl.TEXTURE_2D, this._cgl.gl.TEXTURE_COMPARE_MODE, this._cgl.gl.COMPARE_REF_TO_TEXTURE);
  445.             this._cgl.gl.texParameteri(this._cgl.gl.TEXTURE_2D, this._cgl.gl.TEXTURE_COMPARE_FUNC, this._cgl.gl.LEQUAL);
  446.         }
  447.  
  448.         if (this.textureType == Texture.TYPE_FLOAT && this.filter == Texture.FILTER_MIPMAP)
  449.         {
  450.             this.filter = Texture.FILTER_LINEAR;
  451.             this._log.stack("texture: HDR and mipmap filtering at the same time is not possible");
  452.         }
  453.  
  454.         if (this._cgl.glVersion == 1 && !this.isPowerOfTwo())
  455.         {
  456.             this._cgl.gl.texParameteri(this.texTarget, this._cgl.gl.TEXTURE_MAG_FILTER, this._cgl.gl.NEAREST);
  457.             this._cgl.gl.texParameteri(this.texTarget, this._cgl.gl.TEXTURE_MIN_FILTER, this._cgl.gl.NEAREST);
  458.  
  459.             this._cgl.gl.texParameteri(this.texTarget, this._cgl.gl.TEXTURE_WRAP_S, this._cgl.gl.CLAMP_TO_EDGE);
  460.             this._cgl.gl.texParameteri(this.texTarget, this._cgl.gl.TEXTURE_WRAP_T, this._cgl.gl.CLAMP_TO_EDGE);
  461.  
  462.             this.filter = Texture.FILTER_NEAREST;
  463.             this.wrap = Texture.WRAP_CLAMP_TO_EDGE;
  464.         }
  465.         else
  466.         {
  467.             if (this.wrap == Texture.WRAP_CLAMP_TO_EDGE)
  468.             {
  469.                 this._cgl.gl.texParameteri(this.texTarget, this._cgl.gl.TEXTURE_WRAP_S, this._cgl.gl.CLAMP_TO_EDGE);
  470.                 this._cgl.gl.texParameteri(this.texTarget, this._cgl.gl.TEXTURE_WRAP_T, this._cgl.gl.CLAMP_TO_EDGE);
  471.             }
  472.             else if (this.wrap == Texture.WRAP_REPEAT)
  473.             {
  474.                 this._cgl.gl.texParameteri(this.texTarget, this._cgl.gl.TEXTURE_WRAP_S, this._cgl.gl.REPEAT);
  475.                 this._cgl.gl.texParameteri(this.texTarget, this._cgl.gl.TEXTURE_WRAP_T, this._cgl.gl.REPEAT);
  476.             }
  477.             else if (this.wrap == Texture.WRAP_MIRRORED_REPEAT)
  478.             {
  479.                 this._cgl.gl.texParameteri(this.texTarget, this._cgl.gl.TEXTURE_WRAP_S, this._cgl.gl.MIRRORED_REPEAT);
  480.                 this._cgl.gl.texParameteri(this.texTarget, this._cgl.gl.TEXTURE_WRAP_T, this._cgl.gl.MIRRORED_REPEAT);
  481.             }
  482.  
  483.             if (this.filter == Texture.FILTER_NEAREST)
  484.             {
  485.                 this._cgl.gl.texParameteri(this.texTarget, this._cgl.gl.TEXTURE_MAG_FILTER, this._cgl.gl.NEAREST);
  486.                 this._cgl.gl.texParameteri(this.texTarget, this._cgl.gl.TEXTURE_MIN_FILTER, this._cgl.gl.NEAREST);
  487.             }
  488.             else if (this.filter == Texture.FILTER_LINEAR)
  489.             {
  490.                 this._cgl.gl.texParameteri(this.texTarget, this._cgl.gl.TEXTURE_MIN_FILTER, this._cgl.gl.LINEAR);
  491.                 this._cgl.gl.texParameteri(this.texTarget, this._cgl.gl.TEXTURE_MAG_FILTER, this._cgl.gl.LINEAR);
  492.             }
  493.             else if (this.filter == Texture.FILTER_MIPMAP)
  494.             {
  495.                 this._cgl.gl.texParameteri(this.texTarget, this._cgl.gl.TEXTURE_MAG_FILTER, this._cgl.gl.LINEAR);
  496.                 this._cgl.gl.texParameteri(this.texTarget, this._cgl.gl.TEXTURE_MIN_FILTER, this._cgl.gl.LINEAR_MIPMAP_LINEAR);
  497.             }
  498.             else
  499.             {
  500.                 this._log.log("unknown texture filter!", this.filter);
  501.                 throw new Error("unknown texture filter!" + this.filter);
  502.             }
  503.  
  504.             if (this.anisotropic)
  505.             {
  506.                 const ext = this._cgl.enableExtension("EXT_texture_filter_anisotropic");
  507.  
  508.  
  509.  
  510.                 if (this._cgl.maxAnisotropic)
  511.                 {
  512.                     const aniso = Math.min(this._cgl.maxAnisotropic, this.anisotropic);
  513.                     this._cgl.gl.texParameterf(this._cgl.gl.TEXTURE_2D, ext.TEXTURE_MAX_ANISOTROPY_EXT, aniso);
  514.                 }
  515.             }
  516.         }
  517.         this.getInfoOneLine();
  518.         this._cgl.printError("_setFilter");
  519.     }
  520. }
  521.  
  522.  
  523.  
  524.  
  525.  
  526.  
  527.  
  528.  
  529.  
  530.  
  531.  
  532.  
  533.  
  534.  
  535.  
  536.  
  537.  
  538.  
  539.  
  540.  
  541.  
  542.  
  543.  
  544.  
  545.  
  546.  
  547. /**
  548.  * @function load
  549.  * @static
  550.  * @memberof Texture
  551.  * @description load an image from an url
  552.  * @param {Context} cgl
  553.  * @param {String} url
  554.  * @param {Function} finishedCallback
  555.  * @param {Object} settings
  556.  * @return {Texture}
  557.  */
  558. Texture.load = function (cgl, url, finishedCallback, settings)
  559. {
  560.     if (!url) return finishedCallback({ "error": true });
  561.     let loadingId = null;
  562.     if (!cgl.patch.loading.existByName(url)) loadingId = cgl.patch.loading.start("cgl.texture", url);
  563.  
  564.     const texture = new Texture(cgl);
  565.     texture.name = url;
  566.  
  567.     texture.image = new Image();
  568.     texture.image.crossOrigin = "anonymous";
  569.     texture.loading = true;
  570.  
  571.     if (settings && settings.hasOwnProperty("filter")) texture.filter = settings.filter;
  572.     if (settings && settings.hasOwnProperty("flip")) texture.flip = settings.flip;
  573.     if (settings && settings.hasOwnProperty("wrap")) texture.wrap = settings.wrap;
  574.     if (settings && settings.hasOwnProperty("anisotropic")) texture.anisotropic = settings.anisotropic;
  575.     if (settings && settings.hasOwnProperty("unpackAlpha")) texture.unpackAlpha = settings.unpackAlpha;
  576.     if (settings && settings.hasOwnProperty("pixelFormat")) texture.pixelFormat = settings.pixelFormat;
  577.  
  578.     texture.image.onabort = texture.image.onerror = (e) =>
  579.     {
  580.         console.warn("[cgl.texture.load] error loading texture", url, e);
  581.         texture.loading = false;
  582.         if (loadingId) cgl.patch.loading.finished(loadingId);
  583.         const error = { "error": true };
  584.         if (finishedCallback) finishedCallback(error, texture);
  585.     };
  586.  
  587.     texture.image.onload = function (e)
  588.     {
  589.         cgl.addNextFrameOnceCallback(() =>
  590.         {
  591.             texture.initTexture(texture.image);
  592.             if (loadingId) cgl.patch.loading.finished(loadingId);
  593.             texture.loading = false;
  594.  
  595.             if (finishedCallback) finishedCallback(null, texture);
  596.         });
  597.     };
  598.     texture.image.src = url;
  599.  
  600.     return texture;
  601. };
  602.  
  603.  
  604.  
  605.  
  606.  
  607.  
  608. /**
  609.  * @static
  610.  * @function getTempTexture
  611.  * @memberof Texture
  612.  * @description returns the default temporary texture (grey diagonal stipes)
  613.  * @param {Context} cgl
  614.  * @return {Texture}
  615.  */
  616. Texture.getTempTexture = function (cgl)
  617. {
  618.     if (!cgl) console.error("[getTempTexture] no cgl!");
  619.     if (!cgl.tempTexture) cgl.tempTexture = Texture.getTemporaryTexture(cgl, 256, Texture.FILTER_LINEAR, Texture.REPEAT);
  620.     return cgl.tempTexture;
  621. };
  622.  
  623. /**
  624.  * @static
  625.  * @function getErrorTexture
  626.  * @memberof Texture
  627.  * @description returns the default temporary texture (grey diagonal stipes)
  628.  * @param {Context} cgl
  629.  * @return {Texture}
  630.  */
  631. Texture.getErrorTexture = function (cgl)
  632. {
  633.     if (!cgl) console.error("[getTempTexture] no cgl!");
  634.     if (!cgl.errorTexture) cgl.errorTexture = Texture.getTemporaryTexture(cgl, 256, Texture.FILTER_LINEAR, Texture.REPEAT, 1, 0.2, 0.2);
  635.     return cgl.errorTexture;
  636. };
  637.  
  638.  
  639. /**
  640.  * @function getEmptyTexture
  641.  * @memberof Texture
  642.  * @instance
  643.  * @param cgl
  644.  * @param fp
  645.  * @description returns a reference to a small empty (transparent) texture
  646.  * @return {Texture}
  647.  */
  648. Texture.getEmptyTexture = function (cgl, fp)
  649. {
  650.     if (fp) return Texture.getEmptyTextureFloat(cgl);
  651.     if (!cgl) console.error("[getEmptyTexture] no cgl!");
  652.     if (cgl.tempTextureEmpty) return cgl.tempTextureEmpty;
  653.  
  654.     let size = 8;
  655.  
  656.     cgl.tempTextureEmpty = new Texture(cgl, { "name": "emptyTexture" });
  657.     const data = Texture.getDefaultTextureData("empty", size);
  658.  
  659.     cgl.tempTextureEmpty.initFromData(data, size, size, Texture.FILTER_NEAREST, Texture.WRAP_REPEAT);
  660.  
  661.     return cgl.tempTextureEmpty;
  662. };
  663.  
  664. /**
  665.  * @function getEmptyTextureFloat
  666.  * @memberof Texture
  667.  * @instance
  668.  * @param cgl
  669.  * @description returns a reference to a small empty (transparent) 32bit texture
  670.  * @return {Texture}
  671.  */
  672. Texture.getEmptyTextureFloat = function (cgl)
  673. {
  674.     if (!cgl) console.error("[getEmptyTextureFloat] no cgl!");
  675.     if (cgl.tempTextureEmptyFloat) return cgl.tempTextureEmptyFloat;
  676.  
  677.     cgl.tempTextureEmptyFloat = new Texture(cgl, { "name": "emptyTexture", "isFloatingPointTexture": true });
  678.     const data = new Float32Array(8 * 8 * 4).fill(1);
  679.     for (let i = 0; i < 8 * 8 * 4; i += 4) data[i + 3] = 0;
  680.  
  681.     cgl.tempTextureEmptyFloat.initFromData(data, 8, 8, Texture.FILTER_NEAREST, Texture.WRAP_REPEAT);
  682.  
  683.     return cgl.tempTextureEmptyFloat;
  684. };
  685.  
  686.  
  687. /**
  688.  * @function getRandomTexture
  689.  * @memberof Texture
  690.  * @static
  691.  * @param cgl
  692.  * @description returns a reference to a random texture
  693.  * @return {Texture}
  694.  */
  695. Texture.getRandomTexture = function (cgl)
  696. {
  697.     if (!cgl) console.error("[getRandomTexture] no cgl!");
  698.     if (cgl.randomTexture) return cgl.randomTexture;
  699.  
  700.     const size = 256;
  701.     const data = Texture.getDefaultTextureData("randomUInt", size);
  702.  
  703.     cgl.randomTexture = new Texture(cgl);
  704.     cgl.randomTexture.initFromData(data, size, size, Texture.FILTER_NEAREST, Texture.WRAP_REPEAT);
  705.  
  706.     return cgl.randomTexture;
  707. };
  708.  
  709. /**
  710.  * @function getRandomFloatTexture
  711.  * @memberof Texture
  712.  * @static
  713.  * @param cgl
  714.  * @description returns a reference to a texture containing random numbers between -1 and 1
  715.  * @return {Texture}
  716.  */
  717. Texture.getRandomFloatTexture = function (cgl)
  718. {
  719.     if (!cgl) console.error("[getRandomTexture] no cgl!");
  720.     if (cgl.getRandomFloatTexture) return cgl.getRandomFloatTexture;
  721.  
  722.     const size = 256;
  723.     const data = Texture.getDefaultTextureData("randomFloat", size);
  724.  
  725.     cgl.getRandomFloatTexture = new Texture(cgl, { "isFloatingPointTexture": true });
  726.     cgl.getRandomFloatTexture.initFromData(data, size, size, Texture.FILTER_NEAREST, Texture.WRAP_REPEAT);
  727.  
  728.     return cgl.getRandomFloatTexture;
  729. };
  730.  
  731. /**
  732.  * @function getBlackTexture
  733.  * @memberof Texture
  734.  * @static
  735.  * @param cgl
  736.  * @description returns a reference to a black texture
  737.  * @return {Texture}
  738.  */
  739. Texture.getBlackTexture = function (cgl)
  740. {
  741.     if (!cgl) this._log.error("[getBlackTexture] no cgl!");
  742.     if (cgl.blackTexture) return cgl.blackTexture;
  743.  
  744.     const size = 8;
  745.     const data = Texture.getDefaultTextureData("color", size, { "r": 0, "g": 0, "b": 0 });
  746.  
  747.     cgl.blackTexture = new Texture(cgl);
  748.     cgl.blackTexture.initFromData(data, size, size, Texture.FILTER_NEAREST, Texture.WRAP_REPEAT);
  749.  
  750.     return cgl.blackTexture;
  751. };
  752.  
  753.  
  754. /**
  755.  * @function getEmptyCubemapTexture
  756.  * @memberof Texture
  757.  * @static
  758.  * @param cgl
  759.  * @description returns an empty cubemap texture with rgba = [0, 0, 0, 0]
  760.  * @return {Texture}
  761.  */
  762. Texture.getEmptyCubemapTexture = function (cgl)
  763. {
  764.     const faces = [
  765.         cgl.gl.TEXTURE_CUBE_MAP_POSITIVE_X,
  766.         cgl.gl.TEXTURE_CUBE_MAP_NEGATIVE_X,
  767.         cgl.gl.TEXTURE_CUBE_MAP_POSITIVE_Y,
  768.         cgl.gl.TEXTURE_CUBE_MAP_NEGATIVE_Y,
  769.         cgl.gl.TEXTURE_CUBE_MAP_POSITIVE_Z,
  770.         cgl.gl.TEXTURE_CUBE_MAP_NEGATIVE_Z
  771.     ];
  772.  
  773.     const tex = cgl.gl.createTexture();
  774.     const target = cgl.gl.TEXTURE_CUBE_MAP;
  775.     const filter = Texture.FILTER_NEAREST;
  776.     const wrap = Texture.WRAP_CLAMP_TO_EDGE;
  777.     const width = 8;
  778.     const height = 8;
  779.  
  780.     cgl.profileData.profileTextureNew++;
  781.  
  782.  
  783.     cgl.gl.bindTexture(target, tex);
  784.     cgl.profileData.profileTextureResize++;
  785.  
  786.     for (let i = 0; i < 6; i += 1)
  787.     {
  788.         const data = new Uint8Array(8 * 8 * 4);
  789.  
  790.         cgl.gl.texImage2D(faces[i], 0, cgl.gl.RGBA, 8, 8, 0, cgl.gl.RGBA, cgl.gl.UNSIGNED_BYTE, data);
  791.         cgl.gl.texParameteri(target, cgl.gl.TEXTURE_MAG_FILTER, cgl.gl.NEAREST);
  792.         cgl.gl.texParameteri(target, cgl.gl.TEXTURE_MIN_FILTER, cgl.gl.NEAREST);
  793.  
  794.         cgl.gl.texParameteri(target, cgl.gl.TEXTURE_WRAP_S, cgl.gl.CLAMP_TO_EDGE);
  795.         cgl.gl.texParameteri(target, cgl.gl.TEXTURE_WRAP_T, cgl.gl.CLAMP_TO_EDGE);
  796.     }
  797.  
  798.  
  799.     cgl.gl.bindTexture(target, null);
  800.  
  801.     return {
  802.         "id": CABLES.uuid(),
  803.         "tex": tex,
  804.         "cubemap": tex,
  805.         "width": width,
  806.         "height": height,
  807.         "filter": filter,
  808.         "wrap": wrap,
  809.         "unpackAlpha": true,
  810.         "flip": true,
  811.         "_fromData": true,
  812.         "name": "emptyCubemapTexture",
  813.         "anisotropic": 0,
  814.     };
  815. };
  816.  
  817.  
  818. Texture.getTempGradientTexture = function (cgl) // deprecated...
  819. {
  820.     if (!cgl) console.error("[getTempGradientTexture] no cgl!");
  821.     return Texture.getTempTexture(cgl);
  822. };
  823.  
  824. Texture.getTemporaryTexture = function (cgl, size, filter, wrap, r, g, b)
  825. {
  826.     const data = Texture.getDefaultTextureData("stripes", 256, { "r": r, "g": g, "b": b });
  827.     const temptex = new Texture(cgl);
  828.     temptex.initFromData(data, size, size, filter, wrap);
  829.     return temptex;
  830. };
  831.  
  832. /**
  833.  * @static
  834.  * @function createFromImage
  835.  * @memberof Texture
  836.  * @description create texturem from image data (e.g. image or canvas)
  837.  * @param {Context} cgl
  838.  * @param {Object} img image
  839.  * @param {Object} options
  840.  */
  841. Texture.createFromImage = function (cgl, img, options)
  842. {
  843.     options = options || {};
  844.     const texture = new Texture(cgl, options);
  845.     texture.flip = false;
  846.     texture.image = img;
  847.     texture.width = img.videoWidth || img.width || 8;
  848.     texture.height = img.videoHeight || img.height || 8;
  849.     if (options.hasOwnProperty("wrap"))texture.wrap = options.wrap;
  850.  
  851.     texture.initTexture(img, options.filter);
  852.  
  853.     return texture;
  854. };
  855.  
  856. // deprecated!
  857. Texture.fromImage = function (cgl, img, filter, wrap)
  858. {
  859.     console.error("deprecated texture from image...");
  860.  
  861.     const texture = new Texture(cgl);
  862.     texture.flip = false;
  863.     if (filter) texture.filter = filter;
  864.     if (wrap) texture.wrap = wrap;
  865.     texture.image = img;
  866.     texture.initTexture(img);
  867.     return texture;
  868. };
  869.  
  870. /**
  871.  * @static
  872.  * @function isPowerOfTwo
  873.  * @memberof Texture
  874.  * @description returns true if x is power of two
  875.  * @param {Number} x
  876.  * @return {Boolean}
  877.  */
  878. Texture.isPowerOfTwo = function (x)
  879. {
  880.     return x == 1 || x == 2 || x == 4 || x == 8 || x == 16 || x == 32 || x == 64 || x == 128 || x == 256 || x == 512 || x == 1024 || x == 2048 || x == 4096 || x == 8192 || x == 16384;
  881. };
  882.  
  883. Texture.getTexInfo = function (tex)
  884. {
  885.     const obj = {};
  886.  
  887.     obj.name = tex.name;
  888.     obj["power of two"] = tex.isPowerOfTwo();
  889.     obj.size = tex.width + " x " + tex.height;
  890.  
  891.     let targetString = tex.texTarget;
  892.     if (tex.texTarget == tex._cgl.gl.TEXTURE_2D) targetString = "TEXTURE_2D";
  893.     obj.target = targetString;
  894.  
  895.     obj.unpackAlpha = tex.unpackAlpha;
  896.  
  897.     if (tex.cubemap)obj.cubemap = true;
  898.  
  899.     if (tex.textureType == Texture.TYPE_FLOAT) obj.textureType = "TYPE_FLOAT";
  900.     if (tex.textureType == Texture.TYPE_HALF_FLOAT) obj.textureType = "TYPE_HALF_FLOAT";
  901.     else if (tex.textureType == Texture.TYPE_DEPTH) obj.textureType = "TYPE_DEPTH";
  902.     else if (tex.textureType == Texture.TYPE_DEFAULT) obj.textureType = "TYPE_DEFAULT";
  903.     else obj.textureType = "UNKNOWN " + this.textureType;
  904.  
  905.     if (tex.wrap == Texture.WRAP_CLAMP_TO_EDGE) obj.wrap = "CLAMP_TO_EDGE";
  906.     else if (tex.wrap == Texture.WRAP_REPEAT) obj.wrap = "WRAP_REPEAT";
  907.     else if (tex.wrap == Texture.WRAP_MIRRORED_REPEAT) obj.wrap = "WRAP_MIRRORED_REPEAT";
  908.     else obj.wrap = "UNKNOWN";
  909.  
  910.     if (tex.filter == Texture.FILTER_NEAREST) obj.filter = "FILTER_NEAREST";
  911.     else if (tex.filter == Texture.FILTER_LINEAR) obj.filter = "FILTER_LINEAR";
  912.     else if (tex.filter == Texture.FILTER_MIPMAP) obj.filter = "FILTER_MIPMAP";
  913.     else obj.filter = "UNKNOWN";
  914.  
  915.     obj.pixelFormat = tex.pixelFormat || "unknown";
  916.  
  917.     return obj;
  918. };
  919.  
  920. Texture.setUpGlPixelFormat = function (cgl, pixelFormatStr)
  921. {
  922.     const o = {};
  923.  
  924.     if (!pixelFormatStr)
  925.     {
  926.         cgl._log.error("no pixelformatstr!");
  927.         cgl._log.log(new Error());
  928.         pixelFormatStr = Texture.PFORMATSTR_RGBA8UB;
  929.     }
  930.  
  931.     o.pixelFormatBase = pixelFormatStr;
  932.     o.pixelFormat = pixelFormatStr;
  933.     o.glDataType = cgl.gl.UNSIGNED_BYTE;
  934.     o.glInternalFormat = cgl.gl.RGBA8;
  935.     o.glDataFormat = cgl.gl.RGBA;
  936.  
  937.     let floatDatatype = cgl.gl.FLOAT;
  938.  
  939.     if (cgl.glUseHalfFloatTex)
  940.     {
  941.         if (pixelFormatStr == Texture.PFORMATSTR_RGBA32F) pixelFormatStr = Texture.PFORMATSTR_RGBA16F;
  942.         if (pixelFormatStr == Texture.PFORMATSTR_RG32F) pixelFormatStr = Texture.PFORMATSTR_RG16F;
  943.         if (pixelFormatStr == Texture.PFORMATSTR_R32F) pixelFormatStr = Texture.PFORMATSTR_R16F;
  944.     }
  945.  
  946.     if (pixelFormatStr.contains("16bit"))
  947.     {
  948.         if (cgl.glVersion == 2)
  949.         {
  950.             // cgl.enableExtension("OES_texture_half_float");
  951.             const hasExt = cgl.enableExtension("EXT_color_buffer_half_float");
  952.  
  953.             if (!hasExt)
  954.             {
  955.                 console.warn("no 16bit extension, fallback to 32bit", pixelFormatStr);
  956.                 // fallback to 32 bit?
  957.                 if (pixelFormatStr == Texture.PFORMATSTR_RGBA16F) pixelFormatStr = Texture.PFORMATSTR_RGBA32F;
  958.                 if (pixelFormatStr == Texture.PFORMATSTR_RGB16F) pixelFormatStr = Texture.PFORMATSTR_RGB32F;
  959.                 if (pixelFormatStr == Texture.PFORMATSTR_RG16F) pixelFormatStr = Texture.PFORMATSTR_RG32F;
  960.                 if (pixelFormatStr == Texture.PFORMATSTR_R16F) pixelFormatStr = Texture.PFORMATSTR_R32F;
  961.             }
  962.             else
  963.             {
  964.                 floatDatatype = cgl.gl.HALF_FLOAT;
  965.             }
  966.         }
  967.     }
  968.  
  969.     if (cgl.glVersion == 1)
  970.     {
  971.         o.glInternalFormat = cgl.gl.RGBA;
  972.  
  973.         if (pixelFormatStr == Texture.PFORMATSTR_RGBA16F || pixelFormatStr == Texture.PFORMATSTR_RG16F || pixelFormatStr == Texture.PFORMATSTR_R16F)
  974.         {
  975.             const ext = cgl.enableExtension("OES_texture_half_float");
  976.             if (!ext) throw new Error("no half float texture extension");
  977.  
  978.             floatDatatype = ext.HALF_FLOAT_OES;
  979.         }
  980.     }
  981.  
  982.  
  983.     if (pixelFormatStr == Texture.PFORMATSTR_RGBA8UB)
  984.     {
  985.     }
  986.     else if (pixelFormatStr == Texture.PFORMATSTR_RGB565)
  987.     {
  988.         o.glInternalFormat = cgl.gl.RGB565;
  989.         o.glDataFormat = cgl.gl.RGB;
  990.     }
  991.     else if (pixelFormatStr == Texture.PFORMATSTR_R8UB)
  992.     {
  993.         o.glInternalFormat = cgl.gl.R8;
  994.         o.glDataFormat = cgl.gl.RED;
  995.     }
  996.     else if (pixelFormatStr == Texture.PFORMATSTR_RG8UB)
  997.     {
  998.         o.glInternalFormat = cgl.gl.RG8;
  999.         o.glDataFormat = cgl.gl.RG;
  1000.     }
  1001.     else if (pixelFormatStr == Texture.PFORMATSTR_RGB8UB)
  1002.     {
  1003.         o.glInternalFormat = cgl.gl.RGB8;
  1004.         o.glDataFormat = cgl.gl.RGB;
  1005.     }
  1006.     else if (pixelFormatStr == Texture.PFORMATSTR_SRGBA8)
  1007.     {
  1008.         o.glInternalFormat = cgl.gl.SRGB8_ALPHA8;
  1009.     }
  1010.  
  1011.     else if (pixelFormatStr == Texture.PFORMATSTR_R32F)
  1012.     {
  1013.         o.glInternalFormat = cgl.gl.R32F;
  1014.         o.glDataFormat = cgl.gl.RED;
  1015.         o.glDataType = floatDatatype;
  1016.     }
  1017.     else if (pixelFormatStr == Texture.PFORMATSTR_R16F)
  1018.     {
  1019.         o.glInternalFormat = cgl.gl.R16F;
  1020.         o.glDataType = floatDatatype;
  1021.         o.glDataFormat = cgl.gl.RED;
  1022.     }
  1023.     else if (pixelFormatStr == Texture.PFORMATSTR_RG16F)
  1024.     {
  1025.         o.glInternalFormat = cgl.gl.RG16F;
  1026.         o.glDataType = floatDatatype;
  1027.         o.glDataFormat = cgl.gl.RG;
  1028.     }
  1029.     else if (pixelFormatStr == Texture.PFORMATSTR_RGBA16F)
  1030.     {
  1031.         if (cgl.glVersion == 1) o.glInternalFormat = cgl.gl.RGBA;
  1032.         else o.glInternalFormat = cgl.gl.RGBA16F;
  1033.         o.glDataType = floatDatatype;
  1034.     }
  1035.     else if (pixelFormatStr == Texture.PFORMATSTR_R11FG11FB10F)
  1036.     {
  1037.         o.glInternalFormat = cgl.gl.R11F_G11F_B10F;
  1038.         o.glDataType = floatDatatype;
  1039.         o.glDataFormat = cgl.gl.RGB;
  1040.     }
  1041.     else if (pixelFormatStr == Texture.PFORMATSTR_RGBA32F)
  1042.     {
  1043.         if (cgl.glVersion == 1) o.glInternalFormat = cgl.gl.RGBA;
  1044.         else o.glInternalFormat = cgl.gl.RGBA32F;
  1045.         o.glDataType = floatDatatype;
  1046.     }
  1047.     else if (pixelFormatStr == Texture.PFORMATSTR_DEPTH)
  1048.     {
  1049.         if (cgl.glVersion == 1)
  1050.         {
  1051.             o.glInternalFormat = cgl.gl.DEPTH_COMPONENT;
  1052.             o.glDataType = cgl.gl.UNSIGNED_SHORT;
  1053.             o.glDataFormat = cgl.gl.DEPTH_COMPONENT;
  1054.         }
  1055.         else
  1056.         {
  1057.             o.glInternalFormat = cgl.gl.DEPTH_COMPONENT32F;
  1058.             o.glDataType = cgl.gl.FLOAT;
  1059.             o.glDataFormat = cgl.gl.DEPTH_COMPONENT;
  1060.         }
  1061.     }
  1062.     else
  1063.     {
  1064.         console.log("unknown pixelformat ", pixelFormatStr);
  1065.     }
  1066.  
  1067.     /// //////
  1068.  
  1069.     if (pixelFormatStr.contains("32bit") || pixelFormatStr == Texture.PFORMATSTR_R11FG11FB10F)
  1070.     {
  1071.         if (cgl.glVersion == 2) cgl.enableExtension("EXT_color_buffer_float");
  1072.         if (cgl.glVersion == 2) cgl.enableExtension("EXT_float_blend");
  1073.  
  1074.         cgl.enableExtension("OES_texture_float_linear"); // yes, i am sure, this is a webgl 1 and 2 ext
  1075.     }
  1076.  
  1077.  
  1078.     o.numColorChannels = Texture.getPixelFormatNumChannels(pixelFormatStr);
  1079.  
  1080.  
  1081.     if (!o.glDataType || !o.glInternalFormat || !o.glDataFormat) console.log("pixelformat wrong ?!", pixelFormatStr, o.glDataType, o.glInternalFormat, o.glDataFormat, this);
  1082.  
  1083.     return o;
  1084. };
  1085.  
  1086.  
  1087.  
  1088. Texture.getPixelFormatNumChannels =
  1089.     (pxlFrmtStr) =>
  1090.     {
  1091.         if (pxlFrmtStr.startsWith("RGBA")) return 4;
  1092.         if (pxlFrmtStr.startsWith("RGB")) return 3;
  1093.         if (pxlFrmtStr.startsWith("RG")) return 2;
  1094.         return 1;
  1095.     };
  1096.  
  1097. Texture.isPixelFormatFloat =
  1098.     (pxlFrmtStr) =>
  1099.     {
  1100.         return (pxlFrmtStr || "").contains("float");
  1101.     };
  1102.  
  1103. Texture.isPixelFormatHalfFloat =
  1104.     (pxlFrmtStr) =>
  1105.     {
  1106.         return (pxlFrmtStr || "").contains("float") && (pxlFrmtStr || "").contains("16bit");
  1107.     };
  1108.  
  1109.  
  1110.  
  1111.  
  1112. export { Texture };