regl vao 三角形交替

原文链接: regl vao 三角形交替

上一篇: chrome 查看图片内存占用和GPU内存占用

下一篇: regl 多实例绘制ANGLE_instanced_arrays 和 instances

http://www.jiazhengblog.com/blog/2017/04/17/3127/

画两个相互交替的三角形, 主要目的是使用vao保存状态, 这样再次绘制时不需要重新创建数据和顶点状态, 使用vao索引来找数据

然后发现api文档有些小问题, 蹭了个pr...

import createREGL from "regl";
export default (canvas: HTMLCanvasElement) => {const regl = createREGL(canvas);// First we create the VAO objectconst vao1 = regl.vao([// first attribute is a triangle[[-1, 1],[1, -1],[-1, -1],],// second attribute is a color{ x: 1, y: 0, z: 1 },]);const vao2 = regl.vao([// first attribute is a triangle[[1, 1],[-1, 1],[1, -1],],// second attribute is a color{ x: 0, y: 1, z: 1 },]);const vaoList = [vao1, vao2];// then we create the commandconst draw = regl({frag: `precision highp float;varying vec3 fragColor;void main () {gl_FragColor = vec4(fragColor, 1.);}`,vert: `precision highp float;attribute vec2 position;attribute vec3 color;varying vec3 fragColor;void main () {fragColor = color;gl_Position = vec4(position, 0, 1);}`,// specify the vertex array object for this commandvao: regl.prop("vao"),// when using a VAO object we give numerical ids for each attribute binding locationattributes: {position: 0,color: 1,},count: 3,});let i = 0;setInterval(() => {draw({ vao: vaoList[i++ % 2] });}, 1000);
};

regl vao 三角形交替相关推荐

【OpenGL4.0】GLSL渲染语言入门与VBO、VAO使用：绘制一个三角形
以前都是用Cg的,现在改用GLSL,又要重新学,不过两种语言很多都是相通的. 下面的例子是实现绘制一个三角形的简单程序.采用了VBO(veretx buffer object).VAO(vertex ...
OPenGL 学习笔记之 VAO VBO EBO 以及SHADER 并使用其绘制三角形
译注在学习此节之前,建议将这三个单词先记下来: 顶点数组对象:Vertex Array Object,VAO 顶点缓冲对象:Vertex Buffer Object,VBO 索引缓冲对象:Eleme ...
VBO，VAO,，EBO-penGL进阶(二十) - 绘制一个长方形和一个三角形
简介先看最终效果今天要学习的重点是怎样在场景中绘制两个(或者以上的)物体, 方框的绘制方框其实是由两个三角形组成,看一下VBO, VAO, EBO的定义 GLfloat vertices[] = ...
OpenGL使用纯VBO方式渲染出三角形，非VAO
OpenGL使用纯VBO方式渲染出三角形,要设置兼容格式GLFW_OPENGL_COMPAT_PROFILE. // 必须使用VAO渲染 //glfwWindowHint(GLFW_OPENG ...
《Qt-OpenGL系列编程》课程学习记录（1）：相关概念、VAO、VBO、绘制三角形、使用OpenGL原生方式编译链接着色器程序
大家可以去B站看课程的视频支持一下作者哈: OpenGL,Qt实现:1入门篇(已更完)_哔哩哔哩_bilibili课程相关源码.PPT.安装包,完整课程合集(1:入门篇:2:基础光照:3:模型加载:4 ...
OpenGL学习笔记(八)：进一步理解VAO、VBO和SHADER，并使用VAO、VBO和SHADER绘制一个三角形
原博主博客地址:http://blog.csdn.net/qq21497936 本文章博客地址:http://blog.csdn.net/qq21497936/article/details/7888 ...
多个着色器与多个VAO,VBO绘制三角形
多个着色器与多个VAO,VBO绘制三角形设置不同片段着色器绘制两个三角形设置多个不同片段着色器绘制三个三角形写在最前面: 如果对一个三角形的绘制过程还不明白建议先去看看
Learn OpenGL （二）：三角形
知识补充: 顶点数组对象:Vertex Array Object,VAO 顶点缓冲对象:Vertex Buffer Object,VBO 索引缓冲对象:Element Buffer Object,EB ...
opengl 创建context_OpenGL学习笔记1-创建窗口，绘制三角形
使用GLFW创建窗口首先引用头文件 #include <glad/glad.h> #include <GLFW/glfw3.h> //注意头文件引用的先后顺序 glfwIni ...

regl vao 三角形交替

regl vao 三角形交替相关推荐

最新文章

热门文章