opengl es 2.0游戏与图形编程——2.设置图形投影

注意:本文是读书笔记,代码是使用书中sdk的,主要掌握重点知识,别在意小细节

1.两种投影:正交投影(2d,但可使用z,只是透视完全基于当前屏幕比),透视投影(3d)


2.初始设置矩阵

  模型视图矩阵:物体空间 -> (模型)世界空间 ->(视图) 摄像机空间

  拓展:

[视图变换]
  当摄像机的位置和朝向任意时,投影变换及气体类型的变换变得困难。为了简化运算,我们将摄像机变化到世界坐标系原点,并旋转使摄像机的 光轴和世界坐标系z轴正方向一致。
  
  视图变换是从世界坐标系到摄像机坐标系的变换,计算就是将摄像机弄回原点并对齐z轴的变换(也可以是将摄像机从坐标轴原点移动到摄像机当前位置的 逆变换)。

  许多计算都在眼睛坐标系中完成,一个常用的就是光照需要在这个空间中实现,因为眼睛位置决定了光照效果,否则的话,很难实现镜面光。因此我们需要将法线坐标转换到眼睛坐标系中。

  标准向量(Normal vectors)——从对象坐标系(Object coordinates)变换到视觉坐标系(eye coordinates),它是用来计算光照(lighting calculation)的.注意标准向量(Normal vectors)的变换和顶点的不同。其中视觉矩阵(view matrix)是GL_MODELVIEW逆矩阵的转置矩阵和标准向量(Normal vector是)相乘所得。
  代码:

	GFX_set_matrix_mode( MODELVIEW_MATRIX );
	
	GFX_load_identity();

    vec3 e = {0.0f, -3.0f, 0.0f},
    c = {0.0f, 0.0f, 0.0f},
    u = {0.0f, 0.0f, 1.0f};
    
    GFX_look_at(&e, &c, &u);
    
    static float y = 0.0f;
    y += 0.1f;
    GFX_translate(0.0f, y, 0.0f);
    GFX_rotate(y * 50.0f, 1.0f, 1.0f, 1.0f);

  投影矩阵:摄像机空间 -> 裁减空间(视锥空间)

// 2d
        GFX_set_orthographic((float)height / (float)width, 5.0f, (float)width / (float)height, 1.0f, 100.0f, 0.0f);
        
        // 3d
        GFX_set_perspective(45.0f, (float)width / (float)height, 0.01f, 100.0f, 0.0f);

3.使用着色器

  

program = PROGRAM_init( ( char * )"default" );
	
	program->vertex_shader = SHADER_init( VERTEX_SHADER, GL_VERTEX_SHADER );
   
	program->fragment_shader = SHADER_init( FRAGMENT_SHADER, GL_FRAGMENT_SHADER );	
	
	m = mopen( VERTEX_SHADER, 1 );
	
	if( m ) {
	
		if( !SHADER_compile( program->vertex_shader,
						     ( char * )m->buffer,
							 DEBUG_SHADERS ) ) exit( 1 );
	}
	m = mclose( m );

	m = mopen( FRAGMENT_SHADER, 1 );
	
	if( m ) {
	
		if( !SHADER_compile( program->fragment_shader,
						     ( char * )m->buffer,
						     DEBUG_SHADERS ) ) exit( 2 ); 
	}
	  
	m = mclose( m );

   if( !PROGRAM_link( program, DEBUG_SHADERS ) ) exit( 3 );
  上面创建了一个着色器程序,并读取和编译了顶点着色器和片段着色器,然后链接了这个着色器程序。

  下面是绘制时的代码:

if( program->pid ) {
	
		char attribute, uniform;
		
		glUseProgram( program->pid );
	
		uniform = PROGRAM_get_uniform_location( program, ( char * )"MODELVIEWPROJECTIONMATRIX" );
		glUniformMatrix4fv( uniform,
				1 /* How many 4x4 matrix */,
				GL_FALSE /* Transpose the matrix? */, 
				( float * )GFX_get_modelview_projection_matrix() );		

		attribute = PROGRAM_get_vertex_attrib_location( program, ( char * )"POSITION" );
		glEnableVertexAttribArray( attribute );
		glVertexAttribPointer( attribute, 3, GL_FLOAT, GL_FALSE, 0, POSITION );
	
		attribute = PROGRAM_get_vertex_attrib_location( program, ( char * )"COLOR" );
		glEnableVertexAttribArray( attribute );
		glVertexAttribPointer( attribute, 4, GL_FLOAT, GL_FALSE, 0, COLOR );

		glDrawArrays( GL_TRIANGLE_STRIP, 0, 4 );
	}		
  先使用来该着色器程序,获取其中定义的全局uniform变量 MODELVIEWPROJECTION 的地址location,并设置其值。

  同理设置了要绘制的顶点多两个属性的值(数组),属性值如下:

	static const float POSITION[ 12 ] = {
	-0.5f, 0.0f, -0.5f, // Down left (pivot point)
	0.5f, 0.0f, -0.5f, // Up left
	-0.5f, 0.0f, 0.5f, // Down right
	0.5f, 0.0f, 0.5f  // Up right
	};
	
	static const float COLOR[ 16 ] = {
	1.0f, 0.0f, 0.0f, 1.0f, // Red
	0.0f, 1.0f, 0.0f, 1.0f, // Green
	0.0f, 0.0f, 1.0f, 1.0f, // Blue
	1.0f, 1.0f, 0.0f, 1.0f  // Yellow
	};	
  设置好变量和值后就提交渲染了。


4.着色器代码

  顶点着色器:

uniform mediump mat4 MODELVIEWPROJECTIONMATRIX;

attribute mediump vec4 POSITION;

attribute lowp vec4 COLOR;

varying lowp vec4 color;

void main( void ) {

	gl_Position = MODELVIEWPROJECTIONMATRIX * POSITION;

	color = COLOR;

}
  主要就是把cpp里传来的顶点位置属性 左乘了 模型视图 投影矩阵,即被变换到裁剪空间了,并用gl_Position输出。然后给片段着色器传递了一个color变量(varying标记)。

  片段着色器:

varying lowp vec4 color;

void main( void ) {

	gl_FragColor = color;

}
  直接输出顶点着色器传来的颜色值。

  最终效果如下:

opengl es 2.0游戏与图形编程——2.设置图形投影_第1张图片


5.看下cocos2dx

  设置矩阵:

case Projection::_2D:
        {
            loadIdentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION);

            Mat4 orthoMatrix;
            Mat4::createOrthographicOffCenter(0, size.width, 0, size.height, -1024, 1024, &orthoMatrix);
            multiplyMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION, orthoMatrix);
            loadIdentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
            break;
        }
            
        case Projection::_3D:
        {
            float zeye = this->getZEye();

            Mat4 matrixPerspective, matrixLookup;

            loadIdentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION);

            // issue #1334
            Mat4::createPerspective(60, (GLfloat)size.width/size.height, 10, zeye+size.height/2, &matrixPerspective);

            multiplyMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION, matrixPerspective);

            Vec3 eye(size.width/2, size.height/2, zeye), center(size.width/2, size.height/2, 0.0f), up(0.0f, 1.0f, 0.0f);
            Mat4::createLookAt(eye, center, up, &matrixLookup);
            multiplyMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION, matrixLookup);
            
            loadIdentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
            break;
        }
  默认是3d方式,投影矩阵里已经乘了一个往屏幕中心看的摄像机矩阵了。

  节点的模型视图矩阵:

Mat4 Node::transform(const Mat4& parentTransform)
{
    return parentTransform * this->getNodeToParentTransform();
}
  这个会传递给渲染命令RenderCommand使用,比如:

void TrianglesCommand::useMaterial() const
{
    //Set texture
    GL::bindTexture2D(_textureID);
    
    //set blend mode
    GL::blendFunc(_blendType.src, _blendType.dst);
    
    _glProgramState->apply(_mv);
}
  被着色器程序状态ProgramState作为内置的全局变量CC_MVMatrix  (还有类似的 CC_MVPMatrix)传递给其着色器代码使用。
  着色器代码:

const char* ccPositionColor_vert = STRINGIFY(

attribute vec4 a_position;
attribute vec4 a_color;

\n#ifdef GL_ES\n
varying lowp vec4 v_fragmentColor;
\n#else\n
varying vec4 v_fragmentColor;
\n#endif\n

void main()
{
    gl_Position = CC_MVPMatrix * a_position;
    v_fragmentColor = a_color;
}
);

const char* ccPositionColor_frag = STRINGIFY(

\n#ifdef GL_ES\n
precision lowp float;
\n#endif\n

varying vec4 v_fragmentColor;

void main()
{
    gl_FragColor = v_fragmentColor;
}
);



  

你可能感兴趣的:(cocos2dx,DirectX/Opengl)