Unity Shader入门精要

前言

shadertoy.png-286.5kB

第2章 渲染流水线


流水线.png-83.4kB
图2.1 真实生活中的流水线

概念流水线.png-16.9kB
图2.2 渲染流水线中的三个概念阶段

CopyDataToGPU.png-86.5kB
图2.3 渲染所需的数据(两张纹理以及3个网格)从硬盘最终加载到显存中。在渲染时,GPU可以快速访问这些数据

SetRenderState.png-157.1kB
图2.4 在同一状态下渲染三个网格。由于没有更改渲染状态,因此三个网格的外观看起来像是同一种材质的物体。

DrawCall.png-59.1kB
图2.5 CPU通过调用Draw Call来告诉GPU开始进行一个渲染过程。一个Draw Call会指向本次调用需要渲染的图元列表

GPU流水线.png-82.2kB
图2.6 GPU的渲染流水线实现。颜色表示了不同阶段的可配置性或可编程性:绿色表示该流水线阶段是完全可编程控制的,黄色表示该流水线阶段可以配置但不是可编程的,蓝色表示该流水线阶段是由GPU固定实现的,开发者没有任何控制权。实线表示该shader必须由开发者编程实现,虚线表示该Shader是可选的

VertexShaderProcess.png-43kB
图2.7 GPU在每个输入的网格顶点上都会调用顶点着色器。顶点着色器必须进行顶点的坐标变换,需要时还可以计算和输出顶点的颜色。例如,我们可能需要进行逐顶点的光照

Vertex Shader.png-34.9kB
图2.8 顶点着色器会将模型顶点的位置变换到齐次裁剪坐标空间下,进行输出后再由硬件做透视除法得到NDC下的坐标

Clipping.png-25.5kB
图2.9 只有在单位立方体的图元才需要被继续处理。因此,完全在单位立方体外部的图元(红色三角形)被舍弃,完全在单位立方体内部的图元(绿色三角形)将被保留。和单位立方体相交的图元(黄色三角形)会被裁剪,新的顶点会被生成,原来在外部的顶点会被舍弃

ScreenMapping.png-22.6kB
图2.10 屏幕映射将x、y坐标从(-1, 1)范围转换到屏幕坐标系中

Screen Mapping_OpenGL_DirectX.png-26.9kB
图2.11 OpenGL和DirectX的屏幕坐标系差异。对于一张512*512大小的图像,在OpenGL中其(0, 0)点在左下角,而在DirectX中其(0, 0)点在左上角

TriangleSetupAndTraversal.png-80kB
图2.12 三角形遍历的过程。根据几何阶段输出的顶点信息,最终得到该三角网格覆盖的像素位置。对应像素会生成一个片元,而片元中的状态是对三个顶点的信息进行插值得到的。例如,对图2.12中三个顶点的深度进行插值得到其重心位置对应的片元的深度值为-10.0

FragmentShader.png-42.4kB
图2.13 根据上一步插值后的片元信息,片元着色器计算该片元的输出颜色

Per-fragment Operations.png-23.1kB
图2.14 逐片元操作阶段所做的操作。只有通过了所有的测试后,新生成的片元才能和颜色缓冲区中已经存在的像素颜色进行混合,最后再写入颜色缓冲区中

Stencil Test_Depth Test.png-93.5kB
图2.15 模板测试和深度测试的简化流程图。

Blending.png-67.6kB
图2.16 混合操作的简化流程图

why_early_depth_test.png-18.7kB
图2.17 图示场景中包含了两个对象:球和长方体,绘制顺序是先绘制球(在屏幕上显示为圆),再绘制长方体(在屏幕上显示为长方形)。如果深度测试在片元着色器之后执行,那么在渲染长方体时,虽然它的大部分区域都被遮挡在球的后面,即它所覆盖的绝大部分片元根本无法通过深度测试,但是我们仍然需要对这些片元执行片元着色器,造成了很大的性能浪费

OpenGL和DirectX.png-56.1kB
图2.18 CPU、OpenGL/DirectX、显卡驱动和GPU之间的关系

CommandBuffer.png-49.9kB
图2.19 命令缓冲区。CPU通过图像编程接口向命令缓冲区中添加命令,而GPU从中读取命令并执行。黄色方框内的命令就是Draw Call,而红色方框内的命令用于改变渲染状态。我们使用红色方框来表示改变渲染状态的命令,
是因为这些命令往往更加耗时

SmallCommand.png-107.7kB
图2.20 命令缓冲区中的虚线方框表示GPU已经完成的命令。此时,命令缓冲区中没有可以执行的命令了,GPU处于空闲状态,而CPU还没有准备好下一个渲染命令。

Batching.png-70.3kB
图2.21 利用批处理,CPU在RAM把多个网格合并成一个更大的网格,再发送给GPU,然后在一个Draw Call中渲染它们。但要注意的是,使用批处理合并的网格将会使用同一种渲染状态。也就是说,如果网格之间需要使用不同的渲染状态,那么就无法使用批处理技术

