Chapter 9 - Hlsl - Shader

Dịch từ chương 9 cuốn XNA 3.0 Beginning Programming bởi HuyetSat 2011

1 Email: [email protected] Blog : vn.360plus.Yahoo.com/HS-IT

Chương 9: Quá trình tạo hình, shader, và hiệu ứng

In this chapter, you’ll learn some of the concepts related to the rendering pipeline, shaders,

and effects. The rendering pipeline is responsible for rendering a 3D scene into a 2D image,

which can then be drawn on the screen. You can use shaders to program some stages of the

rendering pipeline, and use effects to describe a combination of shaders and configurations for

the fixed stages of the rendering pipeline. This flexibility allows you to create custom visual

effects, improving the visual aspect of the final image.

Trong chương này, bạn sẽ học về một số nội dung liên quan đến quá trình tạo hình, các shader và hiệu

ứng. quá trình tạo hình đc hiểu là sự biến đổi không gian 3D trở thành một hình ảnh 2D để nó có thể thể

hiện đc trên màn hình. Bạn có thể dùng shader để lập trình một số công đoạn trong quá trình tạo hình

và dùng hiệu ứng để miêu tả cách phối hợp các shader lại với nhau và cấu hình nên một bước cố định

trong quá trình tạo hình. Các bước linh hoạt này cho phép bạn tạo ra các hiệu ứng trực quan tùy ý, cũng

như nâng cấp sức hấp dẫn của hình ảnh cuối cùng (mà bạn tạo ra)

Rendering Pipeline

Quá trình tạo hình To visualize a 3D scene on the screen, the scene must be transformed into a 2D image. The

process that transforms a 3D scene into an image is called rendering. Figure 9-1 shows a high-

level diagram of the rendering pipeline used by XNA.

Để có thể quan sát không gian 3D, không gian đó phải đc chuyển thành một bức hình 2D. quá trình biến

đổi này đc gọi là rendering (Tạo hình). Hình dưới sẽ cho thấy biểu đồ các cấp độ tạo hình đc dùng bởi

XNA:



An object in a 3D scene is described through its mesh, which is the collection of its vertices

(and indices, if applicable). The vertices in a mesh can have many different attributes, such as

position, color, normal, and texture coordinate, as explained in Chapter 8.

Một đối tượng trong không gian 3D đc tạo thông qua các mảnh (mesh) của nó, nó là 1 tập hợp các

vertex (và indices, nếu có) các vertex trong mesh có thể có nhiều tính chất khác nhau như là vị trí, màu,

vector pháp tuyến , hệ tọa độ texture, như giải thích ở chương 8

As illustrated in Figure 9-1, at the beginning of the rendering process, the vertices of the

object’s mesh are sent to the rendering pipeline, where they go through the stages of vertex

processing, rasterization, and pixel processing. At the end of this process, many pixels are

generated, ready to be stored in the scene’s final image.

Như hình 9-1 đã minh họa, vào lúc bắt đầu của quá trình tạo hình, các vertex của từng mesh đc gửi đến

các đường dẫn tạo hình, nơi mà chúng sẽ bước vào công đoạn xử lý vertex, chuyển đổi dạng , và xử lý

pixel. Vào cuối quá trình xử lý này, các pixel đã đc tạo ra và chúng sẵn sàng gộp lại tạo nên bức hình 2D

thể hiện trên màn hình.



In the old versions of the DirectX and OpenGL application programming interfaces (APIs),

all the stages of the rendering pipeline were fixed (preprogrammed). This meant that a fixed set

of effects was available to game programmers. This forced all games to use the same rendering

processes, allowing them to change only a few predefined parameters. The result was the release

of many game titles with similar graphics.

Trong các bản cũ của DirectX và OpenGL APIs, mọi công đoạn của quá trình tạo hình đều có định (đã đc

làm sẵn) Nghĩa là các hiệu ứng đã đc làm sẵn cho các nhà phát triển game. Nó ép buộc mọi game đều có

quá trình tạo hình giống nhau, và cũng chỉ cho phép thay đổi một vài tham số của hiệu ứng đã được lập

trình sẵn. kết quả là rất nhiều tựa game ra đời mà đồ họa của chúng lại tương tự nhau.

From DirectX 8.1 onward, it became possible to program some of the stages of the rendering

pipeline through the creation of small programs called shaders. Shaders allow you to define

which data is input and output from each programmable stage of the graphics processing unit

(GPU), and, more important, the processing that is happening within each stage. Using shaders,

you can create many new effects for games that weren’t possible using the fixed pipeline.

Từ DirectX 8.1 đến nay đã cho phép lập trình một vài công đoạn trong quá trình tạo hình thông qua việc

viết ra các chương trình nhỏ đc gọi là shader. Shader cho phép bạn xác định những dữ liệu vào và ra cho

mỗi công đoạn có khả năng code đc trên từng đơn vị xử lý đồ họa (GPU), và , quan trọng hơn, quá trình

xử lý này đc tạo ra cho từng bước, nên sử dụng shader, bạn có tạo hìnhể tạo nhiều hiệu ứng mới cho

game thứ ko phụ thuộc phải sử dụng mất cứ đg dẫn cố định nào.

In XNA, you use shaders to render any object to the screen. To ease game development

without needing to program your own shaders, XNA provides some helper classes that contain

a basic set of shaders and effects. For example, you can use the SpriteBatch class to draw 2D

sprites, and the BasicEffect class to draw 3D models. These two classes use shaders in a way

that’s transparent to you. As their names imply, these classes support only basic rendering.

Trong XNA, bạn sử dụng shader để tạo hình bất kỳ đối tượng nào. Để tiếp cận dễ dàng hơn cho

developer, XNA đã cung cấp sẵn lớp cơ bản cho việc thiết lập shader và hiệu ứng. vdu như, bạn có thể

dùng SpriteBatch để draw 2D sprite, và basicEffect để draw model 3D. hai lớp này sử dụng shader mà

bạn ko hề nhận ra chúng. Và đúng như tên gọi, những lớp này chỉ hỗ trợ những cách tạo hình đơn giản.

The SpriteBatch class will render your images just as they’ve been saved on disk, but don’t ask it to



