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进行纹理单元的设置



目录
相关文章
|
编解码
Blender视图渲染知识
Blender视图渲染知识
Blender视图渲染知识
|
18天前
|
XML 前端开发 JavaScript
如何使用 SVG 和 Canvas 来创建动画?
【10月更文挑战第24天】使用 SVG 和 Canvas 创建动画都有各自的特点和优势,SVG 更适合基于 XML 和 CSS 的简单动画,而 Canvas 则更适合通过 JavaScript 实现复杂的、高性能的动画效果。在实际应用中,可以根据具体的需求和场景选择合适的技术来创建动画。
37 1
|
1月前
|
前端开发
ThreeJs通过canvas和Sprite添加标签
这篇文章介绍了在Three.js中利用Canvas和Sprite实现动态文本标签的方法,使得标签可以跟随模型并在3D空间中始终保持面向摄像机。
58 0
ThreeJs通过canvas和Sprite添加标签
|
3月前
|
前端开发
|
3月前
|
缓存
Flutter Image从网络加载图片刷新、强制重新渲染
Flutter Image从网络加载图片刷新、强制重新渲染
119 1
|
4月前
|
前端开发 JavaScript 流计算
canvas系列教程05 ——交互、动画
canvas系列教程05 ——交互、动画
24 0
|
6月前
|
移动开发 前端开发 JavaScript
canvas内容移动与交互
canvas内容移动与交互
|
6月前
dragonBones使用Sprite换肤后mesh问题
dragonBones使用Sprite换肤后mesh问题
62 0
|
6月前
|
监控 前端开发 JavaScript
SVG实现流程动态效果
SVG实现流程动态效果
67 0
|
前端开发 JavaScript
优美的Reactl列表动画:Styled-Components动画实践
优美的Reactl列表动画:Styled-Components动画实践