第3章 Unity Shader基础

material_shader.png-125.8kB

mesh_renderer.png-41kB

material_inspector.png-119.4kB

shader_import_settings.png-38kB

shader_compile_code.png-35.9kB

shaderlab_abstract.png-63.4kB

shader_name.png-55.5kB

shaderlab_properties.png-33.2kB

shader_compile_code.png-35.9kB

第4章 学习Shader所需的数学基础

little_cow.png-293.5kB

cartersian_fly.png-28kB

2d_cartesian.png-36.4kB

2d_cartesian_opengl_directx.png-33.1kB

cow_cartesian.png-211.8kB

3d_cartesian.png-22.7kB

left_hand.png-40.5kB

right_hand.png-40kB

left_right_hand_rule.png-75.3kB

cow_left_right.png-254.3kB

cow_left_right_hand.png-295.8kB

unity_cartesian.png-173.2kB

unity_camera_cartesian.png-25.1kB

exercise_3.png-130.8kB

vector.png-8.9kB

point_vector.png-16.1kB

vector_scalar.png-53.9kB

vector_add_sub.png-52.8kB

vector_displacement.png-22.5kB

vector_magnitude.png-8.2kB

unit_vector.png-30.7kB

projection.png-17.7kB

dot_sign.png-22.9kB

dot_cos.png-14.1kB

vector_cross_diagram.png-32.1kB

vector_cross_length.png-13kB

vector_cross.png-27.2kB

vector_cross_right_hand.png-46.6kB

exercise_cross.png-26.1kB

matrix_mul.png-25kB

niuniu.png-273.2kB

object_space.png-84.5kB

unity_transform.png-151.9kB

world_space.png-378.7kB

camera_space.png-346.2kB

camera_projection.png-299.3kB

camera_frustum.png-301.2kB

projection_frustum.png-67.3kB

projection_matrix0.png-135.1kB

orthographic_frustum.png-33.5kB

orthographic_matrix0.png-129.6kB

cow_camera.png-180.1kB

projection_matrix1.png-131kB

orthographic_matrix1.png-105.6kB

vertex_conversion.png-100.9kB

space_handness.png-75.6kB

normal_tangent.png-167.3kB

transform_normal.png-40.6kB

screen_coord.png-9kB

difference_between_left_right.png-54.6kB

difference_between_left_right_2.png-59.4kB

exercise_cross2.png-34.4kB

第5章 开始Unity Shader学习之旅

new_scene.png-74.3kB

simple_shader.png-25.4kB

cginclude.png-27kB

false_color.png-192.9kB

color_picker.png-53.8kB

frame_debugger.png-218.7kB

frame_debugger_0.png-164.5kB

2d_cartesian_opengl_directx.png-33.1kB

第6章 Unity中的基础光照

irradiance.png-60.3kB

scattering.png-37.1kB

specular.png-31.2kB

Blinn.png-32.1kB

ambient.png-35.3kB

diffuse_vertex_level.png-40.4kB

diffuse_pixel_level.png-40.1kB

diffuse_compare_all.png-86.9kB

reflect.png-9.2kB

specular_vertex_level.png-41.5kB

specular_pixel_level.png-40.8kB

specular_compare_all.png-82.5kB

第7章 基础纹理

texture_coordinate.png-349.3kB

single_texture.png-71.3kB

texture_tiling_offset.png-16.9kB

texture_properties.png-29kB

wrap_mode.png-68.9kB

texture_offset.png-68.4kB

magnification.png-256.2kB

mipmap.png-35.9kB

minification.png-271.9kB

texture_quality.png-31.7kB

heightmap.png-134.5kB

tangent_space.png-165.3kB

object_tangent_space_normal.png-320.3kB

normal_map.png-92.2kB

bump_scale.png-140.5kB

texture_type_normal.png-29.8kB

texture_type_heightmap.png-293.4kB

ramp_texture.png-119.2kB

ramp_texture_wrap_mode.png-114.2kB

mask_specular.png-142.4kB

mask.png-671.4kB

第8章 透明效果

render_order_0.png-10.7kB

render_order_1.png-10.5kB

render_order_3.png-15.3kB

render_order_2.png-30.4kB

transparent_texture.png-71.9kB

alpha_test.png-55.9kB

alpha_test_0.png-166.4kB

alpha_blend.png-55.1kB

alpha_blend_0.png-138.7kB

transparent_order_wrong.png-94.7kB

alpha_blend_zwrite.png-87.9kB

blend.png-74.1kB

alpha_test_both_sided.png-60.7kB

alpha_blend_both_sided.png-66.2kB

第9章 更复杂的光照

rendering_path_setting.png-30kB

rendering_path_camera.png-37.8kB