add any spotlights, reflective objects, or effects like rippling in your images. The BasicEffect

class can render your 3D world using only basic lighting. If you want to program some fancier

effects, you can create your own shaders.

Lớp SpriteBatch sẽ tạo hình bức ảnh 2 giống hết như lúc nó đc lưu trên đĩa những sẽ ko thêm cho nó bất

kỳ chùm ánh sáng, ánh sáng phản chiếu hoặc các hiệu ứng như là làm nhiễu sóng trên bức ảnh của bạn.

còn hiệu ứng basicEffect có thể tạo ra cho bạn một không gian 3D sử dụng ánh sáng cơ bản. nếu bạn

muốn có nhiều hiệu ứng thú vị hơn, hãy tự viết ra shader cho riêng mình.

Shaders Shaders are small programs that execute inside the GPU and define how the data received from

your XNA program is processed in the programmable stages of the rendering pipeline. Shaders

are most commonly written in the High Level Shading Language (HLSL).

Two shaders are generally applied: a vertex shader and a pixel shader. The rasterization

stage is executed between the vertex shader and the pixel shader.

Shader là những chương trình nhỏ chạy bên trong GPU và xác định các dữ liệu nhận từ XNA để đc tiến

hành xử lý lại các công đoạn tạo hình có thể lập trình đc (coi lại cái hình đầu chương). Shader thông

thường đc viết bởi ngôn ngữ HLSL.

Có 2 loại shader thường di chuyển áp dụng: vertex shader và pixel shader. Quá trình Chuyển đổi hình

dạng (rasterization Stage) là quá trình thực hiện trung gian giữa vertex shader và pixel shader.

Vertex Shader The shader used in the vertex processing stage, shown in Figure 9-1, is called the vertex shader.

The basic task of the vertex shader is to read the original coordinates of the vertices from your

XNA program, transform them to 2D screen coordinates, and present them to the next stage.

Additionally, along with manipulating coordinates, you can also choose to process other attributes

of each vertex, such as its color, normal, and so on.

Shader này đc sử dụng trong quá trình xử lý vertex, như hình 9-1 nó đc gọi là vertex shader. Nhiệm vụ cơ

bản của vertex shader và đọc các tọa độ 3D từ các vertex trong chương trình XNA của bạn, sau đó

chuyển chúng về hệ tọa độ 2D trên màn hình, và đưa kết quả thu đc đến các bước tiếp theo (trong quá

trình xử lý). Thêm vào đó, cùng với việc thao tác với các tọa độ, bạn cũng có thể xử lý nhiều tính chất

khác của mỗi vertex như màu, vector pháp tuyến và v.v…



Vertex shaders allow you to execute many tasks, such as solids deforming, skeletal animation,

and particle motion.

Vertex shader cho phép bạn chạy nhiều nhiệm vụ, như xác định hình dạng, hoạt hình khung xương và

chuyển động của phần tử particle (Phần tử rất nhỏ - thường đc dùng làm effect)

Rasterization

Chuyển đổi hình dạng In the rasterization stage, your GPU determines which screen pixels each triangle occupies. All

of these pixels are sent to the pixel shader (discussed next), allowing you to do one final phase

of processing.

Figure 9-2 illustrates a rasterized triangle, which generates many pixels. Note especially

that the vertex attributes are linearly interpolated between all the generated pixels.

Trong quá trình Chuyển đổi hình dạng, GPU xác định từng pixel trên màn hình mà chúng thuộc về mỗi

một tam giác nào đó. Tất cả các pixel này sẽ đc chuyển cho pixel shader (Nói ở phần sau) , để thực hiện

quá trình xử lý cuối cùng.

Hình 9-2 minh họa một tam giác đã đc chuyển đổi, nó sẽ tạo ra rất nhiều pixel. Chú ý vùng tô đậm là

những vertex đc thao tác xếp theo các đường thẳng và vùng ở giữa chúng cũng dùng để tạo ra các pixel.



Pixel Shader The main task of the pixel shader is to receive a pixel as input, calculate the final color of the

pixel, and pass it on to the output merger. Each pixel can provide the pixel shader with a wide

variety of data, generated by your vertex shader and linearly interpolated by the rasterizer. This

allows your pixel shader to adjust the color of the pixel according to the lighting conditions,

add reflections, perform bump mapping, and more. You can also use a pixel shader to apply

postprocessing effects over an entire rendered scene, such as brightness, contrast and color

enhancements, saturation, and blur.

Nhiệm vụ chính của pixel shader và nhận thông tin từ các pixel, tính toán ra màu cuối cùng của từng

pixel shader và đưa nó vào quá trình ráp các điểm ảnh. Mỗi pixel có thể cung cấp cho pixel shader một

lượng lớn các dữ liệu một cách phong phú, các dữ liệu đc tạo ra trong vertex shader và bởi quá trình

Chuyển đổi hình dạng. tất cả những điều trên cho phép bạn cân chỉnh màu sắc của từng pixel theo các

điều kiện về ánh sáng, hoặc thêm các sự phản chiếu ánh sáng, trình diễn các bề mặt sù xì của địa hình,

và còn hơn thế nữa. bạn có thể dùng pixel shader để áp dụng hiệu ứng xử lý mắt nhìn (postprocessing) ,



hiệu ứng này có ảnh hưởng trên toàn bộ scene mà bạn tạo hình, như là độ sáng, độ tương phản , cân

chỉnh màu, độ rõ nét, độ mờ…

Additionally, the pixel shader can change the depth of the pixel. This depth is used by the

output merger to decide which pixels are drawn and which are not drawn. By default, this depth

indicates how far the originating triangle is from the camera. However, if you want to influence

the decision of the output merger, you can specify this value yourself.

Thêm vào đó, pixel shader có thể thay đổi độ sâu của pixel. Độ sâu đc dùng bởi quá trình ráp các điểm

ảnh để quyết định xem pixel nào sẽ đc draw còn cái nào thì ko (tức là cái nào sẽ chồng lên – che khuất

cái nào). Như mặc định, độ sâu đc tính theo khoảng cách từ một hình tam giác (đã đc chuyển đổi hình

dạng) đến vị trí camera. Tuy nhiên nếu bạn muốn bắt ép quá trình ráp điểm ảnh ở tính năng này, bạn có

