Three.js 顯示 sRGB 顏色錯誤

Question

我在 Three.js 中對 PNG sRGB rednering 有疑問。 我有這段代碼，我從 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?

以這種方式生成的紋理顯示不同的顏色。 所有 0 和 255 值都正確顯示，但當它介於 ie rgb(0,128,255) 之間時，應該如下所示：

但它呈現為：

我保存了從 SVG 生成的 png 並將其與從圖形軟件生成的類似 png 進行了比較，我在 Notepad++ 中看到了不同之處，正確的文件包含以下內容： 渲染不佳的文件（在 Firefox 中從畫布保存后）不包含 srgb 文本：

我想我必須在這里添加 sRGB 信息：

var newTex1 = temCanvas.toDataURL("image/png");

怎么做？ 但是 PNG 不應該總是 sRGB 嗎？

也許我錯了，可以通過更改材質、紋理等來強制 Three.js 正確顯示顏色？

我在用：

renderer.outputEncoding = sRGBEncoding;

我不想提供所有數據，如果需要我會編輯這篇文章。 太長了。 特別是管理 SVG 數據。

Answer 1

當使用renderer.outputEncoding = sRGBEncoding; ，sRGB 編碼的顏色紋理必須像這樣配置：

texture.encoding = sRGBEncoding;

否則 sRGB 工作流程不完整會導致錯誤的顏色。