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学习笔记三-平移旋转缩放 下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...
随机推荐
- linux内核makefile概览
linux内核makefile概览 本博客参照内核官方英文文档 linux的内核makefile主要用于编译整个内核源码,按照用户的需求生成各种目标文件,对于用户来说,编译内核时非常简单的,只需要几个 ...
- vsftpd配置文件
一.默认配置 1. 允许匿名用户和本地用户登录 anonymous_enable=YES local_enable=YES 2. 匿名用户使用的登录名为ftp或anonymous,密码为空:匿名用户不 ...
- docker里运行cron的要点笔记
1.如果用精简的apline或debian:stretch-slim创建的docker,里面可能没有cron模块,需要独立安装 apt-get install -y cron 2.docker里面cr ...
- 【Herding HDU - 4709 】【数学（利用叉乘计算三角形面积）】
题意:给出n个点的坐标,问取出其中任意点围成的区域的最小值! 很明显,找到一个合适的三角形即可. #include<iostream> #include<cstdio> #in ...
- 微信小程序~TabBar底部导航切换栏
底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 对于底部导航栏,小程序上给出的 ...
- 微信小程序~上拉加载onReachBottom
代码: //页面上拉触底事件的处理函数 onReachBottom(e) { console.log("底部")// 滚动到页面执行 该 方法 wx.showToast({ tit ...
- java.sql.SQLException: The server time zone value '�й���ʱ��' is unrecognized or represents more than one time zone.
java.sql.SQLException: The server time zone value '�й���ʱ��' is unrecognized or represents more tha ...
- 数据库连接的配置文件activation节点
在数据库连接连接不上的时候,一定要查看一下数据库的配置文件,<activeByDefault>这个节点比较关键,表示的是默认的连接数据库节点,当然配置文件中只能有一个这样的节点.否则是会报 ...
- Logistic Regression Algorithm
逻辑回归算法LR. 简介 逻辑回归是机器学习从统计学领域借鉴的另一种技术.它是二进制分类问题的首选方法(有两个类值的问题). Logistic回归就像线性回归,目标是找到权重每个输入变量的系数值. ...
- (尚024)Vue_案例_交互删除
注意:本总结中最终会删除不成功 ,原因是Item.vue中方法methods单词拼写错误!!! 首先明白,删除在Item.vue中交互 1.写交互,首先写监听@click="deleteIt ...