Concept mapping, mind mapping and argument mapping: what ...
Cocos2dx Tips - Box2d, Normal mapping
-
Upload
akihiro-matsuura -
Category
Technology
-
view
866 -
download
4
description
Transcript of Cocos2dx Tips - Box2d, Normal mapping
Cocos2d-x - Tips
株式会社シュハリ!代表取締役 松浦 晃洋
自己紹介• 松浦 晃洋!• 株式会社シュハリ 代表取締役!• Cocos2d-x 開発のレシピ執筆!
• 専門学校 Cocos2d-x 講師
• @syuhari!
• facebook.com/syuhari
• お絵描き Physics
• Soft Physics
• 法線マップ
Tips
お絵描き Physics
https://github.com/syuhari/Freehand
指で描いている最中 (CCTouchMoved)
指で描くのが終了 (CCTouchEnded)
物理オブジェクトの塊に テクスチャを貼り付ける
処理概要
Soft Physics
https://github.com/syuhari/SoftPhysics
http://www.uchidacoonga.com/2012/03/soft-body-physics-with-box2d-and-cocos2d-part-14/
• 中心となるオブジェクトを一つ作成 • その周りにオブジェクトをジョイントする • 一塊のオブジェクトにテクスチャをマッピングする
物理オブジェクトの構造
// テクスチャを作成 texture = CCTextureCache::sharedTextureCache()->addImage("texture.png"); !kmGLPushMatrix(); ccGLBindTexture2D(texture->getName()); texture->getShaderProgram()->use(); texture->getShaderProgram()->setUniformsForBuiltins(); ccGLEnableVertexAttribs( kCCVertexAttribFlag_Position|kCCVertexAttribFlag_TexCoords); !glVertexAttribPointer( 1, 2, GL_FLOAT, GL_FALSE, 0, triangleFanPos); glVertexAttribPointer( 2, 2, GL_FLOAT, GL_FALSE, 0, textCoords); glDrawArrays(GL_TRIANGLE_FAN, 0, NUM_SEGMENTS+2); !kmGLPopMatrix();
テクスチャのマッピング
法線マップ
https://github.com/syuhari/Freehand
法線ベクトル3次元ではある面に垂直なベクトル
法線マップ
• 通常の画像は各ドットが RGB • 法線マップは RGB の部分が XYZ に相当 • 各ドットがどの方向を向いているか分かる
#ifdef GL_ES precision mediump float; #endif !varying vec2 v_texCoord; uniform sampler2D u_texture; uniform sampler2D u_normalMapTexture; uniform vec3 u_lightNormal; !void main() { ! vec4 normalMap = texture2D( u_normalMapTexture, v_texCoord ); normalMap.xyz = normalMap.xyz - 0.5; gl_FragColor = texture2D( u_texture, v_texCoord ); vec3 ret = gl_FragColor.rgb * max( 0.1, dot( normalMap.rgb, u_lightNormal ) )*3.0; gl_FragColor.rgb = ret.rgb; }
フラグメントシェーダー (GLSL)
int len = 0; const GLchar * fragmentSource = (GLchar*)CCFileUtils::sharedFileUtils() ->getFileData("MapShader.fsh", "rb", (unsigned long*)(&len)); !shader = new CCGLProgram(); setShaderProgram(shader); shader->initWithVertexShaderByteArray( ccPositionTextureA8Color_vert, fragmentSource); !shader->addAttribute( kCCAttributeNamePosition, kCCVertexAttrib_Position); shader->addAttribute( kCCAttributeNameTexCoord, kCCVertexAttrib_TexCoords); !shader->link(); shader->updateUniforms();
フラグメントシェーダーをリンクする
// ファイル名に「_n」を付けたリソースを法線マップとして読込む std::string map = baseName + "_n.png"; colorRampTexture = CCTextureCache::sharedTextureCache()->addImage(map.c_str()); colorRampTexture->setAliasTexParameters(); this->shader->use(); glActiveTexture(GL_TEXTURE1+tex); glBindTexture(GL_TEXTURE_2D, colorRampTexture->getName()); glActiveTexture(GL_TEXTURE0);
法線マップを読み込む
float xx, yy, zz, length; !//シェーダー使用を宣言 this->shader->use(); // 光源までの距離 CCSize size = CCDirector::sharedDirector()->getWinSize(); xx = (this->getLight().x - this->getPositionX()) / size.width; yy = (this->getLight().y - this->getPositionY()) / size.height; !length = sqrtf( xx * xx + yy * yy ); zz = 1-length; length = sqrtf( zz * zz + xx * xx + yy * yy ); zz = zz / length; xx = xx / length; yy = yy / length; //シェーダープログラムに光源の位置をセット glUniform3f(lightNormalUniformLocation, xx, yy, zz);
法線マップを読み込む
エンジニア募集中!
• @syuhari!
• facebook.com/syuhari