THREE.js 中 canvas 来源的纹理上的透明绘图
Transparent drawing on canvas-sourced texture in THREE.js
我通过创建 PlaneGeometry/BasicMaterial 网格并使用 canvas:
支持它们的纹理，在我的 THREE.js 应用程序中创建二维表面
this.canvas = makeCanvas(canvasWidth, canvasHeight);
this.ctx = this.canvas.getContext('2d');
this.texture = new THREE.Texture(this.canvas);
this.texture.minFilter = THREE.LinearFilter;
this.texture.magFilter = THREE.LinearFilter;
this.texture.anisotropy = 16;
this.mesh = new THREE.Mesh(new THREE.PlaneGeometry(width, height), new THREE.MeshBasicMaterial({
map: this.texture,
overdraw: true,
side: THREE.DoubleSide,
transparent: true
}));
这很好用 - 除非我想透明地绘制。然后，我需要创建另一个纹理以绑定为 alphaMap，并在两个 canvas 上下文之间复制所有绘图操作。性能很好，但代码看起来绝对可怕：
var circleAlpha = 'rgb(100, 100, 100);',
segmentAlpha = 'rgb(200, 200, 200);';
ctx.fillStyle = 'rgb(0, 255, 255);';
if (this.segment === -1) {
circleAlpha = segmentAlpha;
}
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.alphaCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
var drawArc = function (c, w, h, piece) {
var angw = 2 * Math.PI / 6;
c.beginPath();
c.arc(w / 2, h / 2, 512, angw * piece, angw * (piece + 1), false);
c.arc(w / 2, h / 2, 300, angw * (piece + 1), angw * piece, true);
c.closePath();
c.fill();
};
for (var i = 0; i < 6; i++) {
this.alphaCtx.fillStyle = i == this.segment ? segmentAlpha : circleAlpha;
drawArc(ctx, this.canvas.width, this.canvas.height, i);
drawArc(this.alphaCtx, this.canvas.width, this.canvas.height, i);
}
this.updateTexture();
this.alphaTexture.needsUpdate = true;
我一直在计划编写一个小型实用程序库来自动处理此问题，但在我这样做之前，我想知道我是否只是在犯傻，是否有更简单的方法来执行此操作。
您可以编写拆分函数而不是渲染成两个 canvases。这种方法将允许您按预期使用 alpha 通道向一个 canvas 发出多个绘制操作。
完成后，只需 运行 它通过 returns 两个 canvas 分离器，一个用于颜色，一个用于 alpha 通道的灰度。
（您当然可以重用主要颜色，只是注意 alpha 通道会消失）。
实时分配器示例：
var ctx = document.querySelector("canvas").getContext("2d"),
gr = ctx.createLinearGradient(0, 0, 300, 0);
// draw something with alpha channel to main canvas
gr.addColorStop(0, "rgba(255,140,0,1)");
gr.addColorStop(1, "rgba(255,0,0,0)");
ctx.fillStyle = gr;
ctx.fillRect(0, 0, 300, 150);
// split the canvas to two new canvas, one for color, one for alpha
var maps = splitTexture(ctx);
document.body.appendChild(maps.color); // show in DOM for demo
document.body.appendChild(maps.alpha);
// Split texture:
function splitTexture(ctx) {
var w = ctx.canvas.width,
h = ctx.canvas.height,
canvasColor = document.createElement("canvas"),
canvasAlpha = document.createElement("canvas"),
ctxc = canvasColor.getContext("2d"),
ctxa = canvasAlpha.getContext("2d"),
idata = ctx.getImageData(0, 0, w, h),
data32 = new Uint32Array(idata.data.buffer), // use uint-32 buffer (faster!)
len = data32.length, i = 0, p, a, g,
adata, adata32, cdata, cdata32; // destinations
canvasColor.width = canvasAlpha.width = w; // set same size as source
canvasColor.height = canvasAlpha.height = h;
cdata = ctxc.createImageData(w, h); // create buffers and uint32 views
cdata32 = new Uint32Array(cdata.data.buffer);
adata = ctxa.createImageData(w, h);
adata32 = new Uint32Array(adata.data.buffer);
// splitter loop
while(i < len) {
p = data32[i]; // source pixel as 32-bit ABGR
a = p & 0xff000000; // mask out alpha
g = 0xff000000 | (a >>> 8) | (a >>> 16) | (a >>> 24); // grey value
adata32[i] = g; // set gray value
cdata32[i++] = 0xff000000 | (p & 0xffffff); // set color value
}
ctxc.putImageData(cdata, 0, 0); // update destinations
ctxa.putImageData(adata, 0, 0);
return {
color: canvasColor,
alpha: canvasAlpha
}
}
body {background:#79c}
<canvas></canvas>
我最终编写了一个代理上下文，在两个画布之间拆分绘图操作。需要 csscolorparser` 节点模块（在 NPM 上）。
var FakeCtx = function (canvasA, canvasB) {
this.ctxA = canvasA.getContext('2d');
this.ctxB = canvasB.getContext('2d');
this.colorStore = {};
};
var assignContextProperty = function (property, propertyType) {
if (propertyType === 'function') {
FakeCtx.prototype[property] = function () {
var argArray = Array.prototype.slice.call(arguments),
ra = this.ctxA[property].apply(this.ctxA, argArray),
rb = this.ctxB[property].apply(this.ctxB, argArray);
if (ra !== rb) {
var argString = argArray.join(', ');
debug.warn('Console proxy got two different results for calling ' + property + ':');
debug.warn(' Canvas A: ' + property + '(' + argString + ') = ' + ra);
debug.warn(' Canvas B: ' + property + '(' + argString + ') = ' + rb);
}
return ra;
};
} else {
if (property != 'fillStyle' && property != 'strokeStyle') {
FakeCtx.prototype.__defineGetter__(property, function () {
return this.ctxA[property];
});
FakeCtx.prototype.__defineSetter__(property, function (value) {
this.ctxA[property] = this.ctxB[property] = value;
});
} else {
FakeCtx.prototype.__defineGetter__(property, function () {
return this.colorStore[property] || this.ctxA[property];
});
FakeCtx.prototype.__defineSetter__(property, function (value) {
var color = csscolor.parseCSSColor(value);
if (color === null || color.length < 3) {
throw new Error('Invalid color ' + value + ': ' + color);
} else {
this.colorStore[property] = value;
if (color.length === 3 || color[3] === 1) { // no alpha
this.ctxA[property] = value;
this.ctxB[property] = 'rgb(255, 255, 255)'; // white = full alpha
} else {
this.ctxA[property] = 'rgb(' + color.slice(0, 3).join(', ') + ')';
var alphaValue = Math.round(255 * color[3]);
this.ctxB[property] = 'rgb(' + [ alphaValue, alphaValue, alphaValue ].join(', ') + ')';
// console.log('got color with alpha ' + value + ', splitting to ' + 'rgb(' + color.slice(0, 3).join(', ') + ');' + ' and ' + 'rgb(' + [ alphaValue, alphaValue, alphaValue ].join(', ') + ');');
}
}
});
}
}
}
var _ctx = makeCanvas(0, 0).getContext('2d');
for (var property in _ctx) {
assignContextProperty(property, typeof _ctx[property]);
}
该代码可能有一些错误，我还没有 运行 通过任何严格的测试，但它适用于简单的位。
我通过创建 PlaneGeometry/BasicMaterial 网格并使用 canvas:
this.canvas = makeCanvas(canvasWidth, canvasHeight);
this.ctx = this.canvas.getContext('2d');
this.texture = new THREE.Texture(this.canvas);
this.texture.minFilter = THREE.LinearFilter;
this.texture.magFilter = THREE.LinearFilter;
this.texture.anisotropy = 16;
this.mesh = new THREE.Mesh(new THREE.PlaneGeometry(width, height), new THREE.MeshBasicMaterial({
map: this.texture,
overdraw: true,
side: THREE.DoubleSide,
transparent: true
}));
这很好用 - 除非我想透明地绘制。然后，我需要创建另一个纹理以绑定为 alphaMap，并在两个 canvas 上下文之间复制所有绘图操作。性能很好，但代码看起来绝对可怕：
var circleAlpha = 'rgb(100, 100, 100);',
segmentAlpha = 'rgb(200, 200, 200);';
ctx.fillStyle = 'rgb(0, 255, 255);';
if (this.segment === -1) {
circleAlpha = segmentAlpha;
}
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.alphaCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
var drawArc = function (c, w, h, piece) {
var angw = 2 * Math.PI / 6;
c.beginPath();
c.arc(w / 2, h / 2, 512, angw * piece, angw * (piece + 1), false);
c.arc(w / 2, h / 2, 300, angw * (piece + 1), angw * piece, true);
c.closePath();
c.fill();
};
for (var i = 0; i < 6; i++) {
this.alphaCtx.fillStyle = i == this.segment ? segmentAlpha : circleAlpha;
drawArc(ctx, this.canvas.width, this.canvas.height, i);
drawArc(this.alphaCtx, this.canvas.width, this.canvas.height, i);
}
this.updateTexture();
this.alphaTexture.needsUpdate = true;
我一直在计划编写一个小型实用程序库来自动处理此问题，但在我这样做之前，我想知道我是否只是在犯傻，是否有更简单的方法来执行此操作。
您可以编写拆分函数而不是渲染成两个 canvases。这种方法将允许您按预期使用 alpha 通道向一个 canvas 发出多个绘制操作。
完成后，只需 运行 它通过 returns 两个 canvas 分离器，一个用于颜色，一个用于 alpha 通道的灰度。
（您当然可以重用主要颜色，只是注意 alpha 通道会消失）。
实时分配器示例：
var ctx = document.querySelector("canvas").getContext("2d"),
gr = ctx.createLinearGradient(0, 0, 300, 0);
// draw something with alpha channel to main canvas
gr.addColorStop(0, "rgba(255,140,0,1)");
gr.addColorStop(1, "rgba(255,0,0,0)");
ctx.fillStyle = gr;
ctx.fillRect(0, 0, 300, 150);
// split the canvas to two new canvas, one for color, one for alpha
var maps = splitTexture(ctx);
document.body.appendChild(maps.color); // show in DOM for demo
document.body.appendChild(maps.alpha);
// Split texture:
function splitTexture(ctx) {
var w = ctx.canvas.width,
h = ctx.canvas.height,
canvasColor = document.createElement("canvas"),
canvasAlpha = document.createElement("canvas"),
ctxc = canvasColor.getContext("2d"),
ctxa = canvasAlpha.getContext("2d"),
idata = ctx.getImageData(0, 0, w, h),
data32 = new Uint32Array(idata.data.buffer), // use uint-32 buffer (faster!)
len = data32.length, i = 0, p, a, g,
adata, adata32, cdata, cdata32; // destinations
canvasColor.width = canvasAlpha.width = w; // set same size as source
canvasColor.height = canvasAlpha.height = h;
cdata = ctxc.createImageData(w, h); // create buffers and uint32 views
cdata32 = new Uint32Array(cdata.data.buffer);
adata = ctxa.createImageData(w, h);
adata32 = new Uint32Array(adata.data.buffer);
// splitter loop
while(i < len) {
p = data32[i]; // source pixel as 32-bit ABGR
a = p & 0xff000000; // mask out alpha
g = 0xff000000 | (a >>> 8) | (a >>> 16) | (a >>> 24); // grey value
adata32[i] = g; // set gray value
cdata32[i++] = 0xff000000 | (p & 0xffffff); // set color value
}
ctxc.putImageData(cdata, 0, 0); // update destinations
ctxa.putImageData(adata, 0, 0);
return {
color: canvasColor,
alpha: canvasAlpha
}
}
body {background:#79c}
<canvas></canvas>
我最终编写了一个代理上下文，在两个画布之间拆分绘图操作。需要 csscolorparser` 节点模块（在 NPM 上）。
var FakeCtx = function (canvasA, canvasB) {
this.ctxA = canvasA.getContext('2d');
this.ctxB = canvasB.getContext('2d');
this.colorStore = {};
};
var assignContextProperty = function (property, propertyType) {
if (propertyType === 'function') {
FakeCtx.prototype[property] = function () {
var argArray = Array.prototype.slice.call(arguments),
ra = this.ctxA[property].apply(this.ctxA, argArray),
rb = this.ctxB[property].apply(this.ctxB, argArray);
if (ra !== rb) {
var argString = argArray.join(', ');
debug.warn('Console proxy got two different results for calling ' + property + ':');
debug.warn(' Canvas A: ' + property + '(' + argString + ') = ' + ra);
debug.warn(' Canvas B: ' + property + '(' + argString + ') = ' + rb);
}
return ra;
};
} else {
if (property != 'fillStyle' && property != 'strokeStyle') {
FakeCtx.prototype.__defineGetter__(property, function () {
return this.ctxA[property];
});
FakeCtx.prototype.__defineSetter__(property, function (value) {
this.ctxA[property] = this.ctxB[property] = value;
});
} else {
FakeCtx.prototype.__defineGetter__(property, function () {
return this.colorStore[property] || this.ctxA[property];
});
FakeCtx.prototype.__defineSetter__(property, function (value) {
var color = csscolor.parseCSSColor(value);
if (color === null || color.length < 3) {
throw new Error('Invalid color ' + value + ': ' + color);
} else {
this.colorStore[property] = value;
if (color.length === 3 || color[3] === 1) { // no alpha
this.ctxA[property] = value;
this.ctxB[property] = 'rgb(255, 255, 255)'; // white = full alpha
} else {
this.ctxA[property] = 'rgb(' + color.slice(0, 3).join(', ') + ')';
var alphaValue = Math.round(255 * color[3]);
this.ctxB[property] = 'rgb(' + [ alphaValue, alphaValue, alphaValue ].join(', ') + ')';
// console.log('got color with alpha ' + value + ', splitting to ' + 'rgb(' + color.slice(0, 3).join(', ') + ');' + ' and ' + 'rgb(' + [ alphaValue, alphaValue, alphaValue ].join(', ') + ');');
}
}
});
}
}
}
var _ctx = makeCanvas(0, 0).getContext('2d');
for (var property in _ctx) {
assignContextProperty(property, typeof _ctx[property]);
}
该代码可能有一些错误，我还没有 运行 通过任何严格的测试，但它适用于简单的位。