thể đặt các giá trị độ sâu mà bạn muốn.

High-Level Shading Language XNA natively supports shader programming through Microsoft’s HLSL. HLSL has a few built-

in functions, which include math operations, texture access, and flow control. The types of

data that HLSL supports are similar to those used in the C language, with the exception of

vectors, matrices, and samplers.

XNA hỗ trợ các ngôn ngữ lập trình shader thông qua HLSL của microsoft. HLSL có một vài hàm xây dựng

sẵn, nó sẽ bao gồm các phép tính toán học, các truy suất texture và điều khiển luồng. các kiểu dữ liệu

mà HLSL hỗ trợ tương tự với C, ngoại trừ các vector, ma trận và bộ lấy mẫu.

HLSL Data Types HLSL supports many different data types, including scalars, vectors, and matrices. Table 9-1

shows the scalar data types present in the language. Note that it is possible to create vectors

and matrices for all the scalar types present in the language, such as float2, float4, bool3x3,

double2x2, and so on.

HLSL hỗ trợ nhiều kiểu dữ liệu khác nhau, bao gồm kiểu vô hướng , vector và ma trận. bảng 9-1 cho thấy

các kiểu vô hướng. chú ý để tạo ra vector hoặc ma trận cần dựa trên các kiểu vô hướng trong ngôn ngữ,

như là float2, float4, double2x2 và v.v…



Another data type present in HLSL is the sampler type, which is used to sample data from

textures. Different sampler types, such as sampler1D, sampler2D, and sampler3D, are used to sample

1D, 2D, and 3D textures, respectively. Associated with the sampler type are a few states, which

specify the texture to be sampled, the type of filtering used, and how the texture is addressed

(wrapped).

Một kiểu dữ liệu khác trong HLSL là kiểu sampler. Nó dùng để lấy mẫu dữ liệu từ texture. Nhiều loại

sampler khác nhau (VD: sampler1D, sampler2D và sampler3D) đc dùng để lấy mẫu các texture 1D, 2D và

3D theo thứ tự. cùng với các kiểu sampler có thêm một vài công đoạn, để xác định chính xác vùng

texture sẽ đc lấy mẫu, các bộ lọc có thể sử dụng, và texture đc bao gói lại ntn.

Samplers should be defined at the top of your HLSL code file. Here is an example of a

sampler for a 2D texture:

sampler nên đc khai báo vào phần đầu trong mã HLSL. đây là ví dụ cho một sampler của một texture 2D:

// Declares the input texture

texture skyTexture;

// Declares the sampler used to sample the skyTexture

sampler2D skySampler = sampler_state

{

Texture = skyTexture;



MinFilter = Linear;

MagFilter = Linear;

MipFilter = Linear;

AddressU = Wrap;

AddressV = Wrap;

AddressW = Wrap;

}

The texture state represents the texture to be sampled, which can be read only through

the use of a sampler. MinFilter, MagFilter, and MipFilter are the filtering states, and AddressU,

AddressV, and AddressW are the addressing states.

Trạng thái texture ở trên biểu diễn cho một texture có thể đc lấy mẫu, nó có thể đc đọc thông qua các thành phần của sampler. ở đây MinFilter, MagFilter, and MipFilter Là các bộ lọc còn

AddressU, AddressV, and AddressW các các trạng thái lấy địa chỉ

Note The documentation for the DirectX SDK includes a complete reference for HLSL. You can access this

reference at http://msdn2.microsoft.com/en-us/library/bb509638.aspx.

Chú ý: tài liệu cho DirectX về HLSL đã bao gồm tất khả những cái có liên quan đến nó, bạn có thể truy

cập vào nó ở: http://msdn2.microsoft.com/en-us/library/bb509638.aspx.

Uniform and Varying Inputs

Input cố định và Input thay đổi

HLSL has two types of input data types:

HLSL có 2 loại input:

Uniform input data: This is the data that is constant for all vertices/pixels in a shader during

the processing of its entire input data. For example, during the rendering of a tree, its texture,

the world matrix, and lighting conditions are constant. The uniform input data in a shader



is set from within your XNA application.

Kiểu input cố định: kiểu dữ liệu này là dạng hằng số cho tất cả các vertex cũng như pixel của shader

trong khi đang xử lý toàn bộ dữ liệu vào. Ví dụ như, khi tạo hình cái cây, texture của nó, matran world và

các điều khiện ánh sáng là hằng số. dữ liệu kiểu này sẽ đc thiết lập bên trong ứng dụng XNA.

Varying input data: This is the data that is changed in each execution of a shader. For

example, during the rendering of a tree, the vertex shader needs to process all vertices of

the tree. This means that the information carried inside the vertex is changed for each cycle

of the vertex shader. Unlike with the uniform input data, you declare the varying input

data using semantics, as discussed in the next section.

Kiểu dữ liệu thay đổi: là các dữ liệu sẽ thay đổi do bị shader biến đổi thông qua quá trình chạy shader.

Như khi tạo hình cái cây, vertex shader cần xử lý toàn bộ các vertex của cây, nghĩa là những thông tin về

vertex trên cái cây sẽ bị biến đổi bởi mỗi chu kỳ xử lý của vertex shader.

Semantics

Ngữ nghĩa

Semantics are predefined words that HLSL uses to map input and output data to variable names.

For example, each vertex of your 3D objects might contain one float4 containing the 3D posi-

tion, and another float4 containing two texture coordinates. How is your vertex shader supposed

to know which of them to use as the position?

Semantic là từ đã được định nghĩa từ trước (của HLSL), nó dùng để sắp xếp các dữ liệu input và output

vào các biến trong code HLSL. ví dụ, mỗi vertex của một đối tượng 3D có thể chứa 1 biến float4 chứa

một vị trí trong không gian 3D, một biến float4 khác chứa 2 tọa độ lấy mẫu texture. Làm sao mà HLSL

biết đc cái nào trong số chúng đc sử dụng như là một vị trí trong không gian?

The solution is to add the POSITION0 semantic in the vertices’ processing stage to map the

position attribute of each vertex to a varying variable, as follows:

Có một giải pháp là thêm semantic POSITION0 Vào trong quá trình xử lý vertex để chỉ ra các thuộc tính vị

trí của mỗi vertex trên các kiểu dữ liệu thay đổi, như sau:



float4 vertexPosition : POSITION0;

The semantics are required in all varying input data (received from the application or

passed between the rendering stages). For example, all the data output from the vertex shader

that will be used in the pixel shader must be associated with a semantic. You will see some

examples of using semantics in the “Creating a Simple Shader” section later in this chapter.

Semantics are not case-sensitive and are specified after the variables’ names using a colon (:).

Tables 9-2 and 9-3 show some vertex shader semantics

Các semantic đc bắt buộc phải có trong mọi giá trị input thay đổi (giá trị này đc gán từ ứng dụng XNA

hoặc đc tạo ra và đưa vào trong khi đang diễn ra quá trình xử lý). Ví dụ, tất cả các dữ liệu output từ

vertex shader sẽ đc pixel shader sử dụng như là input của mình. Tất cả các output đó đc khai báo với

Semantic. Bạn sẽ thấy vài ví dụ về sử dụng semantic trong phần “Tạo một Shader đơn giản” trong phần

sau của chương. Semantic ko phần biệt chữ hoa-thường và đc đặt sau tên biến bằng cách thêm dấu 2

chấm (:) Hình dưới cho thấy các semantic của vertex shader:



You use the input vertex shader semantics for varying data received by the vertex shader.

Some commonly used semantics are POSITION, COLOR, NORMAL, and TEXTURE. You use the TANGENT

and BINORMAL semantics if the vertex has tangent or binormal vectors, which you’ll need when

you want to do some bump mapping in your effect. You use the BLENDINDICES and BLENDWEIGHT

semantics when the vertices are linked to bones. Bones are used to deform the vertices of a

mesh (as explained in Chapter 12).

Bạn dùng input vertex shader semantic cho nhiều loại dữ liệu , thứ sẽ đc nhận bởi vertex shader. Một số

semantic thường dùng là POSITION, COLOR, NORMAL, and TEXTURE. . bạn dùng TANGENT và BINORMAL

nếu vertex cần có các vector tiếp tuyến hoặc vector binormal, những cái này bạn sẽ cần dùng cho hiệu

ứng bump mapping (Tạo địa hình). Bạn dùng BLENDINDICES and BLENDWEIGHT khi các vertex cần liên

kết riêng đến từ bone. Bones dùng để xác định hình dạng các vertex khi chúng ta chỉ xem xét 1 mesh của

model (1 model thì có 1 hoặc nhiều mesh)

The POSITION semantic is the only required output of the vertex shader. If you want to pass

other data from the vertex shader to the pixel shader, TEXCOORD[n] should be used.

The [n] is an optional integer that defines the number of the resource to be used. For example,

if a model has three textures, the [n] of its TEXCOORD semantic can be 0, 1, or 2; so, TEXCOORD0,

TEXCOORD1, and TEXCOORD2 are valid input semantics for the vertex shader. Table 9-4 shows

some pixel shader semantics.

Semantic POSITION chỉ bắt buộc ở output của vertex shader. Nếu bạn muốn đưa các dữ liệu khác từ

vertex shader vào pixel shader. TEXCOORD[n] sẽ đc sử dụng. chỉ số [n] là một số nguyên tùy chọn, nó sẽ

xác định chỉ số tài nguyên sẽ đc sử dụng. ví dụ, một model có 3 texture, thì chỉ số [n] của semantic



TEXCOORD có thể là 0,1 hoặc 2 tức là TEXCOORD0, TEXCOORD1, and TEXCOORD2 sẽ là các input

semantic đúng ngữ pháp cho vertex shader sử dụng. hình 9-4 cho thấy một số pixel shader semantic.

Because the pixel shader is executed after the rasterization stage, the available input

semantics are the pixel color and some texture coordinates. The texture coordinates address

the texture positions that are mapped into the current pixel, and these coordinates can be used

to transfer data from your vertex shader to your pixel shader.

Bởi vì pixel shader bắt đầu thực thi sau quá trình chuyển đổi hình dạng, các input semantic có thể dùng

cho pixel shader là màu sắc cho từng pixel và các tọa độ lấy mẫu texture. Tọa độ texture là vị trí trên

texture, có thể lấy mẫu để cho vào từng pixel hiện tại (trong pixel shader). Và những giá trị tọa độ này có

thể đc sử dụng để chuyển dữ liệu từ vertex shader của bạn đến pixel shader.

The final data output from the pixel shader is the pixel color and depth, where the output

of the pixel color is obligatory, and the output of the pixel depth is optional.

Dữ liệu output cuối cùng từ pixel shader chính màu màu trên pixel và độ sâu của nó (xác định xem pixel

nào đứng trước pixel nào) giá trị màu là bắt buộc nhưng độ sâu của pixel là tùy ý, không có cũng đc.

Functions

Hàm

HLSL allows the creation of functions with syntax like the C language, where each function has



a declaration and a body. The function declaration contains the function name and return

type, and might have a list of parameters. Also, the return type of a function may have a semantic

associated with it.

HLSL cho phép tạo ra nhiều hàm với cú pháp tương tự C. mỗi hàm cần có phần khai báo và phần thân.

Khai báo hàm chứa tên hàm và kiểu trả về, có thể có một list tham số. và kiểu trả về của hàm có thể có

cả semantic có liên quan với nó.

The following is a function used as the entry point for the pixel shader:

Dưới đây là một hàm được dùng như là hàm bắt đầu thực hiện công việc của pixel shader:

float4 simplePS(float4 inputColor : COLOR0) : COLOR0

{

return inputColor * 0.5f;

}

Because the simplePS function is used as the entry point to the pixel shader, its parameters

must have a semantic associated. In this case, the simplePS function scales the received color

parameter by a factor of 0.5 and returns it as the final pixel color. Note that the parameters of

the function can have other modifiers, such as in, out, and inout, which are used to define

input, output, and input/output parameters.

Bởi vì hàm simplePS dùng để bắt đầu pixel shader, tham số của nó phải có semantic phù hợp tương ứng.

