WebGL学习笔记（三）：绘制一个三角形
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WebGL</title> <!-- 顶点着色器 -->
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition; void main() {
// 直接将外部传入的顶点坐标作为最终坐标
gl_Position = vec4(aVertexPosition, 1.0);
}
</script> <!-- 片段着色器 -->
<script id="shader-fs" type="x-shader/x-fragment">
// 设定 float 的精度, 这里我们使用中等精度
precision mediump float; void main() {
// 输出为纯白色
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script> <script>
var gl;
var canvas;
var shaderProgram;
var vertexBuffer; function createGLContext(canvas) {
var names = ["webgl", "experimental-webgl"];
var context = null;
for (var i = 0; i < names.length; i++) {
try {
context = canvas.getContext(names[i]);
} catch (e) { }
if (context) {
break;
}
}
if (context) {
// 添加动态属性记录画布的大小
context.viewportWidth = canvas.width;
context.viewportHeight = canvas.height;
} else {
alert("Failed to create WebGL context!");
}
return context;
} function setupShaders() {
// 从 DOM 上创建对应的着色器
vertexShader = loadShaderFromDOM("shader-vs");
fragmentShader = loadShaderFromDOM("shader-fs"); // 创建程序并连接着色器
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram); // 连接失败的检测
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Failed to setup shaders");
} // 使用着色器
gl.useProgram(shaderProgram); // 创建动态属性获取着色器中 aVertexPosition 属性的位置
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
} function loadShaderFromDOM(id) {
// 获取 DOM
var shaderScript = document.getElementById(id); if (!shaderScript) {
return null;
} // 获取着色器代码
var shaderSource = "";
var currentChild = shaderScript.firstChild;
while (currentChild) {
if (currentChild.nodeType == 3) { // 3 corresponds to TEXT_NODE
shaderSource += currentChild.textContent;
}
currentChild = currentChild.nextSibling;
} // 创建着色器
var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
} // 编译着色器
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader); // 判断编译是否成功
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
} function setupBuffers() {
// 创建顶点缓冲
vertexBuffer = gl.createBuffer();
// 绑定顶点缓冲
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// 定义顶点数据
var triangleVertices = [
0.0, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0
];
// 提交顶点数据
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
vertexBuffer.itemSize = 3;
vertexBuffer.numberOfItems = 3;
} function draw() {
// 设置视口大小, 使用像素, 调整该大小不影响显示内容，只影响图像在 Canvas 上显示的位置和尺寸
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
// 清除颜色缓冲
gl.clear(gl.COLOR_BUFFER_BIT);
// 将提交的顶点数据绑定到着色器的 aVertexPosition 属性
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
// 开启属性 aVertexPosition 的使用
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
// 绘制图像
gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.numberOfItems);
} function startup() {
canvas = document.getElementById("myGLCanvas");
gl = createGLContext(canvas);
setupShaders();
setupBuffers();
// 定义清除颜色缓冲之后的填充色为黑色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
draw();
}
</script>
</head> <body onload="startup();">
<canvas id="myGLCanvas" width="500" height="500"></canvas>
</body> </html>
WebGL学习笔记（三）：绘制一个三角形的更多相关文章
- Unity3D学习笔记1——绘制一个三角形
目录 1. 绪论 2. 概述 3. 详论 3.1. 准备 3.2. 实现 3.3. 解析 3.3.1. 场景树对象 3.3.2. 绘制方法 4. 结果 1. 绪论 最近想学习一下Unity3d,无奈发 ...
- Unity3D学习笔记2——绘制一个带纹理的面
目录 1. 概述 2. 详论 2.1. 网格(Mesh) 2.1.1. 顶点 2.1.2. 顶点索引 2.2. 材质(Material) 2.2.1. 创建材质 2.2.2. 使用材质 2.3. 光照 ...
- WebGL学习笔记二——绘制基本图元
webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代 ...
- webgl学习笔记三-平移旋转缩放
写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...
- OpenGL学习笔记(1) 画一个三角形
最近找实习有一丢丢蛋疼,沉迷鬼泣5,四周目通关,又不想写代码,写篇笔记复习一下,要好好学图形学啊 用OpenGL画一个三角形 项目的简介 记录一下跟着learnOpenGL学习的过程 笔记里的代码放在 ...
- WebGL学习笔记三
在上一章中主要说明了通过矩阵来实现平面图形的平移.旋转.缩放,到最后完全可以用4*4矩阵实现所有的动作,在本章就是第四章主要是对矩阵进行了封装,其WebGL的流程和上一章大部分大部分相同,定义可以在w ...
- 【Python学习笔记三】一个简单的python爬虫
这里写爬虫用的requests插件 1.一般那3.x版本的python安装后都带有相应的安装文件,目录在python安装目录的Scripts中,如下: 2.将scripts的目录配置到环境变量pa ...
- Keras学习笔记三：一个图像去噪训练并离线测试的例子，基于mnist
训练模型需要的数据文件有: MNIST_data文件夹下的mnist_train.mnist_test.noisy_train.noisy_test.train文件夹下60000个图片,test下10 ...
- webgl学习笔记五-纹理
写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...
- webgl学习笔记四-动画
写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...
随机推荐
- RS232、RS485和TTL电平与串行通信
RS232.RS485和TTL 作为一个底层软件开发工程师,经常会碰到RS232.RS485和TTL这一类的问题. 之前总是碰到问题之后Google一下,把当下的问题解决了之后就不管了,过个一两天就忘 ...
- mongodb 常见问题处理方法收集
问题1:非正常关闭服务或关机后 mongod服务无法正常启动 在使用中发现mongodb 的服务可能因为非正常关闭而启动不了,这时我们通过 删除data目录下的 *.lock文件,再运行下/mongo ...
- Unicode原理和互转中文
代码点Unicode标准的本意很简单:希望给世界上每一种文字系统的每一个字符,都分配一个唯一的整数,这些整数叫做代码点(Code Points). 代码空间所有的代码点构成一个代码空间(Code Sp ...
- layui开发的一些技巧
选择人员功能 //保存选择结果,用于回调 /* window.saveSelectTeachers = function () { //1.检查用户的最终选择是什么 var rule_course_i ...
- 《老子》是帝王术，提倡复古，崇拜圣人，主张愚民，甘居下流，不争上游：4星|李零《人往低处走:<老子>天下第一》
“ 俗话说,“人往高处走,水往低处流”.<老子>正好相反,它强调的是作“天下谷”.“天下溪”.“天下之牝”,甘居下流,不争上游(第28和第61章).司马谈说,道家的特点是“去健羡,绌聪 ...
- .NET Core项目修改project.json来引用其他目录下的源码等文件的办法 & 解决多框架时 project.json 与 app.config冲突的问题
作者: zyl910 一.缘由 项目规模大了后,经常会出现源码文件分布在不同目录的情况,但.NET Core项目默认只有项目目录下的源码文件,且不支持“Add As Link”方式引入文件.这时需要手 ...
- 对当前目录下的所有APK包执行Monkey测试，并自动保存Crash日志
适用平台:Android,代码几个月前写的,有问题请及时回复.本代码会依次安装当前目录下的APK安装包,之后执行Monkey测试,然后卸载掉换下一个,继续重复执行,如出现Cransh,会自动保存在当前 ...
- 【Selenium-WebDriver实战篇】基于java的selenium之验证码识别内容
==================================================================================================== ...
- Spring源码窥探之：@Profile
Spring为我们提供的多环境启动 1. 配置类,注入三个不同环境的数据源,并加上注解 /** * description: 以下准备了三套不同环境的数据源 * * @author 70KG * @d ...
- Spring+mybatis+PageHelper
为了更简单的实现数据库分页,我们不探讨自己手动修改sql语句分页,这里关于PageHelper自己配置是出现的问题进行记录下: 我采用的是Maven代码托管,在pom.xml进行如下配置: <! ...