Sprite渲染流程-TrianglesCommand

简介: Sprite渲染流程-TrianglesCommand

Spite中初始化

TrianglesCommand _trianglesCommand;     
_trianglesCommand.init(_globalZOrder,
                           _texture,
                           getGLProgramState(),
                           _blendFunc,
                           _polyInfo.triangles, // 类型为Triangles
                           transform,
                           flags);
复制代码
struct Triangles
{
    /**Vertex data pointer.*/
    V3F_C4B_T2F* verts; // 注意这里是V3F
    /**Index data pointer.*/
    unsigned short* indices;
    /**The number of vertices.*/
    int vertCount;
    /**The number of indices.*/
    int indexCount;
};
复制代码

填充顶点数据的逻辑

void Renderer::fillVerticesAndIndices(const TrianglesCommand* cmd)
{
    memcpy(&_verts[_filledVertex], cmd->getVertices(), sizeof(V3F_C4B_T2F) * cmd->getVertexCount());
    // fill vertex, and convert them to world coordinates
    const Mat4& modelView = cmd->getModelView();
    for(ssize_t i=0; i < cmd->getVertexCount(); ++i)
    {
        modelView.transformPoint(&(_verts[i + _filledVertex].vertices));
    }
    // fill index
    const unsigned short* indices = cmd->getIndices();
    for(ssize_t i=0; i< cmd->getIndexCount(); ++i)
    {
        _indices[_filledIndex + i] = _filledVertex + indices[i];
    }
    _filledVertex += cmd->getVertexCount();
    _filledIndex += cmd->getIndexCount();
}
复制代码

setupVBOAndVAO函数规定了如何解析顶点数据, 数据结构类型就是V3F_C4B_T2F

void Renderer::setupVBOAndVAO()
{
    //generate vbo and vao for trianglesCommand
    glGenVertexArrays(1, &_buffersVAO);
    GL::bindVAO(_buffersVAO);
    glGenBuffers(2, &_buffersVBO[0]);
    glBindBuffer(GL_ARRAY_BUFFER, _buffersVBO[0]);
    // vertices
    glEnableVertexAttribArray(GLProgram::VERTEX_ATTRIB_POSITION);
    glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_POSITION, 3, GL_FLOAT, GL_FALSE, sizeof(V3F_C4B_T2F), (GLvoid*) offsetof( V3F_C4B_T2F, vertices));
    // colors
    glEnableVertexAttribArray(GLProgram::VERTEX_ATTRIB_COLOR);
    glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_COLOR, 4, GL_UNSIGNED_BYTE, GL_TRUE, sizeof(V3F_C4B_T2F), (GLvoid*) offsetof( V3F_C4B_T2F, colors));
    // tex coords
    glEnableVertexAttribArray(GLProgram::VERTEX_ATTRIB_TEX_COORD);
    glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_TEX_COORD, 2, GL_FLOAT, GL_FALSE, sizeof(V3F_C4B_T2F), (GLvoid*) offsetof( V3F_C4B_T2F, texCoords));
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, _buffersVBO[1]);
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(_indices[0]) * INDEX_VBO_SIZE, _indices, GL_STATIC_DRAW);
    // Must unbind the VAO before changing the element buffer.
    GL::bindVAO(0);
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
    glBindBuffer(GL_ARRAY_BUFFER, 0);
    CHECK_GL_ERROR_DEBUG();
}
复制代码

顶点数据布局

Position Color TexCoord
Vec3 Color4B Vec2

可以使用Vec3的Z进行纹理单元的设置



目录
相关文章
|
前端开发
Threejs - 加载视频纹理渲染 实现一个3D视频播放器
Threejs - 加载视频纹理渲染 实现一个3D视频播放器
1996 0
Threejs - 加载视频纹理渲染 实现一个3D视频播放器
|
编解码
Blender视图渲染知识
Blender视图渲染知识
Blender视图渲染知识
|
存储 缓存 前端开发
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
通过Upload组件结合react-Cropper实现图片的裁剪上传组件封装,剖析antd-img-crop源码实现的逻辑,对自己封装的组件进行进一步优化,改造!
4408 0
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
|
6天前
|
缓存
Flutter Image从网络加载图片刷新、强制重新渲染
Flutter Image从网络加载图片刷新、强制重新渲染
12 1
|
3月前
|
前端开发
react函数组件购物车小球动画实现
react函数组件购物车小球动画实现
65 0
react函数组件购物车小球动画实现
|
9月前
|
小程序 JavaScript API
小程序图片渲染
小程序图片渲染
78 0
|
10月前
|
小程序 UED
微信小程序轮播图image控件图片mode属性自适应及解决图片加载闪烁bug
微信小程序轮播图image控件图片mode属性自适应及解决图片加载闪烁bug
329 0
|
12月前
|
前端开发 API
vue3使用canvas画布合成图片
Vue3中可以使用&lt;canvas>标签绘制图形,并使用Canvas API对图形进行操作和绘制,其中包括了对图形进行合成的方法。下面是一个使用Canvas API合成图片的简单例子:
884 0
|
前端开发 JavaScript
【Render】如何将数据渲染到页面?渲染数据的流程
【Render】如何将数据渲染到页面?渲染数据的流程
167 0
Sprite渲染流程-纹理绑定
Sprite渲染流程-纹理绑定
75 0