[英]Three.js show sRGB colors wrong
I have problem with PNG sRGB rednering in Three.js.我在 Three.js 中对 PNG sRGB rednering 有疑问。 I have this piece of code where I am generation texture from SVG file:
我有这段代码,我从 SVG 文件生成纹理:
(...) // managing whole SVG data which is long and not important as I will show below
window.temCanvas = document.createElement('canvas');
temCanvas.width = '2048';
temCanvas.height = '454';
window.temContext = temCanvas.getContext('2d', {colorSpace: "srgb", preserveDrawingBuffer: true});
temContext.clearRect(0, 0, 2048, 454);
temContext.drawImage(newTextureTopSVG, 0,0, 2048, 454);
var newTex1 = temCanvas.toDataURL("image/png"); // here should be info about sRGB?
Texture generated this way is showing different colors.以这种方式生成的纹理显示不同的颜色。 All 0 and 255 values are showing correctly but when it is between ie rgb(0,128,255) should look like this:
所有 0 和 255 值都正确显示,但当它介于 ie rgb(0,128,255) 之间时,应该如下所示:
but it is rendered as:但它呈现为:
I saved png generated from SVG and compared it to similar png generated from graphic software, there is difference which I see in Notepad++, correct file contain this:我保存了从 SVG 生成的 png 并将其与从图形软件生成的类似 png 进行了比较,我在 Notepad++ 中看到了不同之处,正确的文件包含以下内容:
file which is rendering badly (after saving from canvas in Firefox) doesn't contain srgb text:
渲染不佳的文件(在 Firefox 中从画布保存后)不包含 srgb 文本:
I suppose I have to add sRGB info here:我想我必须在这里添加 sRGB 信息:
var newTex1 = temCanvas.toDataURL("image/png");
How to do it?怎么做? But shouldn't it be always sRGB for PNG?
但是 PNG 不应该总是 sRGB 吗?
Maybe I am wrong and it is possible to force Three.js to show colors correctly by changing something in Material, Texture etc.?也许我错了,可以通过更改材质、纹理等来强制 Three.js 正确显示颜色?
I am using:我在用:
renderer.outputEncoding = sRGBEncoding;
I don't want to provide all data, I will edit this post if needed.我不想提供所有数据,如果需要我会编辑这篇文章。 It is way too long.
太长了。 Especially managing SVG data.
特别是管理 SVG 数据。
When using renderer.outputEncoding = sRGBEncoding;
当使用
renderer.outputEncoding = sRGBEncoding;
, sRGB encoded color textures must be configured like so: ,sRGB 编码的颜色纹理必须像这样配置:
texture.encoding = sRGBEncoding;
Otherwise the sRGB workflow is incomplete resulting in wrong colors.否则 sRGB 工作流程不完整会导致错误的颜色。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.