Three.js: Difference between revisions

(3 intermediate revisions by the same user not shown)

Line 1:

~~{{Infobox software~~

~~| name = Three.js~~

~~| screenshot = File:Three.js-code-example.jpg~~

~~| caption = Screen captures of Three.js examples~~

~~| author = Ricardo Cabello (Mr.doob)~~

| developer = Three.js Authors<ref name="license">{{cite web |url= https://github.com/mrdoob/three.js/blob/master/LICENSE|title=Three.js/license|publisher=github.com/mrdoob|accessdate=20 May 2012}}</ref>

| released = {{Start date and age|2010|04|24}}<ref name="firstcommit">{{cite web |url= https://github.com/mrdoob/three.js/commit/a90c4e107ff6e3b148458c96965e876f9441b147|title=First commit |publisher=github.com/mrdoob|accessdate=20 May 2012}}</ref>

~~| latest release version = r108~~

~~| latest release date = {{Start date and age|2019|08|28}}~~

~~| programming language = [[JavaScript]]~~

~~| genre = [[JavaScript library]]~~

~~| license = [[MIT License|MIT]]<ref name="license" />~~

~~| website = {{URL|https://threejs.org/}}~~

}}

A very useful JavaScript graphics library which uses WebGL build by Mr. Doob (Ricardo Cabello, Google).

Line 43:

Line 29:

==Shaders==

See [https://threejs.org/docs/#api/en/materials/ShaderMaterial ShaderMaterial].

==Color Spaces==

By default, three.js works in Linear color space. This means that input colors are converted from SRGB to linear before rendering, most color calculations happen in linear color space, the final color is converted to SRGB for display.

# THREE.Color values are converted from SRGB to Linear color space on CPU at https://github.com/mrdoob/three.js/blob/0af9729d0c143a86a1d725d6e2c3ad83301f3f34/src/math/Color.js#L211

# Textures are converted from their source color space to linear. This is done by https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/unpackColorSpace.

# When rendering directly to canvas or XR, shaders output in SRGB. When rendering to a rendertarget, shaders output in linear. See https://github.com/mrdoob/three.js/blob/e04b9f7bd7f5b17103339d343168bfab2d6e0ace/src/renderers/WebGLRenderer.js#L2198 for the CPU side and https://github.com/mrdoob/three.js/blob/e04b9f7bd7f5b17103339d343168bfab2d6e0ace/src/renderers/shaders/ShaderChunk/colorspace_fragment.glsl.js for the GPU side.

# If using postprocessing, make sure to use an Output pass to convert the linear render target into SRGB.

See https://discourse.threejs.org/t/updates-to-color-management-in-three-js-r152/50791

==References==

@@ Line 1: / Line 1: @@
-{{Infobox software
-| name = Three.js
-| screenshot = File:Three.js-code-example.jpg
-| caption = Screen captures of Three.js examples
-| author = Ricardo Cabello (Mr.doob)
-| developer = Three.js Authors<ref name="license">{{cite web |url= https://github.com/mrdoob/three.js/blob/master/LICENSE|title=Three.js/license|publisher=github.com/mrdoob|accessdate=20 May 2012}}</ref>
-| released = {{Start date and age|2010|04|24}}<ref name="firstcommit">{{cite web |url= https://github.com/mrdoob/three.js/commit/a90c4e107ff6e3b148458c96965e876f9441b147|title=First commit |publisher=github.com/mrdoob|accessdate=20 May 2012}}</ref>
-| latest release version = r108
-| latest release date = {{Start date and age|2019|08|28}}
-| programming language = [[JavaScript]]
-| genre = [[JavaScript library]]
-| license = [[MIT License|MIT]]<ref name="license" />
-| website = {{URL|https://threejs.org/}}
-}}
 A very useful JavaScript graphics library which uses WebGL build by Mr. Doob (Ricardo Cabello, Google).
@@ Line 43: / Line 29: @@
 ==Shaders==
 See [https://threejs.org/docs/#api/en/materials/ShaderMaterial ShaderMaterial].
+==Color Spaces==
+By default, three.js works in Linear color space. This means that input colors are converted from SRGB to linear before rendering, most color calculations happen in linear color space, the final color is converted to SRGB for display.
+# THREE.Color values are converted from SRGB to Linear color space on CPU at https://github.com/mrdoob/three.js/blob/0af9729d0c143a86a1d725d6e2c3ad83301f3f34/src/math/Color.js#L211
+# Textures are converted from their source color space to linear. This is done by https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/unpackColorSpace.
+# When rendering directly to canvas or XR, shaders output in SRGB. When rendering to a rendertarget, shaders output in linear. See https://github.com/mrdoob/three.js/blob/e04b9f7bd7f5b17103339d343168bfab2d6e0ace/src/renderers/WebGLRenderer.js#L2198 for the CPU side and https://github.com/mrdoob/three.js/blob/e04b9f7bd7f5b17103339d343168bfab2d6e0ace/src/renderers/shaders/ShaderChunk/colorspace_fragment.glsl.js for the GPU side.
+# If using postprocessing, make sure to use an Output pass to convert the linear render target into SRGB.
+See https://discourse.threejs.org/t/updates-to-color-management-in-three-js-r152/50791
+==References==