關於cocos3dthreejs的信息

本文目錄一覽：

• 1、基於three.js的3d引擎怎麼做
• 2、如何在cocos3d-js遊戲中實現文件讀寫
• 3、如何用Cocos引擎打造次世代3D畫質『遊戲大觀
• 4、Threejs 3D中文字體引入及優化

基於three.js的3d引擎怎麼做

threejs本身就是3D引擎，最核心的幾套算法都已經實現了(向量，矩陣建模等)

如果你要再在threejs之上做一些工作，我個人認為應該是這幾個方面

首先是場景生產器，需要對模型的加載進行優化，例如場景的依賴加載，近景優先加載，遠景採用模糊的建模節省資源，等完全加載之後再展示，具體你可以看看低網速一些3D遊戲的做法，自適應分辨率等等等，通過算法壓縮模型構建的三維點坐標等

然後就是抗鋸齒算法，碰撞算法等，另外還有內存優化等（c++必做的工作，案例就是暴雪經典的HASH算法等）

然後就是材質的集成和優化，例如一些光照特效等

如何在cocos3d-js遊戲中實現文件讀寫

使用cocos2d-js可以讀取txt文件，通過jsb.fileUtils.getStringFromFile(fileName);jsb.fileUtils裏面也有writeStringToFile()但是這個官方沒有綁定到C++函數，所以不能用，可以自己實現綁定

如何用Cocos引擎打造次世代3D畫質『遊戲大觀

從Cocos 2d-x 3.0起我們已經可以在遊戲中使用3D元素。Cocos引擎推出3D功能的時間不算太遲，我們已經可以看到越來越多的手機上能流暢地渲染3D遊戲，而且這些機型正在成為主流。在最近兩年我們可以看到，高端手機遊戲從2D轉到3D的傾向很明顯。許多遊戲開發商試圖在競爭激烈的紅海里佔有一席之地，那麼選擇開發3D遊戲或許會是一個強有力的競爭手段。

上面的視頻是我的下一款遊戲作品《Food of the Gods》。這遊戲使用了Cocos 2d-x 3.3，視頻是從我iPhone上錄製的實際運行效果。在這篇文章里我將要介紹我是如何製作它、如何把它跑在cocos引擎上的。對於熟悉cocos官方提供的3D示例遊戲 《Fantasy Warrior》的開發者，將會看到以下一些主要不同點：

1. 光照貼圖（Light Mapping）：你將看到每件物體都有被照亮並且投射陰影。光影效果的質量是由你的3D工具軟件決定的，用3D軟件能烘焙出複雜的光效，包括直接光照，反射光照，以及陰影。

2. 頂點合併（Vertex Blending）：請注意看路、草地和懸崖交接的地方，看不到任何可見的接縫。

3. 透明遮罩（Alpha Masks）：灌木如果沒有透明遮罩就跟紙片一樣。

4. 濾色疊加的公告板（Billboards）：增加一些光束和其他環境的效果。

所有的模型都是用一個叫Modo的3D 軟件建模製作的，貼圖則是使用Photoshop。關於3D模型的製作和貼圖的繪製在此就不再贅述，網上已經有很多教程，在此主要介紹下跟Cocos 2d-x有關的部分。

模型網格和貼圖（Meshes and Textures）

如下圖所示，每個模型的貼圖都是由幾個256 x 256或者更小的貼圖組成的。同時你也會注意到我把所有的小圖片都合在了一張貼圖上，這是減少GPU繪製次數（draw call）最簡單的方法之一。貼圖是從 或者網上找的。

為了把這些圖片拼接起來，我使用的是Photoshop的補償濾鏡（offset filter）然後在接縫的地方用修復畫筆來做一些自然的過渡。為了獲得一種油畫的視覺效果我會先使用cutout濾鏡（注意：cutout濾鏡也會使得png格式圖片的壓縮效果更好），然後在需要的地方繪製一些高光和陰影的效果。我發現如果直接拿照片當貼圖的話，當你把它尺寸縮小的時候會出現圖像噪點。

