<!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学习笔记（三）：绘制一个三角形的更多相关文章

  1. Unity3D学习笔记1——绘制一个三角形

    目录 1. 绪论 2. 概述 3. 详论 3.1. 准备 3.2. 实现 3.3. 解析 3.3.1. 场景树对象 3.3.2. 绘制方法 4. 结果 1. 绪论 最近想学习一下Unity3d,无奈发 ...

  2. Unity3D学习笔记2——绘制一个带纹理的面

    目录 1. 概述 2. 详论 2.1. 网格(Mesh) 2.1.1. 顶点 2.1.2. 顶点索引 2.2. 材质(Material) 2.2.1. 创建材质 2.2.2. 使用材质 2.3. 光照 ...

  3. WebGL学习笔记二——绘制基本图元

    webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代 ...

  4. webgl学习笔记三-平移旋转缩放

    写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...

  5. OpenGL学习笔记(1) 画一个三角形

    最近找实习有一丢丢蛋疼,沉迷鬼泣5,四周目通关,又不想写代码,写篇笔记复习一下,要好好学图形学啊 用OpenGL画一个三角形 项目的简介 记录一下跟着learnOpenGL学习的过程 笔记里的代码放在 ...

  6. WebGL学习笔记三

    在上一章中主要说明了通过矩阵来实现平面图形的平移.旋转.缩放,到最后完全可以用4*4矩阵实现所有的动作,在本章就是第四章主要是对矩阵进行了封装,其WebGL的流程和上一章大部分大部分相同,定义可以在w ...

  7. 【Python学习笔记三】一个简单的python爬虫

    这里写爬虫用的requests插件 1.一般那3.x版本的python安装后都带有相应的安装文件,目录在python安装目录的Scripts中,如下:   2.将scripts的目录配置到环境变量pa ...

  8. Keras学习笔记三：一个图像去噪训练并离线测试的例子，基于mnist

    训练模型需要的数据文件有: MNIST_data文件夹下的mnist_train.mnist_test.noisy_train.noisy_test.train文件夹下60000个图片,test下10 ...

  9. webgl学习笔记五-纹理

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...

  10. webgl学习笔记四-动画

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放   下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...

随机推荐

  1. oracle instantclient_12_2安装

    下载地址 http://www.oracle.com/technetwork/database/database-technologies/instant-client/downloads/index ...

  2. Docker-compose（创建容器）

    Docker-compose(创建容器) 本文原始地址:https://sitoi.cn/posts/23955.html 样例 version: "2" services: sp ...

  3. Pthon魔术方法（Magic Methods）-运算符重载

    Pthon魔术方法(Magic Methods)-运算符重载 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Python运算符对应的魔术方法 1>.比较运算符 <: ...

  4. Docker 基本操作（附 redis、nginx部署）

    下载安装 Docker 也有一个月了.中间看过几次也没有深入的了解研究.就只是拉取了两个镜像简单的看了看. 昨天因一个项目中需要用到 Redis ,因为是 Windows 系统,看了下安装包比较老了有 ...

  5. PS——使用切片工具切出透明图片

    前言 最近有点烦,不说话~ 步骤 首先要保证您的格式为PSD且底色为透明 参考线 标出参考线,方便后面划分 切图 保存 效果

  6. 【Selenium-WebDriver实战篇】Eclipse上的maven使用JsonObject时，添加依赖后无法自动下载相应的jar包

    ==================================================================================================== ...

  7. SpringBoot整合JDBC模板

    目录 Grade实体类 public class Grade { private Integer gradeId; private String gradeName; public Grade(){ ...

  8. 001_keil仿真

    (一)参考文献:STM32F4 MDK5软件仿真 error : no 'read' permission  (二)转载: 问题描述 CPU:STM32F407MDK5软件模拟提示没有读写权限,只能一 ...

  9. 不用VS调试.Net

    将来,任何开发人员都将需要调试应用程序,并且将无法访问Visual Studio,在某些情况下甚至无法访问源代码.例如,在生产web或应用服务器上调试问题时,我真的不想安装Visual Studio并 ...

  10. [USACO12MAR]花盆 二分 单调队列

    [USACO12MAR]花盆 二分 单调队列 存在一个长度为\(x\)的区间\([l,r]\),使得区间中最大值与最小值差至少为\(w\),求这个最小的\(x\) \(n\le 100000\),\( ...