хэрхэн 3D дүрс зурах вэ?

Өмнөх нийтлэлд юу мэдэж байх ёстой талаар өгүүлсэн билээ. Харин одоо бодитоор хийж харцгаая.

Энэ зургийг нэг харцгаая. Ерөөсөө 3D объект гэдэг vertex-үүдийг тодорхойлсон баахан тоонуудаас бүрдэнэ. Энэ цэг нь энэ байрлал дээр нөгөө нэг өөр нэг цэг нь энэ байрлал дээр гэх мэт баахан тодорхойлолтууд гэсэн үг. Энэ сармагчны зурагны хувьд vertex-үүд нь хэт олон тул манай жишээнд цөмөөрөө энгийн гурвалжин дүрс үүсгэж зурж үзэцгээх болноо. Өмнөх постод дурдаж байсанчлан объектийн vertex мэдээллүүдийг бид эхлээд host програмын санах ойд буферлаж хадгалаад түүнийгээ GPU-рүү илгээж дараагаар нь shader програмаа ажиллуулан үр дүнг харах болноо. Зургаар ойлгомжтой харуулахыг хичээлээ

Result дээр дарж кодын үр дүнг харна уу. Мөн кодын үйл ажиллагааг комментээр тайлбарласан байгаа.

Эдгээр доод түвшний shader комбайлдах, буфер үүсгэх, uniform дамжуулах гэх мэтийн OpenGL үйлдлүүд нь бусад платформууд дээр онцын ялгаа байхгүйгээр хэрэглэгддэг C++ байна уу Objective-C байна уу ялгаагүй ижилхэн стилтэйгээр хэрэглэгддэг гэдгийг санаж байх хэрэгтэй. Тиймээс javascript дээр тулгуурлан кодуудыг ажиллуулж байна.

Энэ jsfiddle-ийн HTML таабруу ороод хараарай. Энд Vertex shader болон Fragment shader хоёр програмын коодуудыг script хашилтан дотор бичиж хадгалсан байгаа. Чухамхүү энэ хоёр төрлийн коодууд GPU дээр очин ажиллана.

Graphics pipeline ий ажиллах дараалал ёсоор Vertex shader програм эхэлж ажиллана.

Vertex shader ийн оролтын утганд

var vertices = [
         0.0,  1.0,  0.0, // дээд орой
        -1.0, -1.0,  0.0, // зүүн доод орой
         1.0, -1.0,  0.0  // баруун доод орой
    ];

буюу vertices массивт хадгалсан тоонууд гурав гурваараа нэг ширхэг vec3 төрөл болж vertex shader дээр оролтын утга болж орно. гурав гурваараа нэг болж орноо гэдгийг нь

triangleVertexPositionBuffer.itemSize = 3; 
triangleVertexPositionBuffer.numItems = 3;

гэж зааж өгсөн байгаа.
Тэгэхээр 3-н ширхэг item буюу гурвалжинг дүрслэх 3-н ширхэг оройн утга нэг нэгээрээ vertex shader програмыг параллелиар ажиллуулна.
Vertex shader програм
gl_Position гэх built-in буюу цаанаасаа байдаг хувьсагчид оролт болсон оройн вектор утгыг model view projection матрицуудаар үржиж хувиргаад хадгална.
Ингэж үрждэг нь яаж байгаа юм бэ гэвэл өмнөх матриц гэж юу вэ гэдэг постод дурдсанчлан model огторгуй дэх цэгийг world огторгуйд хувиргаад дараагаар нь камерийн огторгуйд яригдах цэгүүд болгож хувиргаж байгаа юмаа. Ингэснээрээ бид 3-н хэмжээс алслалт болон байрлал бүхий цэгүүдийг гаргаж авч байгаа юм.
цаашаагаа 3-н ширхэг gl_Position утгууд үржигдэн хадгалагдаж primitive assembly үе шатанд ирнэ. Энэ үе шатанд аль цэгээс аль цэг хүртэл шулуун зурах юм аль цэгүүдийг нь цэг байдлаар зурах юм аль аль цэгүүдийг нь нэг гадаргуу болгож зурах юм бэ гэдгийг шийднэ. Өөрөөр хэлбэл primitive гэж нэрлэгдэх хэсэг хэсэг дүрсүүд болж бүлэглэгддэг.
primitive болсний дараагаар оройнуудынх нь хооронд дөхөлт хийгдэж primitive муж доторхи fragment-үүдийг бөглөнө. Үүнийг rasterize хийж байна гэдгийг өмнө нь дурдсан билээ.
rasterize хийгдээд утгууд нь fragment shader програмын оролтын утга болж орж ирнэ. Мэдээж энэ олон fragment үүд нэг бүрийг GPU параллелиар ажиллуулж дуусгана.
Манай програмын хувьд fragment shader лүү хараахан оролтын утга оруулаагүй зөвхөн gl_Position буюу гурвалжингийн оройг нь л хувиргаж гаргаж авсан байгаа болно.
fragment shader-т байдаг бас л built-in хувьсагч болох gl_FragColor-т fragment-ийн өнгийг онооно.

gl_FragColor = vec4(0.0, 0.5, 1.0, 1.0);

гэж оноосон байгаа нь бүх fragment цэнхэр өнгөөр оноогдож байгааг илтгэнэ.
rgba буюу улаан, ногоон, хөх гэсэн гурван өнгөний суваг мөн дээрээс нь alpha суваг нэмэгдэж fragment-ийн өнгийг тодорхойлдог.
энэ гурван өнгөний сувгуудыг холих замаар дурын өнгөө гаргаж авдаг бөгөөд 0-оос 1 ийн хооронд бутархай тоогоор өнгөний суваг бүрийг илэрхийлдэг өөрөөр хэлбэл 1,1,1 гэж хольвол бүрэн цагаан өнгө 1,0,0 гэж хольвол улаан өнгө 0,1,0 гэж хольвол ногоон өнгө гэх мэт. alpha суваг нь болохоор transparency буюу нэвтрэл харагдуулахад хэрэглэгддэг.

дээрхи кодонд орой бүрт дан байрлалынх нь утгуудыг агуулсан буфер байсан бол одоо орой бүрт өнгө байхаар нэмж өөрчлөлт оруулъя. Эндээс өнгөнөөс өнгөний хооронд хэрхэн дөхөлт хийгдэж fragment shader дээр орж ирж байгааг харах боломжтой

vertex болон fragment хоёрт хоёуланд нь

varying vec4 vColor;

гэсэн өнгөний утга дамжуулах зориулалттай хувьсагч байгааг хараарай. varying түлхүүр үгээр vertex shader-ээс дөхөлт хийж fragment shader-лүү оролт болж очих утгыг хадгалахад хэрэглэдэг.

Хост програмаас бид байрлал болон өнгө хадгалах зориулалттай хоёр буферийг GPU дээр үүсгэж харгалзах өгөгдлүүдийг нь нэмж хийсэн байгаа билээ. Энэхүү буферүүдийн vertex shader-т орж ирэх байдал нь ижилхэн

attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;

Нэмэлт уншлага

• http://www.graphics.stanford.edu/courses/cs448a-01-fall/lectures/lecture2/
• http://http.developer.nvidia.com/GPUGems/gpugems_ch28.html
• http://greggman.github.com/webgl-fundamentals/webgl/lessons/webgl-how-it-works.html