另一種方案是為每一個模型網格製作一整張獨立的貼圖。當網格比較小或者攝像機不是很靠近網格的時候這種方法是可行的。如果你的photoshop技術過硬的話，出來的效果會更好。附帶的好處是，因為只使用一張貼圖因此只有一次GPU繪製調用。但我不建議採用這種方法來製作第一人稱射擊遊戲（FPS）中的建築，因為當你走得很靠近建築物的時候，貼圖分辨率過低的問題就會顯露出來。我不喜歡用這種整張貼圖方法，因為這實在太費時耗力了。這個場景的製作花了我足足四天時間。

光照貼圖（Light Maps）

當你做好模型和貼圖之後，現在就可以來烘焙光照貼圖了。Cocos 2d-x目前還不像Unreal或Unity一樣在官方編輯器里提供烘焙光照貼圖的功能，但是別失望，大部分的製作3D模型的軟件都可以烘焙光照貼圖，並且效果比市面上任何遊戲引擎的效果還好。首先，在你的3D工具軟件里，先給場景打好燈光，照亮場景，然後為每份網格製作第二張UV map。每份網格的表面都必須被映射在0到1範圍內的UV 平面上。這聽起來好像很複雜且耗時，但在Modo里這是非常簡單的。我先後使用 「Atlas map」的UV 工具和「Pack UV」工具，這兩個工具會自動將網格展開成一個相當不錯的排布圖。

這些都完成之後，設置3D工具軟件的渲染器為「只渲染烘焙的光照」，然後開始渲染。當然了，如果你想做一些環境光遮罩的效果也是可以的。

你也可以使用一些分辨率較低的光照貼圖。有時候這樣的效果反而會看起來更好，因為相互混疊的模糊像素會讓陰影看起來更柔和。上面的這些建築都映射到一張512 x 512的光照貼圖上。整個場景總共使用了4 張512 x 512的光照貼圖。請確保每個小圖塊之間有一定的空隙，且讓你的渲染範圍比這些圖塊的邊界多出幾個像素。這樣可以防止當較低的mip-maps（一種紋理採樣）起作用時黑邊出現在網格周圍的角落裡。

最後一點聽起來像是3D技術的行話。如果是對Texture Packer熟悉的話，那麼其中的「Extrude」值起到的作用就是剛剛我所描述的。對貼圖的邊緣接縫做一些塗抹處理，這樣在精靈之間就不會有那些煩人的縫隙了，那些縫隙在這裡會變成多邊形邊緣的黑邊。

如果你想犧牲內存和包大小來提高性能的話，你可以把顏色和光照信息都烘焙到一張貼圖上並避免共同使用一張光照貼圖。但是這樣做的話，同樣的像素密度，貼圖的大小至少得翻一倍。這完全取決於你個人、以及你遊戲的要求。

接下來，添加頂點顏色。我在地形上提供了頂點顏色，這可以讓着色器在合成懸崖頂上的草地貼圖時，不會有任何可見的接縫。下圖中塗成白色的頂點部分可以合成你指定的貼圖。在這個例子里實際上我只使用紅色通道，當然了根據實際需要你可以使用4個通道（RGBA）去合成不同的貼圖。

最後，我把整個場景分成了很多獨立的網格（mesh）：每個建築都有自己獨立的網格，地形獨立一個網格，水也是獨立一個。帶透明遮罩的貼圖也會有一個網格——比如視頻中看到的植物葉子和小旗子。我這樣做有兩個原因，首先，讓地形、建築、水和帶透明遮罩的貼圖各自使用不同的着色器。其次，我們打算通過不渲染攝像機範圍外的對象來減少性能開支。很重要的一點是攝像機會根據網格的包圍盒來決定對象是否可見，因此盡量把網格弄成小塊，這樣包圍盒會比較小。

