cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
218 lines (217 loc) • 6.74 kB
JavaScript
import Texture2D from "../Texture2D.mjs";
import TextureCube from "../TextureCube.mjs";
import vendor from "../core/vendor.mjs";
import EnvironmentMapPass from "../prePass/EnvironmentMap.mjs";
import Skybox from "../plugin/Skybox.mjs";
import Scene from "../Scene.mjs";
import dds from "./dds.mjs";
import hdr from "./hdr.mjs";
var textureUtil = {
loadTexture: function(path, option, onsuccess, onerror) {
var texture;
if (typeof option === "function") {
onsuccess = option;
onerror = onsuccess;
option = {};
} else {
option = option || {};
}
if (typeof path === "string") {
if (path.match(/.hdr$/) || option.fileType === "hdr") {
texture = new Texture2D({
width: 0,
height: 0,
sRGB: false
});
textureUtil._fetchTexture(
path,
function(data) {
hdr.parseRGBE(data, texture, option.exposure);
texture.dirty();
onsuccess && onsuccess(texture);
},
onerror
);
return texture;
} else if (path.match(/.dds$/) || option.fileType === "dds") {
texture = new Texture2D({
width: 0,
height: 0
});
textureUtil._fetchTexture(
path,
function(data) {
dds.parse(data, texture);
texture.dirty();
onsuccess && onsuccess(texture);
},
onerror
);
} else {
texture = new Texture2D();
texture.load(path);
texture.success(onsuccess);
texture.error(onerror);
}
} else if (typeof path === "object" && typeof path.px !== "undefined") {
texture = new TextureCube();
texture.load(path);
texture.success(onsuccess);
texture.error(onerror);
}
return texture;
},
loadPanorama: function(renderer, path, cubeMap, option, onsuccess, onerror) {
var self = this;
if (typeof option === "function") {
onsuccess = option;
onerror = onsuccess;
option = {};
} else {
option = option || {};
}
textureUtil.loadTexture(path, option, function(texture) {
texture.flipY = option.flipY || false;
self.panoramaToCubeMap(renderer, texture, cubeMap, option);
texture.dispose(renderer);
onsuccess && onsuccess(cubeMap);
}, onerror);
},
panoramaToCubeMap: function(renderer, panoramaMap, cubeMap, option) {
var environmentMapPass = new EnvironmentMapPass();
var skydome = new Skybox({
scene: new Scene()
});
skydome.setEnvironmentMap(panoramaMap);
option = option || {};
if (option.encodeRGBM) {
skydome.material.define("fragment", "RGBM_ENCODE");
}
cubeMap.sRGB = panoramaMap.sRGB;
environmentMapPass.texture = cubeMap;
environmentMapPass.render(renderer, skydome.scene);
environmentMapPass.texture = null;
environmentMapPass.dispose(renderer);
return cubeMap;
},
heightToNormal: function(image, checkBump) {
var canvas = document.createElement("canvas");
var width = canvas.width = image.width;
var height = canvas.height = image.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, width, height);
checkBump = checkBump || false;
var srcData = ctx.getImageData(0, 0, width, height);
var dstData = ctx.createImageData(width, height);
for (var i = 0; i < srcData.data.length; i += 4) {
if (checkBump) {
var r = srcData.data[i];
var g = srcData.data[i + 1];
var b = srcData.data[i + 2];
var diff = Math.abs(r - g) + Math.abs(g - b);
if (diff > 20) {
console.warn("Given image is not a height map");
return image;
}
}
var x1, y1, x2, y2;
if (i % (width * 4) === 0) {
x1 = srcData.data[i];
x2 = srcData.data[i + 4];
} else if (i % (width * 4) === (width - 1) * 4) {
x1 = srcData.data[i - 4];
x2 = srcData.data[i];
} else {
x1 = srcData.data[i - 4];
x2 = srcData.data[i + 4];
}
if (i < width * 4) {
y1 = srcData.data[i];
y2 = srcData.data[i + width * 4];
} else if (i > width * (height - 1) * 4) {
y1 = srcData.data[i - width * 4];
y2 = srcData.data[i];
} else {
y1 = srcData.data[i - width * 4];
y2 = srcData.data[i + width * 4];
}
dstData.data[i] = x1 - x2 + 127;
dstData.data[i + 1] = y1 - y2 + 127;
dstData.data[i + 2] = 255;
dstData.data[i + 3] = 255;
}
ctx.putImageData(dstData, 0, 0);
return canvas;
},
isHeightImage: function(img, downScaleSize, threshold) {
if (!img || !img.width || !img.height) {
return false;
}
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var size = downScaleSize || 32;
threshold = threshold || 20;
canvas.width = canvas.height = size;
ctx.drawImage(img, 0, 0, size, size);
var srcData = ctx.getImageData(0, 0, size, size);
for (var i = 0; i < srcData.data.length; i += 4) {
var r = srcData.data[i];
var g = srcData.data[i + 1];
var b = srcData.data[i + 2];
var diff = Math.abs(r - g) + Math.abs(g - b);
if (diff > threshold) {
return false;
}
}
return true;
},
_fetchTexture: function(path, onsuccess, onerror) {
vendor.request.get({
url: path,
responseType: "arraybuffer",
onload: onsuccess,
onerror
});
},
createChessboard: function(size, unitSize, color1, color2) {
size = size || 512;
unitSize = unitSize || 64;
color1 = color1 || "black";
color2 = color2 || "white";
var repeat = Math.ceil(size / unitSize);
var canvas = document.createElement("canvas");
canvas.width = size;
canvas.height = size;
var ctx = canvas.getContext("2d");
ctx.fillStyle = color2;
ctx.fillRect(0, 0, size, size);
ctx.fillStyle = color1;
for (var i = 0; i < repeat; i++) {
for (var j = 0; j < repeat; j++) {
var isFill = j % 2 ? i % 2 : i % 2 - 1;
if (isFill) {
ctx.fillRect(i * unitSize, j * unitSize, unitSize, unitSize);
}
}
}
var texture = new Texture2D({
image: canvas,
anisotropic: 8
});
return texture;
},
createBlank: function(color) {
var canvas = document.createElement("canvas");
canvas.width = 1;
canvas.height = 1;
var ctx = canvas.getContext("2d");
ctx.fillStyle = color;
ctx.fillRect(0, 0, 1, 1);
var texture = new Texture2D({
image: canvas
});
return texture;
}
};
var textureUtil$1 = textureUtil;
export { textureUtil$1 as default };