trong trường hợp này, hàm biến đổi màu mà nó nhận vào bằng cách nhân nó với hệ số 0.5 và trả về màu

cuối cùng trên pixel. Chú ý tham số của hàm có thể được đánh dấu thêm vào như: in,out hoặc inout, sẽ

xác định các tham số đó thuộc loại input, output,hoặc input/output .

We’ll demonstrate how to define the functions that will be used as the entry point for the

vertex and pixel shaders in the “Techniques, Passes, and Effects” section later in this chapter.

A small set of intrinsic functions are built into HLSL. These include math operations, texture

access, and flow control.

Chúng ta sẽ bắt tay vào định nghĩa một hàm đc dùng như để bắt đầu quá trình cho vertex shader và

pixel shader trong phần “Techniques, Passes, and Effects” Ở mục sau của chương. ở dưới là một bảng



các hàm đã đc xây dựng sẵn (built-in) trong HLSL. bao gồm các hàm thực hiện các phép tính toán, truy

cập texture và cả điều khiển luồng.

Creating a Simple Shader

Tạo shader đơn giản

In this section, you’ll put together what you’ve learned, and create your first shader using HLSL.

As a good habit, you should start by declaring the uniform and varying variables:

Trong phần này, bạn sẽ kết hợp những gì mà bạn vừa học, và tạo 1 shader đơn giản bằng HLSL. môt thói

quen tốt là bạn hãy bắt đầu bằng cách khai báo các biến cố định và biến thay đổi:

// Matrix received from the application - Uniform

// (World * View * Projection)

float4x4 matWVP : WorldViewProjection;

// Struct used for the input vertex - Varying



struct vertexInput //<-Giá trị nhập vào cho quá trình vertex shader:

{

float4 position : POSITION0; //<- vị trí của vertex trên đối tượng 3D khi di chuyển đưa vào vertex shader

};

// Struct used to pass the VS output to the PS input - Varying

struct vertexOutput//<-Giá trị xuất ra của quá trình vertex shader:

{

float4 hposition : POSITION;//<-vị trí vertex sau khi đc vertex shader biến đổi

float3 color : COLOR0;//<-màu sắc tại vertex đó, nó đc truyền vào pixel shader để xử lý típ

};

Your shader will expect the matWVP matrix to be set by your XNA application. This world-

view-projection matrix is created by the camera, and it should be set by your XNA program.

It is needed when your vertex shader transforms 3D positions to 2D screen coordinates.

You use the vertexInput struct to define the information that the vertex shader can expect.

As you can see, this vertex shader will be capable of processing all vertices that contain position

data.

Shader của bạn sẽ trông đợi ma trận WVP sẽ được thiết lập trong ứng dụng XNA của bạn (tức là trong

XNA code sẽ có đoạn truyền các giá trị cho các tham số này của HLSL). ma trạn WVP này đc tạo từ

camera và camera đó đc viết trong XNA (mình có code khá nhiều camera trên blog, bạn có thể tham

khảo camera là gì và các lập trình camera trên đó). Ma trận này cần thiết để chuyển một vị trí 3D trong

không gian về vị trí 2D trên màn hình máy tính. Bạn dùng cấu trúc vertexInput để xác định những thông

tin mà vertex shader cần có. Và như bạn thấy, vertex shader có khả năng xử lý mọi vertex , chỉ cần nó có

chứa dữ liệu về vị trí của vertex đó.

You use the vertexOutput struct to define the kind of data that is passed from the vertex

shader to the rasterizer, and after linear interpolation, to the pixel shader. Your pixel shader

will generate the mandatory position, as well as a color.



Bạn dùng cấu trúc vertexOutput để xac định loại dữ liệu sẽ đc đưa vào quá trình chuyển đổi hình dạng

(rasterizer ) từ kết quả của quá trình vertex shader. Sau các thao tác xử lý, nó đc đưa vào pixel shader.

Pixel shader của bạn sẽ tạo ra các vị trí bắt buộc khác, Vdu như màu của mỗi pixel.

An important note here is that the vertex position output by the vertex shader is not acces-

sible by the pixel shader. This 2D screen position is required by the rasterizer, so a good way to

remember that you cannot access it from your pixel shader is to keep in mind that it is “consumed”

by the rasterizer. If you need this 2D screen position in your pixel shader, you should pass it as

an additional TEXCOORDINATE[n] semantic.

Chú ý quan trọng ở đây là vị trí output của vertex là kết quả của quá trình xử lý vertex shader và nó ko

thể (và ko đc) bị truy suất, thay đổi bởi pixel shader. Một vị trí 2D trên màn hình tạo ra nhờ quá trình

biến đổi hình dạng, do đó cách tốt nhất là giữ cho các position này đọc lập với pixel shader. Nếu bạn

thực sự cần phải đưa một vị trí 2D trên màn hình vào pixel shader, hãy đưa nó vào cùng với việc bổ sung

thêm semantic TEXCOORDINATE[n]

Next, declare the vertex shader itself:

Phần tiếp theo là khai báo vertex shader:

// Vertex shader code

pixelInput SimpleVS(vertexInput IN)

{

pixelInput OUT;

// Transform the vertex position

OUT.hposition = mul(IN.position, matWVP);

OUT.color = float3(1.0f, 1.0f, 0.0f);

return OUT;

}

The vertex shader is called on each vertex rendered by your XNA application. This vertex is

accepted by your shader as a vertexInput object and processed into a pixelInput object. In the



SimpleVS function, you calculate the output 2D screen position by transforming (multiplying) it by

the matWVP matrix. The output vertex color is set to yellow, RGB (1, 1, 0).

Vertex shader đc gọi cho mỗi vertex đc tạo hình bởi ứng dụng XNA của bạn. vertex này đc nhập vào

vertex shader theo kiểu vertexInput và đc xử lý để trở thành pixelInput (để đưa vào pixel shader). Trong

hàm SimpleVS, bạn tính toán một vị trí output 2D trên màn hình bằng cách biến đổi (Phép nhân) với ma

trận WVP. Màu đưa ra ngoài đc đặt là màu vàng RBG(1,1,0).

Next, you define the pixel shader:

Tiếp, bạn khai báo pixel shader:

// Pixel shader code

float4 SimplePS(pixelInput IN) : COLOR0

{

return float4(IN.color.rgb, 1.0f);

}

This pixel shader simply returns the color received from the vertex processing stage. This

color will be used as the final pixel color.

Pixel shader đơn giản là trả về màu đc nhận từ quá trình xử lý vertex shader. Và màu trả về này chính là

màu cuối cùng của pixel (và nó sẽ thể hiện màu đó trên screen 2D)

Great! Now you have defined a vertex shader and a pixel shader. In your XNA application,

however, you don’t specify separately which vertex shader and pixel shader should be used to

render your triangles to the screen. Instead, you specify which technique to use.

Thật tuyệt! bây giờ bạn đã biết cách định nghĩa vertex shader và pixel shader. Trong XNA, bạn ko cần

phải phân chia vertex shader và pixel shader để sử dụng nó để tạo hình các tam giác trên màn hình, thay

vào đó, bạn sẽ xác định công nghệ (technique) của shader mà nó sẽ sử dụng.

(Nhắc lại là mọi đối tượng 3D điều đc tạo hình theo cách nối các vertex thành tam giác vào tạo hình từng

tam giác – vì tam giác và đối tượng hình học cơ bản, từ tam giác bạn sẽ draw đc bất cứ hình thù nào

khác, Ví dụ: hình lập phương tạo từ 12 tam giác)

Techniques, Passes, and Effects In its most basic form, a technique is nothing more than the combination of a vertex shader and



a pixel shader. The following is a technique that uses the vertex shader and pixel shader you

just defined:

Chúng ta sẽ bắt đầu ở dạng đơn giản nhất, technique có có gì hơn là một sự kết hợp của vertex shader

và pixel shader. Dưới đây là một technique sử dụng vertex shader và pixel shader mà bạn vừa mới khai

báo ở trên:

technique basicTechnique

{

pass p0

{

VertexShader = compile vs_2_0 SimpleVS();

PixelShader = compile ps_2_0 SimplePS();

}

}

A technique also defines for which shader model the shader should compile. In this case,

you’re using the shader model 2.0 for both shaders. Higher models allow more complex shaders

and more functionality, but require that the GPU support them.

Technique đc định nghĩa để xác định phiên bản của shader (shader model) cần đc biên dịch. ở đây, bạn

dùng shader model 2.0 cho cả hai shader. Phiên bản cao hơn cho phép sử dụng shader phức tạp hơn và

có nhiều hàm hơn, nhưng yêu cầu GPU phải hỗ trợ chúng

(Nhắc lại GPU là Graphic Processor Unit – đơn vị xử lý đồ họa, độ mạnh của nó tùy vào cái card đồ họa

của bạn)

As you can see, both shaders are encapsulated in what is called a pass. One pass reads in

all vertices that should be drawn with the technique, processes them, processes the resulting

pixels, and renders these pixels to the backbuffer, where they are waiting to be presented to the

screen after all of the pixels have been processed. For some techniques, you may want to do

this process twice during the same frame for all vertices. Therefore, such techniques will have

two passes, each with a vertex shader and pixel shader.



Như bạn có thể thấy, cả hai shader đều đc gói lại trong 1 cái đc gọi là pass. Một pass sẽ nhận toàn bộ

vetrex cần đc draw kết hợp với technique, pass sẽ xử lý cả đống đó, xử lý trên từng pixel, và tạo hình

nhưng pixel này và đưa nó vào vùng đệm, vùng đệm là nơi mà các pixel sẽ chờ đợi để đc draw lên màn

hình. Với một số technique, bạn có thể muốn xử lý tất cả vertex trong frame những 2 lần (để tạo 2 hiệu

ứng chẳng hạn), do đó technique sẽ có 2 pass, mỗi pass đều có vertex shader và pixel shader riêng của

nó.

For some more advanced effects, you’ll want to use multiple techniques. You’ll use a first

technique to transform your scene into an intermediate image, which can be used by another

technique as input.

Với các hiệu ứng nâng cao, bạn sẽ muốn dùng nhiều technique. Bạn sẽ dùng technique đầu tiên để biến

đổi không gian 3D sang dạng 2D, và một technique khác sẽ dùng kết quả của technique đầu tiên như là

cái input của nó.

The combination of all shaders and techniques used is called an effect. A simple effect will

contain a vertex shader, a pixel shader, and a technique. A more advanced effect (such as shadow

mapping or deferred rendering) will contain several of each

Sự kết hợp của các shader và technique gọi là hiệu ứng. một hiệu ứng đơn giản sẽ chứa vertex shader,

pixel shader và technique. Những hiệu ứng nâng cao (Đổ bóng, tạo hình độ sâu) sẽ chứa rất nhiều những

thứ trên.

Since you will usually keep all shaders and techniques corresponding to the same effect in

one file, XNA calls each HLSL code file an effect. This allows XNA to treat effects as game assets,

just like models and textures. All the effects are processed through the XNA Content Pipeline,

generating manageable objects that the content manager can load at runtime.

Từ bây giờ, bạn hãy giữ tất cả shader và technique của một hiệu ứng trong 1 file duy nhất. XNA gọi file

mã HLSL là file hiệu ứng (*.fx). nó cho phép XNA chăm sóc các hiệu ứng như là các tài nguyên game,

cũng giống như model và te. Tất cả hiệu ứng sẽ đc xử lý thông qua trình xử lý tài nguyên của XNA. Chúng

sẽ là nhưng đối tượng đã đc quản lý sẵn để ContentManager có thể load nó (tài nguyên) trong quá trình

chạy game.



Effect Class

Lớp hiệu ứng At this point, you have created and coded your first complete effect in an .fx file. This means

you can close the .fx file and move to your XNA project. The next step is to load this effect into

your XNA program, so you can use it to render something to the screen. In your XNA program,

the effect should be loaded into an object of the Effect class (just as an image would be loaded into

an object of the Texture2D class). This Effect class allows you to configure the effect’s uniform

parameters, select the current effect technique, and use the effect for rendering. The following

code illustrates how to load and configure an effect with XNA:

