<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>WebGL Demo</title>

    <link rel="stylesheet" href="../webgl.css" type="text/css">

  </head>

  <body>

    <canvas id="glcanvas" width="640" height="480"></canvas>

  </body>

</html>

main();

function main() {

  const canvas = document.querySelector('#glcanvas');

  const gl = canvas.getContext('webgl');

  if (!gl) {

    alert('Unable to initialize WebGL. Your browser or machine may not support it.');

    return;

  }

  // 顶点着色器代码

  const vsSource = `

    attribute vec4 aVertexPosition;

    uniform mat4 uModelViewMatrix;

    uniform mat4 uProjectionMatrix;

    void main() {

      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;

    }

  `;

  // 版本着色器代码

  const fsSource = `

    void main() {

      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);

    }

  `;

  // 生成着色器

  const shaderProgram = initShaderProgram(gl, vsSource, fsSource);

  // 着色器需要的数据

  const programInfo = {

    program: shaderProgram,

    attribLocations: {

      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),

    },

    uniformLocations: {

      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),

      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),

    },

  };

  const buffers = initBuffers(gl);

  drawScene(gl, programInfo, buffers);

}

// 初始化buff数据

function initBuffers(gl) {

  const positionBuffer = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  const positions = [

     1.0,  1.0,

    -1.0,  1.0,

     1.0, -1.0,

    -1.0, -1.0,

  ];

  gl.bufferData(gl.ARRAY_BUFFER,

                new Float32Array(positions),

                gl.STATIC_DRAW);

  return {

    position: positionBuffer,

  };

}

function drawScene(gl, programInfo, buffers) {

  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaque

  gl.clearDepth(1.0);                 // Clear everything

  gl.enable(gl.DEPTH_TEST);           // Enable depth testing

  gl.depthFunc(gl.LEQUAL);            // Near things obscure far things

  // Clear the canvas before we start drawing on it.

  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  // Create a perspective matrix, a special matrix that is

  // used to simulate the distortion of perspective in a camera.

  // Our field of view is 45 degrees, with a width/height

  // ratio that matches the display size of the canvas

  // and we only want to see objects between 0.1 units

  // and 100 units away from the camera.

  const fieldOfView = 45 * Math.PI / 180;   // in radians

  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;

  const zNear = 0.1;

  const zFar = 100.0;

  const projectionMatrix = mat4.create();

  // note: glmatrix.js always has the first argument

  // as the destination to receive the result.

  mat4.perspective(projectionMatrix,

                   fieldOfView,

                   aspect,

                   zNear,

                   zFar);

  // Set the drawing position to the "identity" point, which is

  // the center of the scene.

  const modelViewMatrix = mat4.create();

  // Now move the drawing position a bit to where we want to

  // start drawing the square.

  mat4.translate(modelViewMatrix,     // destination matrix

                 modelViewMatrix,     // matrix to translate

                 [-0.0, 0.0, -6.0]);  // amount to translate

  // Tell WebGL how to pull out the positions from the position

  // buffer into the vertexPosition attribute.

  {

    const numComponents = 2;

    const type = gl.FLOAT;

    const normalize = false;

    const stride = 0;

    const offset = 0;

    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);

    gl.vertexAttribPointer(

        programInfo.attribLocations.vertexPosition,

        numComponents,

        type,

        normalize,

        stride,

        offset);

    gl.enableVertexAttribArray(

        programInfo.attribLocations.vertexPosition);

  }

  // Tell WebGL to use our program when drawing

  gl.useProgram(programInfo.program);

  // Set the shader uniforms

  gl.uniformMatrix4fv(

      programInfo.uniformLocations.projectionMatrix,

      false,

      projectionMatrix);

  gl.uniformMatrix4fv(

      programInfo.uniformLocations.modelViewMatrix,

      false,

      modelViewMatrix);

  {

    const offset = 0;

    const vertexCount = 4;

    gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);

  }

}


// 编译着色器
function initShaderProgram(gl, vsSource, fsSource) {

  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);

  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

  // Create the shader program

  const shaderProgram = gl.createProgram();

  gl.attachShader(shaderProgram, vertexShader);

  gl.attachShader(shaderProgram, fragmentShader);

  gl.linkProgram(shaderProgram);

  // If creating the shader program failed, alert

  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {

    alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));

    return null;

  }

  return shaderProgram;

}

// 编译某种类型着色器

