CustomShaderCallBack !

Tạo class chung cho CallBack Shader

 

 

 

 

Các bạn lập trình Irr than mến !
Không biết có bao nhiêu bạn đã đụng đến phần Shader trong Irrlicht chưa ?
Nếu có, có bạn nào rơi vào hoàn cảnh của mình không.
Nguyên nhân là Irrlicht engine có 01 cái ví dụ dành cho dùng cho Shader (ví dụ 10) ! Nhưng khi mình làm việc nhiều với Shader thì với mổi cái ví dụ mình chuyển từ RenderMonkey hay NVidiaFXCompose thì mình đều phải tạo một class kế thừa class ShaderCallBack !
Vậy là bao nhiêu cái ví dụ thì phải có bao nhiêu cái class ???
Mệt quá ! Mình quyết định dùng 01 cái class có thể dùng cho toàn bộ các ví dụ hay là một class  tổng quát có thể Custom cho từng ví dụ riêng được.
Nhưng thực tế thì không dể chút nào,nhưng mình đã đạt được kết quả ban đầu, nói chung là cũng tạm ổn.



Hiện tại mình đang tạo một CustomSceneNode có thể áp Shader cho nó một cách tuỳ thích (nhưng chỉ mới là IMesh, còn IAnimatedMesh thì chưa được. Và những cái Shader dùng RTM thì còn khó hơn nhiêu, đang cố đây !
 Các bạn có thể nghiên cứu theo cách này nhằm rút ngắn time viết code cho khoẻ hé !


ScreenShot :

VoronoiFracture + EnvShader !

Kết hợp hiệu ứng phá huỷ và

hiệu ứng khúc xạ chất liệu

Chuẩn bị làm game mình bắt đầu tích hợp các hiệu ứng phức tạp với nhau.
Mình vừa thử xong hiệu ứng phá vỡ đôi tượng cái này trong Bullet engine (mình dùng chất liệu giả sử là kính để nhận thêm hiệu ứng khúc xạ. Cái này trong Shader)
Kết hợp 2 cái lại thấy cũng rất hay
Sau đây là clip của nó : (đập kính,hay đập nước đá cũng được)

New PostProcessSceneNode

Làm lại SceneNode hiển thị hiệu ứng hậu kỳ



PostProcessSceneNode củ không thể dung được BackBuffer nên mình quyết định làm lại nó. Nhưng mình lại mất rất nhiều thời gian do một cái lổi ngớ ngẩn.
Mà cuối cùng mình phát hiện là không nên tin vào tham số mặc định của hàm ! (Vì nó không đúng yêu cầu của mình)
Chỉnhlại xong, bây giờ SceneNode của mình có thể thực hiện được hiệu ứng mình rất thích là MotionBlur, và rất nhiều hiệu ứng khác nữa.
Clip của mình cho các bạn xem các hiệu ứng dây chuyền gồm : MotionBlur, Invert, và Water
Mình cũng có thể bật và tắt hiệu ứng khi cần thiết (Cái này mới thêm vào thấy cũng rất hay)
Xem clip các bạn chú ý thanh tiêu đề nhé, mình đặt các thong tin trên đó.
Dự định tiếp theo là làm cho cái SceneNode này thành SceneNode that sự có thể lưu và nạp lại.
Kế tiếp mình sẽ tạo cái SceneNode render được hiệu ứng dây thừng trong Bullett (phần chat lieu vải trong Bullet)
Clip của mình :

    

Upgrade lakewater effect

Nâng cấp hiệu ứng nước hồ

Kết hợp với hiệu ứng biển của NVidia mình làm thêm sóng cho nước hồ (cái này có thể là cải tiến cái OceanEffect thì đúng hơn).
Thêm một cái nữa là mình thêm hiệu ứng (PostProcess) dưới nước. Khi di chuyển Camera đi qua mặt nước thì hiệu ứng dưới nước sẽ hiện ra, còn không thì bình thường).
Cơ bản làm như thế mình có thể tạm coi là đủ.
Mình cũng đang nâng cấp cái PostProcess SceneNode của mình cho nó hoàn thiện hơn và có thể chạy mọi hiệu ứng xử lý hậu kỳ.
Sau đây là clip của nó :

LakeWater Shader !

Hiệu ứng nước hồ