Tới lúc này, bạn đã tạo và code hiệu ứng hoàn chỉnh đầu tiên của mình trong một file fx. Nghĩa là bạn có

thể đóng file fx lại và đưa nó vào dự án XNA. Bước dưới đây sẽ load hiệu ứng vào chương trình XNA, để

bạn có thể dùng nó để tạo hình một thứ gì đó lên màn hình của mình. Trong XNA, hiệu ứng cần đc load

trong đối tượng lớp Effect (Giống một bức ảnh load trong đối tượng texture2D) lớp hiệu ứng cho phép

bạn cấu hình các tham số cố định của HLSL. lựa chọn technique để sử dụng, và dùng effect để tạo hình.

Code dưới minh họa việc load và cấu hình hiệu ứng với XNA:

// XNA Effect object

Effect effect;

// Load the effect

effect = content.Load<Effect>("/effects/simpleEffect");

// Set the technique

effect.CurrentTechnique = lightEffect.Techniques["basicTechnique"];

// Configure uniform effect parameters – Đưa giá trị ma trận cho tham số của hiệu ứng

effect.Parameters["matWVP "].SetValue(worldViewProjectionMatrix);

This code initially loads the simpleEffect effect from the HLSL code file using the content

manager’s content.Load method. Then it defines which technique of the effect will be used; in

this case, the basicTechnique technique you defined earlier. Finally, it sets the only uniform



effect parameter defined in the HLSL code file: matWVP.

Code trên thiết lập việc load một hiệu ứng từ mã HLSL sử dụng phương thức LoadContent() của

ContentManager . sau đó nó xác định technique sẽ sử dụng, ở đây technique chính là basicTechnique

mà bạn đã định nghĩa trước đó. Cuối cùng bạn Đưa giá trị ma trận cho tham số cố định của hiệu ứng:

matWVP

The following code shows how to draw an object using the loaded effect:

Code dưới cho thấy cách draw đối tượng bằng cách sử dụng file hiệu ứng đã load ở trên:

// First begin the effect

effect.Begin();

// Remember that the effect can have many passes

foreach (EffectPass pass in effect.CurrentTechnique.Passes)

{

pass.Begin();

// PUT YOUR DRAWING CODE HERE

pass.End();

}

// Finally, end the effect

effect.End();

To draw a 3D object, you first need to begin the effect you want to use to render it, and then

go through all the passes of the selected technique. For each pass, you need to begin the pass,

draw the object, and end the pass. Finally, you need to end the effect. The effect pass is repre-

sented by XNA’s EffectPass class, while its techniques are accessed through the CurrentTechnique

property of the Effect class. If you want to change an effect parameter after the beginning of a

pass, you need to call the CommitChanges method of the Effect class to update the changes.

The steps previously shown are necessary only if you’re going to draw a model by yourself.



Để draw một đối tượng 3D, đầu tiên bạn càn begin cái hiệu ứng mà muốn sài, sau đó lặp tất cả các pass

trong technique đã chọn. trong mỗi pass, bạn cần phải begin cái pass, draw đối tượng, sau đó End cái

pass đó. Cuối cùng, bàn cần kết thức hiệu ứng. pass của hiệu ứng đc biểu diễn bởi lớp EffectPass của

XNA, bạn có thể lựa chọn technique cần sử dụng bằng thuộc tính CurrentTechnique của lớp Effect. Nếu

bạn muốn thay đổi tham số hiệu ứng sau khi begin pass, bạn cần gọi phương thức CommitChange cuat

lớp hiệu ứng để cập nhạp lại những sự thay đổi. các bước trên cho thấy những sự cần thiết nếu bạn

muốn tự mình draw model.

When you load a 3D model from disk, the model comes with its effects stored inside its ModelMesh

objects.

Khi bạn load một model 3D từ đĩa, model sẽ có các effect của nó nằm trong đối tượng ModelMesh của

nó

Effect Helper Classes

Lớp giúp đỡ cho Effect

When an effect is loaded through the content manager, you don’t know what parameters or

techniques it has. Also, to modify an effect parameter, you must first query this parameter

inside the effect, and then modify it. So, you might configure an effect parameter called

lightPosition like this:

khi một hiệu ứng đc load thông qua ContentManager, bạn ko biết những tham số nào mà technique có.

Cũng vậy, để thay đổi các tham số hiệu ứng nàu, bạn phải tìm kiếm các tham số này bên trong file hiệu

ứng, sau đó mới chỉnh lại nó đc, do đó, nếu bạn cần cấu hình laih tham số là “lightPoisition” sẽ phải viết

như sau:

// lightPosition đc viết trong mã HLSL, bạn phải mở file fx mới thấy đc tên biến lightPosition

//sau đó mới đưa giá trị vào cho nó như ở dưới đây:

effect.Parameters["lightPosition"].SetValue(new Vector3(0.0f, 40.0f, 0.0f));

In this code, when you alter the value of the lightPosition parameter, a query is made

inside the effect for the lightPosition parameter. This presents two problems: the computa-

tional overhead required to query for this parameter and the possibility of a query for an invalid



parameter. Using helper classes, you can avoid these problems.

Trong mã trên, khi bạn đưa giá trị cho tham số lightPosition, trình tìm kiếm bên trong hiệu ứng sẽ đặt giá

trị cho tham số lightPosition tương ứng. có sẽ nảy ra 2 vấn đề: có đúng tên tham số yêu cầu để đưa giá

trị vào tham số đó hay ko và liệu giá trị đưa vào có đúng với kiểu dữ liệu của tham số? dùng thêm lớp

helper, chúng ta có thể tránh đc những vấn đề trên:

To ease the management of custom-created effects, you can create a unique helper class

for each effect. Each effect helper class will store a reference for all the effect parameters, avoiding

the overhead of constant querying for the parameters. The following code shows how to store

a reference for the effect parameter and change its value:

để làm nhẹ lại việc quản lý các hiệu ứng tùy chọn tự tạo, hạn có thể tạo một lớp helper duy nhất cho

mỗi effect. Mỗi effect helper sẽ chỉ lưu các giá trí cho toàn bộ các tham số của hiệu ứng đó. Code dưới

cho thấy cách lưu trữ và tham chiếu đến đến các tham số hiệu ứng và thay đổi các giá trị của tham số đó

