WebGL利用缓冲区绘制三角和矩形-程序员宅基地
什么是attribute 变量
它是一种存储限定符，表示定义一个attribute的全局变量，这种变量的数据将由外部向顶点着色器内传输，并保存顶点相关的数据，只有顶点着色器才能使用它
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="webgl" width="200" height="200"></canvas>
<script>
const webgl = document.getElementById('webgl')
const gl = webgl.getContext('webgl')
// 创建着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER)
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
// 绑定数据源
// 声明顶点着色器 attribute 变量
gl.shaderSource(vertexShader, `
attribute vec4 a_Position;
void main(){
gl_Position = a_Position;
gl_PointSize = 20.0;
}
`)
gl.shaderSource(fragmentShader, `
void main(){
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`)
// 编译着色器
gl.compileShader(vertexShader)
gl.compileShader(fragmentShader)
// 创建着色器程序
const program = gl.createProgram()
// 绑定着色器
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)
// 连接着色器
gl.linkProgram(program)
// 使用着色器
gl.useProgram(program)
// 定义一个类型数组保存顶点坐标值
const vertices = new Float32Array([
//x, y
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
])
// 创建缓冲区
const vertexBuffer = gl.createBuffer()
// 绑定缓冲区
// target 要把缓冲区放在webgl系统中的什么位置, buffer 缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
// 写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
// 获取到顶点着色器中变量
const a_Position = gl.getAttribLocation(program, 'a_Position')
// 从当前绑定的缓冲区中读取顶点数据(index, size, type, normalized是否顶点数据归一, stride相邻两个顶点间的字节数, offset从缓冲区的什么位置开始存储变量)
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
// 开启顶点数据的批处理功能
gl.enableVertexAttribArray(a_Position)
// 绘制指定位置的三角
// 点
// gl.drawArrays(gl.POINTS, 0, 3)
// 闭合线条
// gl.drawArrays(gl.LINE_LOOP, 0, 3)
// 单独三角形 (如果是正面，逆时针绘制, 实际引擎开发中用的最多，就是比较费点)
gl.drawArrays(gl.TRIANGLES, 0, 3)
// LINES 单独线段（每2组一条线）
// LINE_STRIP 线条 (线条相连，但首尾不相连)
</script>
</body>
</html>
TRIANGLE_STRIP 三角带
TRIANGLE_FAN 三角扇
以上四个面得绘制顺序是：
v0>v1>v2
以上一个三角形的第三条边+下一个点为基础，按照和第三条边相反的顺序，绘制三角形
v0>v2>v3
同上
v0>v3>v4
同上
v0>v4>v5
同上
绘制矩形面
webgl可绘制的面只有三角面，要绘制矩形的话，只能用两个三角形去拼
智能推荐
强力推荐！那些你不能错过的 GitHub 插件和工具_github与gitpod的插件-程序员宅基地
文章浏览阅读1.4w次，点赞5次，收藏19次。http://www.gad.qq.com/article/detail/32503以代码托管平台起家的 GitHub 网站，已然成为全球程序员工作和生活中不可或缺的一份子。从优秀的企业，到优秀的程序员，都将自己最优秀的代码作品存放在这片开源净土里，供彼此学习交流。GitHub Trending 栏目甚至已经成为 IT 从业人员的新闻日报，每日必读。既然 GitHu_github与gitpod的插件
PTPX中的time_based analysis-程序员宅基地
文章浏览阅读1.1k次。根据VCD文件的type，PTPX支持instantaneous peak power analysis和cycle_accurate peakpower analysis。Time-Based Power Analysis支持的VCD type 由于Gate_level和zero_delay的VCD不支持event propa..._ptpx time
VisualSVN安装图解-程序员宅基地
文章浏览阅读79次。VisualSVN安装教程、、、-----------------------------------参考网址：https://www.visualsvn.com/server/download/安装参考网址：http://www.jb51.net/article/71815.htm----------------------------------------------..._安装visualsvn
使用wordpress搭建个人网站保姆级教程_wordpress建站-程序员宅基地
文章浏览阅读8.6k次，点赞7次，收藏97次。图文结合地介绍如何快速搭建一个自己的博客网站_wordpress建站
C语言嵌入式系统编程修炼之道——软件架构篇-程序员宅基地
文章浏览阅读2.4k次。 1.模块划分模块划分的“划”是规划的意思，意指怎样合理的将一个很大的软件划分为一系列功能独立的部分合作完成系统的需求。C语言作为一种结构化的程序设计语言，在模块的划分上主要依据功能（依功能进行划分在面向对象设计中成为一个错误，牛顿定律遇到了相对论），C语言模块化程序设计需理解如下概念：（1） 模块即是一个.c文件和一个.h文件的结合，头文件(.h)中是对于该模块接口的声明；_c语言嵌入式系统编程修炼之道
多线程 +1操作的几种实现方式，及效率对比_atomicinteger+1-程序员宅基地
文章浏览阅读8.8k次，点赞2次，收藏20次。比较LongAdder ,Atomic，synchronized 以及使用Unsafe类中实现的cas 和模拟Atomic，在多线程下的效率 ，见代码，放开对应注释，运行即可看到结果，通过更改线程数，可以查看不同并发情况下性能对比，通过更改循环执行次数，可以查看长时间或短时间持续并发情况下性能对比;测试服务器cpu 为i3-4170， 4核 3.7GHzimport java.lang.refl..._atomicinteger+1
随便推点
小说网站系统源码|PHP付费小说网站源码带app-程序员宅基地
文章浏览阅读5.3k次。在本文中，我将解释如何将ink与Unity项目集成，以及如何使用ink API与我们的小说网站源码系统进行交互。在我们开始之前，请确保您有一个包含一些对话和选择的墨水文件。您可能想下载并使用我准备的示例故事。这实际上是来自Guilt Free的简化场景，通过分享这一点，我想向您展示一个真实的视觉小说系统源码示例和实际代码的技术。完整源码：xsymz.icu项目设置继续在 Unity 中创建一个新的 2D 项目。然后添加您可以在此处找到的墨水插件。在ink插件文件夹（Plugins/Ink）里会有一_小说网站源码
Swift编码规范_swift 正则判断文件类型-程序员宅基地
文章浏览阅读531次。参考API Design Guidelineshttps://swift.org/documentation/api-design-guidelines/swift-style-guidehttps://github.com/raywenderlich/swift-style-guide项目命名规范一、工程文件夹、文件目录结构【业务模块】1、文件夹采用下划线命名，名字全部小写下划线间隔，如module_login2、文件、类、结构体、枚举、协议采用大驼峰命名，每个单词首字母大写，如 MyCu_swift 正则判断文件类型
关于shell 中return用法解释(转)_shell return-程序员宅基地
文章浏览阅读2.2w次。1、return命令会使得一个函数返回.return命令会返回一个单一的数字参数, 而这个数字参数在调用这个函数的脚本中是可见的.如果没有指定返回参数,return在默认情况下会返回上一次命令的返回代码。2、了解一个概念：return value ﹗我们在 shell 下跑的每一个 command 或 function ，在结束的时候都会传回父行程一个值，称为 return value 。在 shell command line 中可用 $? 这个变量得到最"新"的一个 return value_shell return
Linux编译宏BUILD_BUG_ON_ZERO-程序员宅基地
文章浏览阅读834次。本系列文章主要写我在阅读Linux内核过程中，关注的比较难以理解但又设计巧妙的代码片段（不关注OS的各个模块的设计思想，此部分我准备写在“深入理解Linux Kernel”系列文章中），一来通过内核代码复习一下C语言及汇编语言的语法，二来学习内核开发大牛们书写代码的风格及思路。理解了上面之后，再来看看第二个BUILD_BUG_ON_NULL(e)宏，与第一个类似，-------------------------------------完--------------------------------_build_bug_on_zero
c51语言单片机打铃系统设计,基于单片机的自动打铃系统的设计-程序员宅基地
文章浏览阅读678次。//调用单片机头文件#define uchar unsigned char //无符号字符型 宏定义 变量范围0~255#define uint unsigned int //无符号整型 宏定义 变量范围0~65535#include "eeprom52.h"#include "nongli.h"bit flag_2..._基于单片机的自动打铃控制系统设计提纲
在php中使用SMTP通过密抄批量发送邮件-程序员宅基地
文章浏览阅读550次。这几天，在整一个php在线邮件批量发送的程序来着。如果是一人一封一封发送的话，耗时又久又资源，抄送的话，收件人就会看到其他收件人了，这种时候，密抄就最是适合了。什么是抄送、密抄？抄送就是将一封邮件同时发给多个收件人，各收件人都可以看到其他收件人地址。抄送效果和平时发邮件时，用“，”将地址隔开的差不多密抄和抄送差不多，但是，各收件人都不可以看到其他收件人地址，换句话说，他收到这封..._smtp 密抄