Tìm được hiệu ứng trên trang này : http://habib.wikidot.com/projected-grid-ocean có sourceDemo nhưng viết bằng C# và code Shader là file .fx thấy rất hay.
Mình quyết định chuyển code hiệu ứng mặt nước hồ sang Irrlicht.
Các bước như sau :
 + Chuyển .fx sang thành project trong RM
 + Chuyển sang Irrlicht, chỉnh lại tham số thích hợp cho nó hoạt động vừa ý.
Clip của nó :

NVidia SDK "OCean Shader" to Irrlicht

Chuyển hiệu ứng Ocean của NVidia SDK

sang Irrlicht

Chỉnh mấy hôm rồi cái hiệu ứng này mới có thể tạm chấp nhận được.
Như mình đã nói : cái Ocean shader này bản gốc trong tệp tin Ocean.fx của NVidia SDK , nó là một chương trình hoàn chỉnh. Nhưng có một số cái cần thay đôi khi chuyển sang dùng Irrlicht cho nó là :
- Nó dùng texCUBE để tạo ảnh phản chiếu (Irr không support cái này)
- Việc chuyển từ file .fx sang file hlsl (DirectX) trong Irrlicht không dễ một chút nào. Mình đã dùng FxComposer để xem nó như thế nào , dùng RenderMonkey để tách nó ra thành 02 phần VertexShader và Pixel Shader. Sau đó mới chuyển sang Irrlicht thành 01 file .hlsl.
- OCean Shader của NVidia chỉ hiện CubeBox tĩnh, còn của mình là EnvMap động nên cài đặt khác nhau hoàn toàn.
- Mình chỉ sữ dụng lại phần code tạo hiệu ứng sóng nước và tán xạ mặt nước thôi, còn hiệu ứng môi trường thì lấy từ ShaderDesigner !
Nhưng cuối cùng cũng có thể xem là xong.
Clip của nó đây :

Erosion shader (from RM (GLSL) to HLSL in Irrlicht

Chuyển hiệu ứng xói mòn từ RenderMokey (GLSL) sang Irrlicht (HLSL & GLSL)

Hiệu ứng này làm cho vật liệu bị cũ đi một cách rất hay và chân thực. Dùng hiệu ứng này trong Game thì sẽ tiếc kiệm rất nhiều công sức để tạo nhiều mô hình (các đồ vật cũ hay khác nhau một chút)
Trong RenderMonkey  chỉ có hiệu ứng này dạng GLSL shader chứ không có HLSL. Mình đã nâng cấp cái project đó của RM lên để có hiệu ứng này chạy trong HLSL.
Việc chuyển code shader này sang Irrlicht thì lại rất dễ. Vì mọi ví dụ từ RM đều chuyển sang Irr một cách dễ dàng.
Mình đang nghiên cứu chuyển các file .fx hay gfx sang thành project trên RM rồi sau đó chuyển nó sang Irr. Trước tiên mình bắt đầu bằng hiệu ứng mặt biển trong ví dụ của NVidia SDK .
Nhưng phải khắc phục thêm nhiều thứ như texCube chuyển thành tex2D, các phép toán ma trận, và hoán đổi toạ độ x,z....
Cũng mai là do mới làm xong hiệu ứng phản xạ môi trường nên phần phản xạ mình áp dụng ngay vô luôn (thay texCube bằng tex2D trong HLSL do Irr không support SamplerCube)

 

Sau đây là clip của hiệu ứng xói mòn :

Environment mapping and glass effect !

Hiệu ứng kính và phản xạ môi trường !

Mới down về cái ShaderDesigner dùng để thiết kế các hiệu ứng chạy trên OpenGL nhưng xét về khã năng thì nó còn thua xa RenderMonkey ! Nhưng nó lại có một số ví dụ mẫu mà mình thấy rất hay đó là hiệu ứng tạo chất liệu kính bán trong suốt và hiệu ứng phản xạ môi trường (không cần dùng mapping hình hộp nữa mà dùng dạng trãi phẵng). Két hợp nó trong Irrlicht thì rất tuyệt.
Việc chuyển đổi nó thành một ví dụ chạy Shader trong Irrlicht bằng OpenGL thì không khó, cái khó là mình phải chuyển code Shader sang chạy trên DirectX luôn mới phù hợp.
Mình dùng RenderMonkey chuyển từ từ nhưng cũng rất mất thời gian và khó khăn.
Sau khi có các project trong RenderMokey chạy cả OpenGL và DirectX thì việc cho nó sang chạy trong Irrlicht quá dễ đối  với mình.
Mất hết mấy ngày mới xong mấy cái này đó. Mình sẽ tìm xem coi ShaderDesigner còn cái ví dụ nào hay không sẽ chuyển nó sang DirectX.

Hiệu ứng kính bán trong suốt :

Hiệu ứng phản chiếu môi trường :

Hiệu ứng phản chiếu môi trường nâng cao (có bump thêm trên bề mặt chất liệu)  :

 

Clip của nó đây :

 

Hẹn gặp lại các bạn !!! 

Một số hiệu ứng nâng cao !

Mình vừa thực hiện đến phần nâng cao của các ví dụ chuyển từ RM (đến phần Advanced rồi) .
Sau đây là một số hiệu ứng :
1) Parallax Occlusion Mapping :