導出

完成了模型和貼圖之後，我們需要把每個mesh導出為一個.fbx文件。幸運的是，大多數的3D建模軟件都支持這個功能。Autodesk為此格式提供了一個免費SDK。但不幸的是，Modo 701在導出fbx格式時會出現相當多的錯誤。因此我必須自己寫一些腳本來保證第二組貼圖坐標和頂點顏色的正確導出。你可以從我個人網站上的「Modo Scripts」部分下載這個導出腳本。搞定fbx之後，你將需要用到Cocos 2d-x自帶的fbx-conv.exe命令行工具，它位於Cocos 2d-x根目錄的/tools下。

fbx-conv.exe -a your_mesh_name_here.fbx

使用「-a」參數後，工具會同時導出mesh的二進制文件(.c3b)和文本格式文件(.c3t)。文本格式的文件非常的有用，你可以利用它來查看所有的東西是否被正確導出，但千萬不要把它放到resource目錄下。如果所有的都被正確地導出的話，你將在c3t文件的開頭看到以下的內容：

「attributes」: [{

「size」: 3,

「type」: 「GL_FLOAT」,

「attribute」: 「VERTEX_ATTRIB_POSITION」

}, {

「size」: 3,

「type」: 「GL_FLOAT」,

「attribute」: 「VERTEX_ATTRIB_NORMAL」

}, {

「size」: 2,

「type」: 「GL_FLOAT」,

「attribute」: 「VERTEX_ATTRIB_TEX_COORD」

}, {

「size」: 2,

「type」: 「GL_FLOAT」,

「attribute」: 「VERTEX_ATTRIB_TEX_COORD1″

}]

注意VERTEX_ATTRIB_TEX_COORD1這個屬性。如果沒有它光照貼圖將無法顯示。如果你導出了一張帶頂點顏色的mesh，你也應該要看到一個類似的屬性才行。還有一點很重要，貼圖的坐標也必須按正確的順序才行。我通常採用的是第一個tex_coord是瓦片貼圖，最後一個tex_coord是光照貼圖。使用Modo的話，uv maps會按照字母順序排列。

着色器（Shaders）

我花了很長的一段時間來搞懂GLSL和着色器，但正如編程中經常遇到的，有時候一個點通了，其他的就都好理解了。一旦理解了其中的原理，你便會發現着色器真的很簡單。如果你不只是想用Cocos 2d-x來把貼圖套到模型網格上的話，你需要學會如何寫着色器。目前Cocos 2d-x沒有Unreal那樣好用的着色器可視化編輯器（visual shader editor），所以我們只能自己動手焊代碼。

本節我將講解我為視頻中的遊戲場景所寫的着色器，並說明我做了什麼、為什麼這樣做。如果你對着色器已經非常熟悉了，那麼可以快速跳過本節。

首先，先來看一下如何將着色器應用到模型網格上。

這段代碼摘自Cocos 2d-x的測試集cpp-tests工程。如果你用不同的着色器來加載大量的meshes，那麼最好根據功能來進行，這樣可以避免冗餘。那麼現在我們只關心如下的代碼段，來看下這個着色器。

GLProgram* shader =GLProgram::createWithFilenames(「shaders/lightmap1.vert」,」shaders/lightmap2.frag」);

GLProgramState* state = GLProgramState::create(shader);

mesh-setGLProgramState(state);

Texture2D* lightmap =Director::getInstance()-getTextureCache()-addImage(「lightmap.png」);

state-setUniformTexture(「lightmap」,lightmap);

「lightmap1.vert」是頂點着色器（vertex shader）。如果將其應用到網格上，那麼每個頂點的每一幀都將執行這個操作。而「lightmap2.frag」是片段着色器（fragment shader），網格上貼圖的每個像素的每一幀都將執行這個操作。我不太確定為什麼將其命名為「片段着色器」，我一直認為應叫做「像素」着色器（pixel shader）。從這段描述，我們可以很容易理解為什麼大量着色器指令會降低幀率，尤其是你用片段着色器的話。

