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学习笔记三-平移旋转缩放 下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...
随机推荐
- 【转】Go调度器原理浅析
goroutine是golang的一大特色,或者可以说是最大的特色吧(据我了解),这篇文章主要翻译自Morsing的[这篇博客](http://morsmachine.dk/go-scheduler) ...
- C++（五十） — 容器中元素满足的条件
容器中的内容必须满足三个条件: (1)无参构造函数 (2)拷贝构造函数 (3)重载 = 运算符 #define _CRT_SECURE_NO_WARNINGS #include <iostrea ...
- javascript原生图片懒加载
一,原生javascript图片懒加载 1. 使用方法,例如 // 要绑定的图片地址 <img data-src={url} alt=" "> 2. 在页面中引入下列原 ...
- 调整DataTable的列顺序
地址:https://www.cnblogs.com/gaocong/p/6490159.html 标题:DataTable 修改列名 删除列 调整列顺序 DataTable myDt =dt; // ...
- Alpha2的项目互评互测
目录 @(Alpha2项目测试) 这个作业属于哪个课程 课程链接 这个作业要求在哪里 作业要求的链接 团队名称 你的代码我的发 这个作业的目标 其他参考文献 软件测试用例 姓名 学号 团队名称 李涵 ...
- python测试开发django-rest-framework-63.基于函数的视图(@api_view())
前言 上一篇讲了基于类的视图,在REST framework中,你也可以使用常规的基于函数的视图.它提供了一组简单的装饰器,用来包装你的视图函数, 以确保视图函数会收到Request(而不是Djang ...
- selenium常用的API（七）判断元素是否可见
web页面不可见的元素虽不在页面上显示,但是存在于DOM树中,这些元素webdriver也能找到. element.is_displayed()方法可以判断元素是否在页面上显示,如果显示返回True, ...
- solr的倒序索引
倒序索引: 在每次进行检索时,搜索引擎必须遍历每个网页,查找网页中是否包含你指定的关键词,这个工作量是十分巨大的,主要原因有: 1.互联网的网页基数非常大; 2.在每个网页中检索是否含有指定的关键词并 ...
- 最小圆覆盖（洛谷 P1742 增量法）
题意:给定N个点,求最小圆覆盖的圆心喝半径.保留10位小数点. N<1e5: 思路:因为精度要求较高,而且N比较大,所以三分套三分的复杂度耶比较高,而且容易出错. 然是写下增量法吧. 伪代码加深 ...
- 【Selenium-WebDriver实战篇】基于java的selenium之验证码识别内容
==================================================================================================== ...