Cái này trong Irrlicht đã có cài sẳn,nhưng nó viết bằng lowlevel shader , còn cái này mình làm bằng shader 3.0, các bạn nhìn xem ! đẹp hơn rất nhiều !
2) Heat haze :

Tạo một vùng khí nóng bốc lên từ ảnh map xem rất thật.
3) MultiTone Car Paint Effect :

Mình đã thực hiện phần này, nhưng gần giống thôi (do hạn chế CubeMap của Irrlicht)
Sau đây là clip của nó :

Hiệu ứng màn hình (Sinh dữ liệu 2D)

Mình đã chuyển xong phần sinh dữ liệu 2D từ RM sang Irrlicht.. Các hiệu ứng đó bao gồm :
1 ) Dizzy : sinh dữ liệu là ảnh map liên tục xoay tròn phát ra từ tâm - rất chóng mặt

2) ECG : hiệu ứng giống như máy điện tim
3) Electricity : tia điện phát ra từ 2 điểm, nhìn rất thật

4) Graph : đồ thị có thể phóng to và thu nhỏ

5) NightSky: ảnh động bầu trời đêm
6) Waterfall : hiệu ứng thác nước đổ xuống trong rất đẹp.
Sau đây là clip của nó :

Mặt trời + Hiệu ứng vàng phát sáng + Làm mờ khi nhìn xa + Đổ bóng bằng ảnh Map

Đã chuyển sang phần nâng cao của các code shader chuyển từ RM sang Irrlicht.
Hiệu ứng chất liệu vàng chiếu sáng :

mình bị vướng ngay cái phần Blur của chương trình (nguyên nhân à : Irrlicht không hỗ trợ các hằng khai sẳn trong code Shader ! nên phải làm thành từng dòng code Blur (12 dòng))
Hiệu ứng hành tinh mặt trời :

mình chỉ vẽ cái mặt trời trong ví dụ Plannets củq RM do các cái kia thì làm trong Irrlicht nhanh hơn nhiều. Bạn thấy bầu khí quyển nóng bao quanh mặ trời không. Hạn chế : do Irr không hỗ trợ 3DTextture nên mình làm cái khác nó không đẹp bằng.
Depth of field :

đây cũng là một hiệu ứng nổi tiếng trong game.Cảnh vật nhìn xa sẽ trong có vẽ mờ hơn nhìn gần. Mình chỉ làm phần cơ bản.Nói chung cũng nhờ code Blur có trước đó.
ShadowMaping :

cái này thì còn hay hơn ! Đây cũng là điểm yếu hiện thời của Irr. Đó là đổ bóng thời gian thực, và các bạn thấy đó ! Bóng đổ của mình cực nhanh ! (nhưng thật ra không phải vậy đâu, nó chưa được tối ưu cho nhiều đối tượng) . Đây là hiệu ứng tạo bóng đổ bằng ảnh Map dựng trong thời gian thực.
Sau đây là các clip của nó :
GoldenShine :

Basic depth of field :

ShadowMapping :

Hiệu ứng đôi mắt kẻ ác phát sáng và làm mờ chuyển động

Bây giờ mình đã chính thức chuyển sang phần chuyển code nâng cao (multi pass) và hai ví dụ đầu tiên của mình là :
Đôi mắt kẻ ác phát sáng : khi di chuyển sẽ thấy đôi mắt sẽ sáng dần lên đến cực sáng khi đối diện - hiệu ứng này rất thích hợp khi trang bị cho quái vật một đôi mắt nhìn đã thấy ghê. Mình kết hiệu ứng này khi chơi serie game : "Soul reaver" và bi giờ thì hiệu ứng này đã có trong tay mình !
Clip :