接下來我們詳細地分解頂點着色器：

attribute vec4 a_position;

attribute vec2 a_texCoord;

attribute vec2 a_texCoord1;

這些屬性是由渲染器提供的。「a_position」是頂點的位置。「a_texCoord」 和 「a_texCoord1」對應你那兩個UV坐標。還記得在.cbt文本格式文件中開頭部分的「VERTEX_ATTRIB_TEX_COORD」么？這些值與屬性對應起來了。你可以在渲染器中獲取更多其他的屬性，包括頂點法線（vertexnormal）和頂點顏色（vertex color）。請在cocos引擎的CCGLProgram.cpp中查看完整屬性列表。

varying vec2 v_texture_coord;

varying vec2 v_texture_coord1;

「varying」值將被傳到片段着色器中（fragment shader）。片段着色器所需要的任何變量前都需要添加「varying」限定符。這個例子中，我們僅需要知道這兩個貼圖的坐標。

void main(void)

{

gl_Position = CC_MVPMatrix * a_position;

v_texture_coord.x = a_texCoord.x;

v_texture_coord.y = (1.0 – a_texCoord.y);

v_texture_coord1.x = a_texCoord1.x;

v_texture_coord1.y = (1.0 – a_texCoord1.y);

}

設置頂點位置，拷貝貼圖的坐標給varying values，這樣片段着色器就可以使用這些值。現在我們一起來分解片段着色器。

#ifdef GL_ES

varying mediump vec2 v_texture_coord;

varying mediump vec2 v_texture_coord1;

#else

varying vec2 v_texture_coord;

varying vec2 v_texture_coord1;

#endif

聲明從頂點着色器傳遞過來的「varying」 值

uniform sampler2D lightmap;

還記得在將着色器應用到網格時所使用的 state-setUniformTexture(「lightmap「,light map); 語句么？這個值就是對應語句中的那個貼圖。

void main(void)

{

gl_FragColor = texture2D(CC_Texture0, v_texture_coord) *(texture2D(lightmap, v_texture_coord1) * 2.0);

}

這個語句設置像素顏色。首先你會注意到從未聲明過的 CC_Texture0變量。Cocos 2d-x中有大量可在着色器中使用的默認統一變量。再次強調，可在CCGLProgram.cpp中查看完整屬性列表。這個例子中，CC_Texture0對應在3D模型中所應用到網格中的貼圖。texture2D命令會在給定的貼圖坐標中去查找貼圖的像素顏色和透明度。它會返回一個包含了那個像素的RGBA值的vec4值 。所以這裡我會在UV1中查找到瓦片貼圖的顏色值，然後在UV2中查到光照貼圖的顏色值，最後把兩個值相乘。

你應該注意到了我先是把光照貼圖的顏色值兩兩相乘了。因為貼圖顏色值範圍為0.0-1.0，所以很顯然，如果用白色值vec4(1.0, 1.0, 1.0, 1.0)去乘中間灰值vec4( 0.5, 0.5, 0.5,1.0 )，那麼你仍是得到一個中間灰值vec4( 0.5, 0.5, 0.5,1.0 )。將兩個值相乘可以使貼圖更亮，同時也可以使貼圖更暗，這將使你獲得一個很好的可變的亮度範圍。

Threejs 3D中文字體引入及優化

threejs中需要引入中文字體，官網給出的字體文件都是英文的，想要顯示出中文字體需要做轉換。

1、在本地電腦找個小點的中文字體文件（C:\Windows\Fonts），我用的是華文行楷

2、然後用字體提取工具提取出要顯示的文字。

在線轉換：

3、將上一步導出的.ttf文件轉成json格式

轉換工具：

4、轉換生成出json文件用FontLoader導入