{"id":930,"date":"2018-07-27T16:06:44","date_gmt":"2018-07-27T15:06:44","guid":{"rendered":"https:\/\/emberglitch.com\/?p=930"},"modified":"2019-06-04T13:44:21","modified_gmt":"2019-06-04T12:44:21","slug":"color-temperature","status":"publish","type":"post","link":"https:\/\/emberglitch.com\/color-temperature\/","title":{"rendered":"Color Temperature"},"content":{"rendered":"[vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″ shape_divider_position=”bottom”][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” width=”1\/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_column_text]\n

Converting temperature to RGB in Substance Designer.<\/h2>\n[\/vc_column_text]
<\/div><\/div>[vc_custom_heading text=”First of all I want to state that I didn’t made the algorithms to convert temperature to RGB. The original formula was made by Tanner Helland. He found data online about some measurements on color temperature. Which he used to make a close approximation formula, for a faster alternative than the \u2018standard\u2019 calculation. His formula was changed by Neil B to give a more accurate result especially around 6500 Kelvin.
\nMy part was to simply translate it into a substance for making light sources with accurate light colors. But still give the user enough options to use it however they want.<\/p>\n

” font_container=”tag:p|text_align:left” google_fonts=”font_family:Open%20Sans%20Condensed%3A300%2C300italic%2C700|font_style:300%20light%20regular%3A300%3Anormal”]

<\/div><\/div>[vc_custom_heading text=”For you who don’t know what color temperature is, here is a brief explanation.
\nColor temperature is the temperature in Kelvin of a black body (an opaque and non-reflective body) lightsource that radiates light of a color comparable to that of the light source.
\nThis is a very brief summary and if you want to learn more I suggest you go to:
\n” font_container=”tag:p|text_align:left” google_fonts=”font_family:Open%20Sans%20Condensed%3A300%2C300italic%2C700|font_style:300%20light%20regular%3A300%3Anormal”][vc_column_text]https:\/\/en.wikipedia.org\/wiki\/Color_temperature<\/span><\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″ shape_divider_position=”bottom”][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” width=”1\/2″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][\/vc_column][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” width=”1\/2″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][\/vc_column][\/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″ shape_divider_position=”bottom”][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” width=”1\/2″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_gallery type=”nectarslider_style” images=”1001″ flexible_slider_height=”true” hide_arrow_navigation=”true” bullet_navigation_style=”see_through” onclick=”link_no” img_size=”500×500″][\/vc_column][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” width=”1\/2″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_column_text]\n

Let’s finally jump into Substance Designer<\/h3>\n[\/vc_column_text]
<\/div><\/div>[vc_custom_heading text=”From the beginning I knew that I was going to need only one node for the calculation, the pixel processor. This node is perfect for these kind of problems. And it turned out that was all I needed in the main graph, except for the uniform color node for the roughness.” font_container=”tag:p|text_align:left” google_fonts=”font_family:Open%20Sans%20Condensed%3A300%2C300italic%2C700|font_style:300%20light%20regular%3A300%3Anormal”][vc_custom_heading text=”The substance has three outputs: basecolor, emissive and roughness. Both the basecolor and roughness are optional, I included them to give the user more control in Substance Painter.” font_container=”tag:p|text_align:left” google_fonts=”font_family:Open%20Sans%20Condensed%3A300%2C300italic%2C700|font_style:300%20light%20regular%3A300%3Anormal”][vc_custom_heading text=”And that\u2019s it for the main graph. Nothing fancy going on in here. So let\u2019s open the first pixel processor, where all the magic is happening.” font_container=”tag:p|text_align:left” google_fonts=”font_family:Open%20Sans%20Condensed%3A300%2C300italic%2C700|font_style:300%20light%20regular%3A300%3Anormal”][\/vc_column][\/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″ shape_divider_position=”bottom”][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” width=”1\/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”]
<\/div><\/div>[vc_column_text]\n

The pixel processor<\/h3>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″ shape_divider_position=”bottom”][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” width=”1\/6″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][\/vc_column][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” width=”2\/3″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”]
\"\"<\/a><\/div><\/div>[vc_column_text]Pixel processor node with the Tanner Hellands formula.<\/span><\/i>[\/vc_column_text][\/vc_column][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” width=”1\/6″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][\/vc_column][\/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″ shape_divider_position=”bottom”][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” width=”1\/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”]
<\/div><\/div>[vc_custom_heading text=”The node is separated into four sections, from left to right:
\n1. List of preset values
\n2. Main input and a boolean switch
\n3. The conversion formula
\n4. Range remap and the alpha channel<\/p>\n

The main input at the top of the graph gets a variable called Temperature. This is a float value in a range of 1000-27000 K. The value goes to boolean switch where it can be switched to use a preset value from the list on the left. The input goes to the formula section where the float value is converted from Kelvin to RGB. This is done by the code below.<\/p>\n

” font_container=”tag:p|text_align:left” google_fonts=”font_family:Open%20Sans%20Condensed%3A300%2C300italic%2C700|font_style:300%20light%20regular%3A300%3Anormal”][\/vc_column][\/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” color_overlay=”#939393″ overlay_strength=”0.3″ shape_divider_position=”bottom” shape_type=””][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” width=”1\/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”]

<\/div><\/div>[vc_column_text]Tanner Hellands original code:<\/span><\/p>\n

Set Temperature = Temperature \\ 100<\/span><\/p>\n


\nCalculate Red:<\/span>
\n<\/span> \u00a0\u00a0\u00a0If Temperature <= 66 Then<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Red = 255<\/span>
\n<\/span> \u00a0\u00a0\u00a0Else<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Red = Temperature – 60<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Red = 329.698727446 * (Red ^ -0.1332047592)<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0If Red < 0 Then Red = 0<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0If Red > 255 Then Red = 255<\/span>
\n<\/span> \u00a0\u00a0\u00a0End If<\/span>
\n<\/span> \u00a0\u00a0\u00a0<\/span>
\n<\/span> \u00a0\u00a0\u00a0Calculate Green:<\/span>
\n<\/span> \u00a0\u00a0\u00a0If Temperature <= 66 Then<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Green = Temperature<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Green = 99.4708025861 * Ln(Green) – 161.1195681661<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0If Green < 0 Then Green = 0<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0If Green > 255 Then Green = 255<\/span>
\n<\/span> \u00a0\u00a0\u00a0Else<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Green = Temperature – 60<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Green = 288.1221695283 * (Green ^ -0.0755148492)<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0If Green < 0 Then Green = 0<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0If Green > 255 Then Green = 255<\/span>
\n<\/span> \u00a0\u00a0\u00a0End If<\/span>
\n<\/span> \u00a0\u00a0\u00a0<\/span>
\n<\/span> \u00a0\u00a0\u00a0Calculate Blue:<\/span>
\n<\/span> \u00a0\u00a0\u00a0If Temperature >= 66 Then<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Blue = 255<\/span>
\n<\/span> \u00a0\u00a0\u00a0Else<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0If Temperature <= 19 Then<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Blue = 0<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Else<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Blue = Temperature – 10<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Blue = 138.5177312231 * Ln(Blue) – 305.0447927307<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0If Blue < 0 Then Blue = 0<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0If Blue > 255 Then Blue = 255<\/span>
\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0End If<\/span>
\n<\/span> \u00a0\u00a0\u00a0End If<\/span>[\/vc_column_text]

<\/div><\/div>[\/vc_column][\/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″ shape_divider_position=”bottom”][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” width=”1\/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_custom_heading text=”After the conversion the output is remapped from 0-255 to 0-1 and goes to the output a vector float 4 node, where the alpha channel is added.
\nThat\u2019s it for the pixel processor node.
\nIn the main graph the output from the pixel processor is connected to the output nodes baseColor and emissive. ” font_container=”tag:p|text_align:left” google_fonts=”font_family:Open%20Sans%20Condensed%3A300%2C300italic%2C700|font_style:300%20light%20regular%3A300%3Anormal”]
<\/div><\/div>[\/vc_column][\/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″ shape_divider_position=”bottom”][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” width=”1\/3″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”]
\"\"<\/div><\/div>[\/vc_column][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” width=”1\/3″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”]
\"\"<\/div><\/div>[\/vc_column][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” width=”1\/3″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_column_text]The only thing missing are the input parameters: <\/span><\/p>\n