{"version":1,"lectureId":"01M46CHHKH6ESNHKV1BYEQJAP5","attempt":0,"publication":{"slug":"introduction-to-gltf-and-physically-based-rendering-for-3d-artists","title":"Introduction to glTF and Physically Based Rendering for 3D Artists","subject":"computer-science","summary":"What glTF is, why it is called the JPEG of 3D, and what physically based rendering asks of an artist. The lecture walks through the metallic-roughness material maps one at a time: base color, metallic, roughness, normal, occlusion and emissive. It shows how roughness spreads a reflection, and closes with three practical habits for painting and packing textures that look right in any glTF viewer.","metaDescription":"A short, artist-friendly introduction to glTF and PBR: base color, metallic, roughness, normal, occlusion and emissive maps.","transcript":"You have finished a model, and you want it to look right in a web browser, a game engine, and a client's viewer. That is the job G L T F was made for. It packs your mesh, your materials, and your textures into one tidy file. That is why people call it the JPEG of three D: compact, standard, and ready to display anywhere. Its materials follow an idea called physically based rendering, or P B R. Instead of painting how a surface looks under one light, you describe what the surface is made of. Then the renderer handles the light. Move the lamp, and the reflection moves with it, worked out for you. The same material behaves believably at noon, at dusk, or in a dark room. G L T F describes that material with a small set of maps, called the metallic roughness workflow. Here they are, beside a lit surface we can adjust. Base color is the pure color of the surface, with no shadows or highlights painted in. Metallic says whether it is metal. Zero for paint, plastic, wood or skin, and one for bare metal. Most surfaces are simply one or the other. Roughness controls how blurry reflections are. At zero the surface is glossy, and the reflection is one sharp beam. Raise it, and the light scatters into a soft, matte spread. A normal map fakes small bumps and scratches without adding geometry. Occlusion darkens the crevices where light struggles to reach. And emissive marks the parts that glow on their own, like screens or lamps. A few habits keep these maps honest. First, keep base color clean. Lighting belongs to the renderer, so do not bake shadows into it. Second, think in clear choices. Metal is metal and paint is paint; save the in between values for dust, rust, and worn edges. Third, know the packing. G L T F reads roughness from the green channel and metallic from the blue channel of one image, and occlusion usually fills the red. So export them together. Paint what the surface is, let the light do the rest, and your model will look right wherever G L T F takes it.","watch":{"version":1,"scenes":[{"title":"One File, Real Materials","start":0,"end":45.87941666666666,"objects":{"box":"a Polygon [blue] labelled \"upright(\"glTF\")\" drawn in diagram (vertices=((4.0, 3.0), (6.0, 3.0), (6.0, 5.0), (4.0, 5.0)))","caption":"a Tex [text] that says \"Mesh, materials and textures, in one file.\"","definition":"a Panel that says \"Describe what a surface is made of. The renderer works out how light behaves on it.\"","diagram":"a Figure (x_range=(0.0, 10.0), y_range=(0.0, 8.0))","engines":"a Point [text] labelled \"upright(\"engines\")\" drawn in diagram (location=(8.6, 1.5), show_marker=False)","heading_file":"a Heading that says \"glTF: the JPEG of 3D\"","heading_pbr":"a Heading that says \"Physically Based Rendering\"","in_mat":"a Vector [gray] drawn in diagram (start=(1.8, 4.0), end=(3.9, 4.0))","in_mesh":"a Vector [gray] drawn in diagram (start=(1.8, 6.3), end=(3.9, 4.6))","in_tex":"a Vector [gray] drawn in diagram (start=(1.8, 1.7), end=(3.9, 3.4))","lamp":"a Point [yellow] labelled \"upright(\"light\")\" drawn in light_fig (location=((5.0 - (4.0 * sin(theta))), (1.0 + (4.0 * cos(theta)))))","light_fig":"a Figure (x_range=(0.0, 10.0), y_range=(0.0, 6.0))","materials":"a Point [text] labelled \"upright(\"materials\")\" drawn in diagram (location=(1.2, 4.0), show_marker=False)","mesh":"a Point [text] labelled \"upright(\"mesh\")\" drawn in diagram (location=(1.2, 6.5), show_marker=False)","out_eng":"a Vector [green] drawn in diagram (start=(6.1, 3.6), end=(8.2, 1.8))","out_web":"a Vector [green] drawn in diagram (start=(6.1, 4.4), end=(8.2, 6.2))","ray_in":"a Vector [yellow] drawn in light_fig (start=((5.0 - (4.0 * sin(theta))), (1.0 + (4.0 * cos(theta)))), end=(5.0, 1.0))","ray_out":"a Vector [red] drawn in light_fig (start=(5.0, 1.0), end=((5.0 + (4.0 * sin(theta))), (1.0 + (4.0 * cos(theta)))))","slab":"a Polygon [blue] labelled \"upright(\"material\")\" drawn in light_fig (vertices=((0.5, 0.3), (9.5, 0.3), (9.5, 1.0), (0.5, 1.0)))","textures":"a Point [text] labelled \"upright(\"textures\")\" drawn in diagram (location=(1.2, 1.5), show_marker=False)","theta":"a VariableNumber (initial_value=0.7)","web":"a Point [text] labelled \"upright(\"web\")\" drawn in diagram (location=(8.6, 6.5), show_marker=False)"},"beats":[{"start":0,"say":"You have finished a model, and you want it to look right in a web browser, a game engine, and a client's viewer. That is the job G L T F was made for.","live":[],"does":[[0,"heading_file is shown on the screen, written out."],[0,"diagram is shown on the screen, written out."],[0.8,"mesh is shown on the screen, written out."],[3.2,"web is shown on the screen, written out."],[4.44,"engines is shown on the screen, written out."],[7.44,"box is shown on the screen, written out."]]},{"start":9.76,"say":"It packs your mesh, your materials, and your textures into one tidy file. That is why people call it the JPEG of three D: compact, standard, and ready to display anywhere.","live":["diagram","heading_file","mesh","web","engines","box"],"does":[[10.68,"in_mesh is shown on the screen, written out."],[11.48,"materials is shown on the screen, written out."],[11.48,"in_mat is shown on the screen, written out."],[12.36,"textures is shown on the screen, written out."],[12.36,"in_tex is shown on the screen, written out."],[16.200000000000003,"caption is shown on the screen, written out."],[18.08,"out_web is shown on the screen, written out."],[18.839999999999996,"out_eng is shown on the screen, written out."],[21.34,"caption is hidden from the screen — left the board."],[21.34,"diagram is hidden from the screen — left the board."],[21.34,"mesh is hidden from the screen — diagram left the board."],[21.34,"web is hidden from the screen — diagram left the board."],[21.34,"engines is hidden from the screen — diagram left the board."],[21.34,"box is hidden from the screen — diagram left the board."],[21.34,"in_mesh is hidden from the screen — diagram left the board."],[21.34,"materials is hidden from the screen — diagram left the board."],[21.34,"in_mat is hidden from the screen — diagram left the board."],[21.34,"textures is hidden from the screen — diagram left the board."],[21.34,"in_tex is hidden from the screen — diagram left the board."],[21.34,"out_web is hidden from the screen — diagram left the board."],[21.34,"out_eng is hidden from the screen — diagram left the board."],[21.34,"heading_file is hidden from the screen — left the board."]]},{"start":22.54,"say":"Its materials follow an idea called physically based rendering, or P B R. Instead of painting how a surface looks under one light, you describe what the surface is made of.","live":[],"does":[[22.54,"heading_pbr is shown on the screen, written out."],[24.68,"definition is shown on the screen, written out."],[30.84,"definition (the \"what a surface is made of\" part) is emphasized."]]},{"start":33.64,"say":"Then the renderer handles the light. Move the lamp, and the reflection moves with it, worked out for you. The same material behaves believably at noon, at dusk, or in a dark room.","live":["definition","heading_pbr"],"does":[[33.64,"light_fig is shown on the screen, written out."],[33.64,"slab is shown on the screen, written out."],[33.64,"definition (the \"what a surface is made of\" part) is no longer emphasized."],[35.36,"lamp is shown on the screen, written out."],[35.36,"ray_in is shown on the screen, written out."],[35.89242769500437,"ray_out is shown on the screen, written out."],[36.08,"lamp is redrawn as the numbers it depends on change."],[36.08,"ray_in is redrawn as the numbers it depends on change."],[36.08,"ray_out is redrawn as the numbers it depends on change."],[36.08,"theta ticks to 0.12."],[40.239999999999995,"slab is indicated — a transient flash."],[41.92,"lamp is redrawn as the numbers it depends on change."],[41.92,"ray_in is redrawn as the numbers it depends on change."],[41.92,"ray_out is redrawn as the numbers it depends on change."],[41.92,"theta ticks to 1.0."],[44.83775,"definition is hidden from the screen — left the board."],[44.83775,"heading_pbr is hidden from the screen — left the board."],[44.83775,"light_fig is hidden from the screen — left the board."],[44.83775,"slab is hidden from the screen — light_fig left the board."],[44.83775,"lamp is hidden from the screen — light_fig left the board."],[44.83775,"ray_in is hidden from the screen — light_fig left the board."],[44.83775,"ray_out is hidden from the screen — light_fig left the board."]]}]},{"title":"The Material Maps","start":45.87941666666666,"end":138.72210416666667,"objects":{"fan":"a Vector [red] drawn in rough_fig (start=(5.0, 1.0), end=((5.0 + (3.2 * sin(((rough * -0.6) + 0.7)))), (1.0 + (3.2 * cos…)","fan_2":"a Vector [red] drawn in rough_fig (start=(5.0, 1.0), end=((5.0 + (3.2 * sin(((rough * -0.3) + 0.7)))), (1.0 + (3.2 * cos…)","fan_3":"a Vector [red] drawn in rough_fig (start=(5.0, 1.0), end=((5.0 + (3.2 * sin(((rough * 0.0) + 0.7)))), (1.0 + (3.2 * cos(…)","fan_4":"a Vector [red] drawn in rough_fig (start=(5.0, 1.0), end=((5.0 + (3.2 * sin(((rough * 0.3) + 0.7)))), (1.0 + (3.2 * cos(…)","fan_5":"a Vector [red] drawn in rough_fig (start=(5.0, 1.0), end=((5.0 + (3.2 * sin(((rough * 0.6) + 0.7)))), (1.0 + (3.2 * cos(…)","heading_maps":"a Heading that says \"The Metallic-Roughness Workflow\"","heading_tips":"a Heading that says \"Habits That Keep Maps Honest\"","lamp2":"a Point [yellow] labelled \"upright(\"light\")\" drawn in rough_fig (location=(2.423129251049236, 4.059368749137954))","ray_in2":"a Vector [yellow] drawn in rough_fig (start=(2.423129251049236, 4.059368749137954), end=(5.0, 1.0))","reading":"a Point [text] labelled \"upright(\"roughness\") = 0.0\" drawn in rough_fig (location=(5.5, 5.2), show_marker=False)","rough":"a VariableNumber (format_spec='.1f')","rough_fig":"a Figure (x_range=(0.0, 10.0), y_range=(0.0, 6.0))","slab2":"a Polygon [blue] labelled \"upright(\"surface\")\" drawn in rough_fig (vertices=((0.5, 0.3), (9.5, 0.3), (9.5, 1.0), (0.5, 1.0)))","table":"a Table [text] that says \"Map What you paint Base color pure color, no lighting Metallic 0 for paint, 1 for metal Roughness 0 glossy, 1 matte Normal small bumps, faked Occlusion shadow in crevices Emissive parts that glow\" (rows=(('Map', 'What you paint'), ('Base color', 'pure color, no ligh…, header=True)","tips":"a Block [text] that says \"Keep base color clean: no baked shadows. Metal is 0 or 1; in between is for dust and wear. Pack one image: occlusion in red, roughness in green, metallic in blue.\""},"beats":[{"start":45.87941666666666,"say":"G L T F describes that material with a small set of maps, called the metallic roughness workflow. Here they are, beside a lit surface we can adjust.","live":[],"does":[[45.87941666666666,"heading_maps is shown on the screen, written out."],[49.15941666666666,"table is shown on the screen, written out."],[53.39941666666665,"rough_fig is shown on the screen, written out."],[53.39941666666665,"slab2 is shown on the screen, written out."],[53.67553434097752,"lamp2 is shown on the screen, written out."],[53.67553434097752,"ray_in2 is shown on the screen, written out."],[53.67553434097752,"fan is shown on the screen, written out."],[53.67553434097752,"fan_2 is shown on the screen, written out."],[53.67553434097752,"fan_3 is shown on the screen, written out."],[53.67553434097752,"fan_4 is shown on the screen, written out."],[53.67553434097752,"fan_5 is shown on the screen, written out."]]},{"start":55.919416666666656,"say":"Base color is the pure color of the surface, with no shadows or highlights painted in.","live":["rough_fig","heading_maps","slab2","lamp2","ray_in2","fan","fan_2","fan_3","fan_4","fan_5"],"does":[[55.919416666666656,"table is shown on the screen, written out."],[57.999416666666654,"slab2 is indicated — a transient flash."]]},{"start":61.679416666666654,"say":"Metallic says whether it is metal. Zero for paint, plastic, wood or skin, and one for bare metal. Most surfaces are simply one or the other.","live":null,"does":[[61.679416666666654,"table is shown on the screen, written out."],[64.11941666666667,"table (the \"0 for paint\" part) is indicated — a transient flash."],[67.47941666666665,"table (the \"1 for metal\" part) is indicated — a transient flash."]]},{"start":72.15941666666666,"say":"Roughness controls how blurry reflections are. At zero the surface is glossy, and the reflection is one sharp beam. Raise it, and the light scatters into a soft, matte spread.","live":null,"does":[[72.15941666666666,"table is shown on the screen, written out."],[75.75941666666665,"reading is shown on the screen, written out."],[78.95941666666666,"fan is indicated — a transient flash."],[78.95941666666666,"fan_2 is indicated — a transient flash."],[78.95941666666666,"fan_3 is indicated — a transient flash."],[78.95941666666666,"fan_4 is indicated — a transient flash."],[78.95941666666666,"fan_5 is indicated — a transient flash."],[80.15941666666666,"fan is redrawn as the numbers it depends on change."],[80.15941666666666,"fan_2 is redrawn as the numbers it depends on change."],[80.15941666666666,"fan_4 is redrawn as the numbers it depends on change."],[80.15941666666666,"fan_5 is redrawn as the numbers it depends on change."],[80.15941666666666,"reading is redrawn as the numbers it depends on change."],[80.15941666666666,"rough ticks to 1.0."]]},{"start":84.57941666666666,"say":"A normal map fakes small bumps and scratches without adding geometry. Occlusion darkens the crevices where light struggles to reach. And emissive marks the parts that glow on their own, like screens or lamps.","live":["rough_fig","heading_maps","slab2","lamp2","ray_in2","fan","fan_2","fan_3","fan_4","fan_5","reading"],"does":[[84.91941666666666,"table is shown on the screen, written out."],[89.31941666666665,"table is shown on the screen, written out."],[93.31941666666665,"table is shown on the screen, written out."],[97.47941666666665,"heading_maps is hidden from the screen — left the board."],[97.47941666666665,"rough_fig is hidden from the screen — left the board."],[97.47941666666665,"slab2 is hidden from the screen — rough_fig left the board."],[97.47941666666665,"lamp2 is hidden from the screen — rough_fig left the board."],[97.47941666666665,"ray_in2 is hidden from the screen — rough_fig left the board."],[97.47941666666665,"fan is hidden from the screen — rough_fig left the board."],[97.47941666666665,"fan_2 is hidden from the screen — rough_fig left the board."],[97.47941666666665,"fan_3 is hidden from the screen — rough_fig left the board."],[97.47941666666665,"fan_4 is hidden from the screen — rough_fig left the board."],[97.47941666666665,"fan_5 is hidden from the screen — rough_fig left the board."],[97.47941666666665,"reading is hidden from the screen — rough_fig left the board."]]},{"start":98.67941666666667,"say":"A few habits keep these maps honest.","live":[],"does":[[98.67941666666667,"heading_tips is shown on the screen, written out."],[99.39941666666664,"tips is shown on the screen, written out."]]},{"start":101.91941666666666,"say":"First, keep base color clean. Lighting belongs to the renderer, so do not bake shadows into it.","live":["tips","heading_tips"],"does":[[102.15941666666666,"tips (the \"Keep base color clean\" part) is emphasized."],[103.19941666666665,"table is indicated — a transient flash."]]},{"start":109.47941666666667,"say":"Second, think in clear choices. Metal is metal and paint is paint; save the in between values for dust, rust, and worn edges.","live":null,"does":[[109.71941666666666,"tips (the \"Keep base color clean\" part) is no longer emphasized."],[109.71941666666666,"tips (the \"Metal is 0 or 1\" part) is emphasized."],[112.35941666666666,"table is indicated — a transient flash."]]},{"start":119.43941666666666,"say":"Third, know the packing. G L T F reads roughness from the green channel and metallic from the blue channel of one image, and occlusion usually fills the red. So export them together.","live":null,"does":[[119.59941666666666,"tips (the \"Metal is 0 or 1\" part) is no longer emphasized."],[119.59941666666666,"tips (the \"Pack one image\" part) is emphasized."],[123.35941666666666,"tips (the \"Pack one image\" part) is no longer emphasized."],[123.35941666666666,"tips (the \"roughness in green\" part) is emphasized."],[125.11941666666667,"tips (the \"metallic in blue\" part) is emphasized."],[125.11941666666667,"tips (the \"roughness in green\" part) is no longer emphasized."],[128.31941666666665,"tips (the \"metallic in blue\" part) is no longer emphasized."],[128.31941666666665,"tips (the \"occlusion in red\" part) is emphasized."],[130.83941666666666,"tips (the \"occlusion in red\" part) is no longer emphasized."]]},{"start":131.43941666666666,"say":"Paint what the surface is, let the light do the rest, and your model will look right wherever G L T F takes it.","live":null,"does":[[137.68043749999998,"heading_tips is hidden from the screen — left the board."],[137.68043749999998,"table is hidden from the screen — left the board."],[137.68043749999998,"tips is hidden from the screen — left the board."]]}]}]},"durationSeconds":139,"chapters":[{"title":"One File, Real Materials","startSeconds":0,"narration":"You have finished a model, and you want it to look right in a web browser, a game engine, and a client's viewer. That is the job G L T F was made for. It packs your mesh, your materials, and your textures into one tidy file. That is why people call it the JPEG of three D: compact, standard, and ready to display anywhere. Its materials follow an idea called physically based rendering, or P B R. Instead of painting how a surface looks under one light, you describe what the surface is made of. Then the renderer handles the light. Move the lamp, and the reflection moves with it, worked out for you. The same material behaves believably at noon, at dusk, or in a dark room."},{"title":"The Material Maps","startSeconds":45.87941666666666,"narration":"G L T F describes that material with a small set of maps, called the metallic roughness workflow. Here they are, beside a lit surface we can adjust. Base color is the pure color of the surface, with no shadows or highlights painted in. Metallic says whether it is metal. Zero for paint, plastic, wood or skin, and one for bare metal. Most surfaces are simply one or the other. Roughness controls how blurry reflections are. At zero the surface is glossy, and the reflection is one sharp beam. Raise it, and the light scatters into a soft, matte spread. A normal map fakes small bumps and scratches without adding geometry. Occlusion darkens the crevices where light struggles to reach. And emissive marks the parts that glow on their own, like screens or lamps. A few habits keep these maps honest. First, keep base color clean. Lighting belongs to the renderer, so do not bake shadows into it. Second, think in clear choices. Metal is metal and paint is paint; save the in between values for dust, rust, and worn edges. Third, know the packing. G L T F reads roughness from the green channel and metallic from the blue channel of one image, and occlusion usually fills the red. So export them together. Paint what the surface is, let the light do the rest, and your model will look right wherever G L T F takes it."}]}}