Làm mờ chuyển động : Mình cũng đã thực hiện hiệu ứng này rồi ! Nhưng lúc đó làm bằng CPU Fate nên làm chậm FPS đáng kể, bây giờ thì nó hoàn toàn dùng GPU chứ không dùng CPU nữa ! He he ! Nhanh hơn rất nhiều !
Clip :

Chất liệu : Đá + Gổ và Hệ thống particle bằng Shader !

Mình mới hoàn thành 3 cái ví dụ Shader này và chuyển nó sang Irrlicht một cách gần đầy đủ.
Hiệu ứng đá :

Hiệu ứng gổ :

Hệ thống Particle :
+ Hiệu ứng con rắn :

+ Hiệu ứng lửa :

+ Hiệu ứng hệ thống hạt hình khối :

Mình phát hiện ra nhiều điểm nghịch khi chuyển code Shader từ RenderMonkey sang Irrlicht - Từ bây giờ mình cũng có thêm ít kinh nghiệm khi làm việc với mấy đoạn Code từ RenderMonkey rồi (có thể là các đoạn code Shader khác cũng tốt)
Đó là :
+ Hệ thống tọa độ trong Irrlicht.
+Các phép tích với các ma trận chuyển đổi
+Một vài ma trận chuyển đổi bị Invert khi phải chuyển qua Irrlicht thì mới đúng hiệu ứng so với khi để trong RenderMonkey.
Sau đây là các clip của nó :
Hiệu ứng đá :

Hiệu ứng gổ :

Hệ thống hạt :

Vậy là mình có thể tiến tới làm tiếp chuyển các code khác khó hơn từ RenderMonkey rồi ! Hẹn gặp lại các bạn !

Nâng cấp hiệu ứng phát sáng và tạo hiệu ứng cánh bướm

Hiệu ứng cánh bướm :

Chắc dạo này tốc độ chuyển code của mình từ RenderMonkey sang Irrlicht nhanh hơn rồi. Lại lên Level nữa rồi
Hiện giờ mình chỉ chú tâm chuyển code Shader từ RenderMonkey sang Irrlicht sao cho nó chạy ổn là tốt rồi (vì mình cũng định như vậy thì vừa học Shader trên RenderMoneky vừa học Irrlicht luôn một thể)
Kết quả là mình đã có thể hiểu RenderMonkey về cơ bản !
Còn Irrlicht thì mình cũng thấy các hạn chế của nó khi thực hiện Shader !
Mình đãnâng cấp lại cái hiệu ứng tự phát sáng
Clip hiệu ứng tự phát sáng.

Hiệu ứng cánh bướm : đây là hiệu ứng rất đẹp, y như cánh bướm thật, khi mình di chuyển sẽ thấy màu trên cánh bướm thay đổi theo.
Bug : phải chỉnh lại gốc texture trong Shader vì khi chuyển model từ renderMonkey sang nó bị sai tọa độ map.
Clip hiệu ứng cánh bướm :

HIỆU ỨNG LẤP LÁNH VÀ TỰ PHÁT SÁNG CHUYỂN TỪ RENDERMONKEY SANG IRRLICHT

Hiệu ứng Gliitering :

Hiệu ứng Illumination :

Mới làm thêm được 2 hiệu ứng mới là hiệu ứng lấp lánh và hiệu ứng tự chiếu sáng.
Hiệu ứng lấp lánh : giống như có kim tuyến trong chất liệu.
Hiệu ứng tự chiếu sáng : có 5 hiệu ứng riêng lẻ gồm (chiếu sáng bằng vertex hay bằng pixel hay cuộn hay chiếu sáng bằng điểm ảnh, chiếu sáng có phản chiếu môi trường , chiếu sáng bằng ánh sáng phổ mạnh ) :
sau đây là clip clip của nó :
Hiệu ứng Gliitering :

Hiệu ứng Illumination :

Tạo nhiễu giả 3D trong Shader !

Vì Irrlicht không hỗ trợ 3DTexture nên mình buộc phải làm cách này (không thật lắm nhưng giải quyết được hầu hết các trường hợp)
Một lệnh tex3D trong Shader có thể được thay bằng 3 lệnh (2 lệnh tex2D và một lệnh lerp )
Các bạn xem trong mục sau : http://irrlicht.sourceforge.net/forum/viewtopic.php?p=152878
Từ đó mình đã nâng cấp lại các phần Shader mình đã tạo trước đó gồm có :
FireShader (trừ phần Lava không đẹp hơn cái củ nên mình bỏ, phần hiệu ứng khí quyển)
Sau đây là Clip về FireShader mới (nhìn đẹp hơn nhiều)