//Tham số lightPosition của hiệu ứng tùy chọn do bạn tạo ra:

EffectParameter param1 = effect.Parameters["lightPosition"];

// Render loop

{

param1.SetValue(new Vector3(0.0f, 40.0f, 0.0f));

// Draw model

... ...

}

Materials

Chất liệu

Materials are classes that you should create to store the parameters used to configure an effect.

For example, you can render two surfaces using an effect that applies a texture to each of them.

In this case, the material of each surface is its texture, which you use to configure the effect



used to render the surfaces. So, if the two surfaces share the same material, you could set the

desired effect and the desired material, and render both surfaces in sequence by avoiding

changing the effect that is currently set or its parameters.

Chất liệu là một lớp mà bạn cần tạo để lưu các tham số dùng để cấu hình lên hiệu ứng. ví dụ, bạn có thể

tạo hình 2 bề mặt sử dụng một hiệu ứng chung áp dụng lên mỗi texture trên mỗi bề mặt. lúc này, chất

liệu cũng mỗi bề mặt là texture của nó, thứ bạn dùng để cấu hình lại hiệu ứng. do đó, 2 bề mặt sẽ có

cùng 1 lớp chất liệu, bạn có thể đặt ra hiệu ứng mà mình cần và chất liệu mà mình cần, sau đó tạo hình

bề mặt bằng cả hiệu ứng và chất liệu, mà vẫn tránh đc việc phải thay đổi hoàn toàn hiệu ứng đã đc được

đặt hoặc phải thay đổi tham số của nó.

The following are the two basic material classes that you’ll create:

2 lớp chất liệu cơ bản bạn sẽ tạo:

• LightMaterial: This class will store the surface properties used for lighting (diffuse color,

specular color, and specular power).

LightMaterial: lớp lưu các thuộc tính bề mặt dùng cho ánh sáng (bao gồm màu khuếch tán, màu phản

chiếu và độ mạnh phản chiếu)

• TextureMaterial: This class will stores a texture map and tile used to apply a texture to

a surface.

TextureMaterial: lớp này lưu trữ cách lấy mẫu texture và tile (tile là những texture rất nhỏ, chúng đc

nhân bản ra dùng để draw một bề mặt lớn) để áp dụng texture đó lên một bề mặt nào đó.

You could use these two basic material classes to create more complex types of materials,

such as a multitexturing material.

Here is the complete code for the LightMaterial class:

Bạn có 2 lớp chất liệu cơ bạn để tạo ra nhiều loại chất liệu khác phức ạp hơn, như lớp chất liệu chứa

nhiều texture – cái này nói ở chương khác của sách.

public class LightMaterial

{

// Material properties - diffuse and specular color

Vector3 diffuseColor;



Vector3 specularColor;

// Specular power (Shininess)

float specularPower;

// Properties

public Vector3 DiffuseColor

{

get { return diffuseColor; }

set { diffuseColor = value; }

}

public Vector3 SpecularColor

{

get { return specularColor; }

set { specularColor = value; }

}

public float SpecularPower

{

get { return specularPower; }

set { specularPower = value; }

}

public LightMaterial (Vector3 diffuseColor, Vector3 specularColor,

float specularPower)

{

this.diffuseColor = diffuseColor;

this.specularColor = specularColor;

this.specularPower = specularPower;



}

}

Here is the complete code for the TextureMaterial class:

Dưới đây là toàn bộ code cho lớp TextureMaterial :

public class TextureMaterial

{

// Texture

Texture2D texture;

// Texture UV tile

Vector2 uvTile;

// Properties

public Texture2D Texture

{

get { return texture; }

set { texture = value; }

}

public Vector2 UVTile

{

get { return uvTile; }

set { uvTile = value; }

}

public TextureMaterial(Texture2D texture, Vector2 uvTile)

{

this.texture = texture;

this.uvTile = uvTile;



}

}

You store the texture as an XNA Texture2D in the texture attribute of the TextureMaterial

class. The texture UV tile, which is used for bump mapping, is stored as an XNA Vector2 in the

uvTile attribute of the class. As in the LightMaterial class, you need to create properties to set

and retrieve the texture and its UV tile.

Bạn lưu trữ texture giống như một texture 2D của XNA trong thuộc tính của lớp TextureMaterial . còn về

texture UV tile, nó sẽ đc dùng để làm bump Mapping (hiệu ứng cho địa hình – terrain)

(Có một đoạn giới thiệu về FX composer của Nvidia để tạo ra và hiệu chỉnh shader một cách trực quan,

nó giới thiệu thôi nên cũng đơn giản – tớ bỏ qua đoạn này)

Summary

Tóm tắt

In this chapter, you learned about the rendering pipeline, its stages, and how to use them to

process the description of a 3D scene and output a 2D image.

Trong chương này, bạn đã học về quá trình tạo hình, các bước mà nó thực hiện và làm cách nào để một

không gian 3D có thể trở thành một bức ảnh 2D

You also learned how to create shaders to program the programmable stages of the GPU,

and the relationship between shaders, techniques, and effects.

Bạn cũng học về cách tạo ra shader để lập trình cho các quá trình có khả năng lập trình của GPU, mối

quan hệ giữa shader, technique và hiệu ứng.

Finally, you learned to load, configure, and use effects with XNA. After the Content

Pipeline processes the effects, you can easily load and use them to render your 3D objects.

Now that you’ve reviewed some basic concepts of shaders and effects, you can start drawing

some 3D models.



Cuối cùng, bạn đã học về các load, cấu hình và sử dụng hiệu ứng với XNA. Sau khi trình xử lý Content (xử

lý tài nguyên của XNA) xử lý xong file hiệu ứng (fx), bạn có thể dễ dàng sử dụng nó để tạo hình đối tượng

3D của bạn. bây giờ là lúc bạn nên xem lại những nội dung cơ bản về shader và hiệu ứng, bạn có thể bắt

đầu bằng các draw một số model.

(Còn một đoạn preview về chapter 10, tớ bỏ qua nhé)

Chapter 9 - Hlsl - Shader

Documents

Transcript of Chapter 9 - Hlsl - Shader