<!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. Go类型特性-学习笔记

    1.组合 Go语言使用组合来完成类型的设计,设计某一类型时想要拥有其他类型的功能只需要将其他类型嵌入该类型即可. 2.接口 与其他语言不同的是,编译器会自动判断该类型是否符合某正在使用的接口,甚至不需 ...

  2. 20155204 2016-2017-2 《Java程序设计》第2周学习总结

    20155204 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 本章主要学习了Java语言的基础语法,基本同C语言逻辑相通,比较着学不算难理解,包括了一些简 ...

  3. 20155226 mini DC 课堂测试补交

    由于电脑突然出了点问题,我没有完成mini DC这个测试,现将测试内容及结果补交 题目如下 提交测试截图和码云练习项目链接,实现Linux下dc的功能,计算后缀表达式的值 代码如下 MyDC.clas ...

  4. 20155327 2016-2017-3 《Java程序设计》第4周学习总结

    20155327 2016-2017-3 <Java程序设计>第4周学习总结 教材学习内容总结 一. 理解封装.继承.多态的关系 封装:把客观事物封装成抽象的类,并且类可以把自己的数据和方 ...

  5. 20155338 ch02 ch03课下作业

    20155338 ch02 ch03课下作业 要求: 1.补充完成课上测试(不能只有截图,要有分析,问题解决过程,新学到的知识点) 课上测试-3-ch02 1.编写一个程序 "week060 ...

  6. 在windows上搭建redis集群(redis-cluster)（转载）

    一 所需软件:Redis.Ruby语言运行环境.Redis的Ruby驱动redis-xxxx.gem.创建Redis集群的工具redis-trib.rb 二 安装配置redis  redis下载地址 ...

  7. python3出现转码问题的总结

    对于此(类)问题: (1)出现UnicodeEncodeError –> 说明是Unicode编码时候的问题: (2) ‘gbk’ codec can’t encode character –& ...

  8. cogs2109 [NOIP2015] 运输计划

    cogs2109 [NOIP2015] 运输计划 二分答案+树上差分. STO链剖巨佬们我不会(太虚伪了吧 首先二分一个答案,下界为0,上界为max{路径长度}. 然后判断一个答案是否可行,这里用到树 ...

  9. bzoj1861 书架

    bzoj1861 书架 原题链接 神题... 先吐槽洛谷的样例 10 10 1 3 2 7 5 8 10 4 9 6 Query 3 Top 5 Ask 6 Bottom 3 Ask 3 Top 6 ...

  10. [cogs347]地震

    COGS:地震(平衡树) COGS上一道题...文件名是equake 还是又打了一遍板子... 加个lazy标记就行了... 注意查询时先下传标记(lazy) // It is made by XZZ ...