function loadShader(gl, type, source) {

  const shader = gl.createShader(type);

  // Send the source to the shader object

  gl.shaderSource(shader, source);

  // Compile the shader program

  gl.compileShader(shader);

  // See if it compiled successfully

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {

    alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));

    gl.deleteShader(shader);

    return null;

  }

  return shader;

}

webgl example1的更多相关文章

  1. 【WebGL】《WebGL编程指南》读书笔记——第5章

    一.前言        终于到了第五章了,貌似开始越来越复杂了. 二.正文         Example1:使用一个缓冲区去赋值多个顶点数据(包含坐标及点大小) function initVerte ...

  2. 【WebGL】《WebGL编程指南》读书笔记——第2章

    一.前言 最近看了<WebGL编程指南>这本书,发现还是很有意思的,故每章阅读后做个笔记. 二.正文 Example1:在canvas中绘制矩形 <!DOCTYPE html> ...

  3. Webgl的2D开发方案(一)spritebatcher

    使用TypeScript 和 webgl 开发   第一步:实现了SpriteBatcher 例子如下 http://oak2x0a9v.bkt.clouddn.com/test/index.html ...

  4. HTML5 学习总结（四）——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  5. 数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇

    <数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...

  6. 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）

    我们上一篇<基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)>主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配 ...

  7. 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（一）

    今天没有延续上一篇讲的内容,穿插一段小插曲,WebSocket 实时数据通讯同步的问题,今天我们并不是很纯粹地讲 WebSocket 相关知识,我们通过 WebGL 3D 拓扑图来呈现一个有趣的 De ...

  8. 基于HTML5的WebGL应用内存泄露分析

    上篇(http://www.hightopo.com/blog/194.html)我们通过定制了CPU和内存展示界面,体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动, ...

  9. 基于WebGL 的3D呈现A* Search Algorithm

    http://www.hightopo.com/demo/astar/astar.html 最近搞个游戏遇到最短路径的常规游戏问题,一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现 ...

随机推荐

  1. AvalonEdit-基于WPF的代码显示控件

    AvalonEdit是基于WPF的代码显示控件,项目地址:https://github.com/icsharpcode/AvalonEdit,支持C#,javascript,C++,XML,HTML, ...

  2. java阻塞队列之LinkedBlockingQueue

    LinkedBlockingQueue是BlockingQueue中的其中一个,其实现方式为单向链表,下面看其具体实现.(均为JDK8) 一.构造函数 在LinkedBlockingQueue中有三个 ...

  3. katalon系列十三：5.10新增跳过用例&命令行赋值全局变量

    Katalon Studio升级到5.10版本了,这次新增了2个很实用的功能:一.跳过用例在Listener中新增了跳过用例方法,Listener类似于JUnit4的annotation中的@Befo ...

  4. MySQL☞大结局

    emmm,看了这么多大概会用了点点,学到了一点点 select  列名/*/聚合函数 from  表名1 别名1  连接查询(左外.右外等等) 表名2 别名2 on 关联条件 where 查询条件 g ...

  5. CF刷题-Codeforces Round #481-D. Almost Arithmetic Progression

    题目链接:https://codeforces.com/contest/978/problem/D 题解: 题目的大意就是:这组序列能否组成等差数列?一旦构成等差数列,等差数列的公差必定确定,而且,对 ...

  6. 机器学习与R语言——基本语法

    一.注释 1.选中要注释的内容,快捷键Ctrl+Shift+C(取消注释方法相同) 2.在需注释内容前输入# #需注释的内容 3.利用if语句,将判断条件设置为false则可跳过if语句中的内容,相当 ...

  7. 解决webstorm中测试dva项目run start命令需要不断重启问题

    用dva-cli构建了项目之后在webstorm开发,用npm start跑本地服务,经常修改之后在浏览器刷新没反应,偶尔才会有刷新,需要重新跑一遍npm start才会更新,这是怎么回事呢? web ...

  8. nginx main函数

    源代码: int ngx_cdecl main(int argc, char *const *argv) { ngx_int_t i; ngx_log_t *log; ngx_cycle_t *cyc ...

  9. SVN部署与简单使用

    原文发表于cu:2016-05-24 参考文档: http://www.tuicool.com/articles/Yv2iyu7 http://www.centoscn.com/CentosServe ...

  10. jquery on函数和prop与attr区别

    一.jquery on()方法 1.语法 2.例子 $(document).ready(function(){ $("p").on("click",functi ...