light_type_mode.png-30.6kB

forward_rendering.png-175.5kB

directional_ligth.png-51.6kB

point_ligtht.png-89.4kB

enable_light.png-63.6kB

spot_light.png-74.5kB

two_lights.png-79.4kB

multi_lights.png-56.6kB

frame_debugger.png-103.3kB

multi_lights_0.png-218.4kB

multi_lights_1.png-100.8kB

light_not_important.png-70.8kB

light_shadow.png-32.8kB

mesh_renderer.png-20.3kB

shadow_0.png-34.4kB

shadow_1.png-89kB

shadow_2.png-40.5kB

shadow_frame_debugger.png-81.6kB

shadow_frame_debugger_0.png-83.1kB

shadow_frame_debugger_1.png-88.6kB

shadow_frame_debugger_2.png-175.1kB

alpha_test_shadow_0.png-62.8kB

alpha_test_shadow_1.png-66.2kB

alpha_test_shadow_2.png-75.7kB

alpha_blend_shadow0.png-88.6kB

alpha_blend_shadow1.png-94.9kB

第10章 高级纹理

cubemap_sample.png-20.1kB

skybox_mat.png-159kB

lighting_skybox.png-28.7kB

skybox_scene.png-346.5kB

render_into_cubemap.png-123kB

render_to_cubemap.png-133.8kB

reflection.png-400.5kB

snell_law.png-28.6kB

refraction.png-377.1kB

fresnel.png-64.6kB

mirror.png-342.1kB

render_texture.png-113.3kB

glass.png-462.9kB

glass_cubemap.png-140.2kB

procedural_texture.png-111.3kB

procedural_texture_multi.png-62.8kB

subtance_material.png-41.1kB

subtance_material_asset.png-78.8kB

subtance_material_multi.png-183.5kB

第11章 让画面动起来

boom.png-140.2kB

boom_sequence.png-37.6kB

scroll_background.png-228.5kB

river.png-242.7kB

basis_vector.png-76.2kB

billboard.png-86.8kB

wrong_shadow.png-147.3kB

right_shadow.png-43.8kB

第12章 屏幕后处理效果

brtsatcon.png-651.1kB

script_shader.png-16.6kB

edge_detection.png-717.9kB

convolution.png-15.1kB

edge_detection_kernel.png-19.8kB

edge_only.png-266.5kB

gaussian_blur.png-703.8kB

gaussian_kernel.png-21.2kB

800px-Elephants_Dream_-_Emo_and_Proog.jpg-41.9kB

bloom.png-772.3kB

motion_blur.png-770.9kB

第13章 使用深度和法线纹理

projection_matrix.png-150.4kB

orthographic_matrix.png-129.6kB

check_texture.png-161.3kB

check_texture_code.png-84kB

fog.png-627.5kB

frustum.png-33.5kB

world_dist.png-18.6kB

over_edge.png-819kB

edge_detect.png-452.9kB

Roberts.png-15.7kB

第14章 非真实感渲染

okami_announce_screens6.jpg-169.9kB

toon_shading.png-74.1kB

antialiasing.png-138.4kB

TAM.png-127.6kB

hatching.png-268.1kB

第15章 使用噪声

burn.png-429.1kB

burn_noise.png-84.8kB

water.png-722.5kB

cubemap.png-128.3kB

water_noise.png-202kB

fog.png-493.9kB

fog_noise.jpg-13kB

第16章 Unity中的渲染优化技术

render_static_window.png-156.1kB

profiler.png-122.5kB

frame_debugger.png-84.3kB

dynamic_batching0.png-138.9kB

dynamic_batching1.png-138.9kB

static_batching0.png-112.9kB

mark_static.png-22.3kB

static_batching1.png-112.3kB

combined_mesh.png-152.1kB

vbo.png-92kB

static_batching2.png-113.6kB

advance_texture.png-96.6kB

第17章 Surface Shader探秘

bumped_diffuse.png-164.7kB

generated_code.png-28.9kB

pipeline.png-171.9kB

normal_extrusion.png-127.3kB

第18章 基于物理的渲染

reflect_refract.png-26.9kB

rought_smooth.png-64.6kB

subsurface_scattered_light.png-36.3kB

surface.png-42.5kB

brdf.png-47.1kB

m_h.png-90.5kB

standard_shader.png-276.6kB

calibration_charts.png-387.8kB

metallic_workflow.png-181.6kB

pbs_scene.png-625.7kB

lighting_inspector.png-48.9kB

reflect_source.png-349.6kB

direction_light.png-29.3kB

bounce_intensity.png-645.9kB

reflection_probe.png-615.8kB

interreflection.png-338.2kB

linear_space.png-611.4kB

gamma_chart.png-29.3kB

encoding_display_gamma.png-37.5kB

gamma_light.png-32.1kB

gamma_blur.png-85.2kB

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>