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学习笔记三-平移旋转缩放 下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...
随机推荐
- clipse调试web项目配置调试配置——没有Server
文章:eclipse环境下如何配置tomcat(包含没有Server解决办法) 地址:https://blog.csdn.net/TimliangL/article/details/78882566
- 《老子》是帝王术，提倡复古，崇拜圣人，主张愚民，甘居下流，不争上游：4星|李零《人往低处走:<老子>天下第一》
“ 俗话说,“人往高处走,水往低处流”.<老子>正好相反,它强调的是作“天下谷”.“天下溪”.“天下之牝”,甘居下流,不争上游(第28和第61章).司马谈说,道家的特点是“去健羡,绌聪 ...
- 关于立即调用的函数表达式（IIFE）
在 JavaScript 中,圆括号 () 是一种运算符,跟在函数名之后,表示调用该函数.比如,print() 就表示调用 print 函数 有时,我们需要在定义函数之后,立即调用该函数,例如: fu ...
- Django项目中使用plupload插件实现上传图片功能
首先下载plupload插件放在static静态文件下面,官方地址:https://www.plupload.com/ 项目根目录下创建media文件夹用来存放上传的图片,配置settings文件,添 ...
- P4560 [IOI2014]Wall 砖墙
题目描述 给定一个长度为 nn且初始值全为 00的序列.你需要支持以下两种操作: Add L, R, hL,R,h:将序列 [L, R][L,R]内所有值小于 hh的元素都赋为 hh,此时不改变高度大 ...
- 性能：Output层面
将数据保存到MySQL中 import java.sql.DriverManager import org.apache.spark.storage.StorageLevel import org.a ...
- Android学习小结
自从学习Android以来已经经过三个月了,如今市场对于Android工程师的需求接近饱和,所以学习Android的人也少了很多,很多的培训机构也逐渐将Android课程淘汰,导致学习Android的 ...
- window对象方法（open和close）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 3、kafka工作流程
一.kafka各成员 kafka: 分布式消息系统,将消息直接存入磁盘,默认保存一周. broker: 组成kafka集群的节点,之间没有主从关系,依赖zookeeper来协调,broker负责满息的 ...
- 利用window.open如何绕过浏览器拦截机制
在浏览器的安全机制里,非用户触发的window.open方法是会被拦截的,例如: var btn = $('#btn'); btn.click(function () { // 算做用户触发,所以不会 ...