Hiệu ứng lửa chuyển từ RenderMonkey

Mình đã chuyển xong ví dụ về hiệu ứng lửa từ RenderMonkey
Các hiệu ứng bao gồm :
1) Fire effect : tạo hiệu ứng ngọn lửa nhỏ. Chuyển code từ RenderMonkey sang Irrlicht bình thường chỉ trừ việc phải thay đổi định dạng file .tga do nó chỉ có 256 màu mà Irrlicht không hỗ trợ.
ScreenShot :

2) FireBall : hiệu ứng quả cầu lửa đang bay. Khó khăn là phải chuyển từ Tex1D, Tex3D thành Tex2D trong Shader (Do Irrlicht không hỗ trợ định dạng này)
ScreenShot:

3) Inferno : Tường lữa : khó khăn tương tự như FireBall nhưng cũng khắc phục xong.
ScreenShot :

4) Lava : nham thạch cũng đã thực hiện xong.
ScreenShot :

Nói chung cái hiệu ứng nào chuyển từ RenderMonkey sang đều có ít nhiều khó khăn mà mình phải tự tìm cách khắc phục.
- Hiệu ứng cuối cùng :Explosion ! Nổ :
ScreenShot :

Chuyển Anisotropic shader từ RenderMoney

Thành công tiếp tục đây ! Bước đầu mình làm hoàn thiện cái ví dụ về Anisotropic shader !
Dĩ nhiên là nó không đẹp bằng khi Render trong RenderMonkey do Irrlicht có một số hạn chế (CubeMap và 3DTexture)
Nói chung là nhìn cũng tạm ổn,chạy cũng khá (nhưng không hiểu sao chậm hơn trong RenderMonkey rất nhiều.
Sau đây là clip của nó : (gồm satin shader và brushMetal shader )

Và clip này thì chỉ có Satin Shader thôi !

Chuyển ví dụ ShowComponents từ RenderMonkey sang Irrlicht

Mình cố gắng chuyển càng nhiều các ví dụ hiệu ứng từ chương trình RenderMoney sang Irrlicht.
ShowComponents là một ví dụ hay. Ban đầu mình chỉ có thể làm đến 3 phần đầu của nó do đến biNormal và Tangent thì kết quả hoàn toàn khác nhau !
Tìm mãi trên diễn đàn, đọc tới đọc lui mất mấy ngày nay cuối cùng cũng ra lý do.
+ Thứ nhất phải chuyển Mesh của Irrlicht sang Tangnet trước
+ Thứ hay phải à phải chỉnh lại phần vertexShader (phần Input) sao cho nó có thể hiểu được dữ liệu Tangent của Irrlicht ! Cái này mới khó.
Và sau bao nhiêu cố gắng mình cũng thành công rồi ! Lại lên Level nữa rồi.(được thêm 1 mẹo nữa)
Sau đây là clip của nó :

MỘT VÀI HIỆU ỨNG VỚI NƯỚC

Mình bị mấy cái hiệu ứng này hành hết gần 1 tuần !Bây giờ thì có thể nói là tạm ổn.
Mục đích mình thực hiện các hiệu ứng này là mình cần thêm hiệu ứng mặt nước (rợn sóng + phản chiếu + khúc xạ) vì mình thấy làm game bây giờ mà thiếu cái này coi như là thiếu hết vẽ đẹp của game.
Mình chuyển code của nó từ RenderMonkey ! Nhưng phải chỉnh nhiều lắm do Irrlicht engine không hổ trợ 3DTexture và CubeMapping đành phải chuyển qua 2DMapping nên cũng bị xấu đi phần nào ! Kế tiếp trong ví dụ của RenderMonkey chỉ là dùng Map tĩnh còn mình dùng thực sự là Map động (tự động phản chiếu các đối tượng khác thêm vào)
Kết quả đây !

Sẳn làm xong phần rợn sóng và phản chiếu mình làm tiếp phần khúc xạ : kết quả cũng không tệ lắm
Kết quả :

Vẫn còn một số bug trong Shader mình cần khắc phục, nhưng như vậy cũng ổn. Mình sẽ làm luôn một cái Class gọi là WaterShader để dùng riêng cho các hiệu ứng này (Lúc đó thì phải dùng cả OpenGL và DX rồi)