<!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. Winform程序拖拽文件到窗体

    1:首先需要将接收拖拽的窗体属性AllowDrop设置为True. 2:编写窗体拖拽进入(DragEnter)和拖拽完成(DragDrop)事件. private void FrmCode_DragE ...

  2. 20155203 2016-2017-2《Java程序设计》课程总结

    目录 一.每周作业链接汇总 自认为写得最好一篇博客是?为什么? 作业中阅读量最高的一篇博客是?谈谈经验 作业中与师生交互最多的一篇博客是?谈谈收获 二.实验报告链接汇总 三.代码托管链接 四.课堂项目 ...

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

    20155213 2016-2017-2 <Java程序设计>第一周学习总结 教材学习内容总结 了解JVM.JRE与JDK,并下载.安装.测试JDK JVM JVM是Java Virtua ...

  4. 2016-2017-2 20155302 实验四 Android 开发基础

    2016-2017-2 20155302 实验四 Android 开发基础 实验内容 1.下载和安装Android Studio 2.学会使用Android Studio进行简单的Android开发 ...

  5. 20155320信息安全系统设计第二周课堂考试总结及myod的实现

    20155320 信息安全系统设计第二周课堂考试总结及myod的实现 第二周测试一二已在课上提交 第二周测试3-gdb测试 用gcc -g编译vi输入的代码 在main函数中设置一个行断点 在main ...

  6. xgboost算法教程(两种使用方法)

    标签: xgboost 作者:炼己者 ------ 欢迎大家访问我的简书以及我的博客 本博客所有内容以学习.研究和分享为主,如需转载,请联系本人,标明作者和出处,并且是非商业用途,谢谢! ------ ...

  7. new与alloc/init的区别

    alloc:分配内存. init:初始化. new:代替上面两个函数:分配内存,并且初始化. 注意: 1.在实际开发中很少会用到new,一般创建对象时我们一般是 [[className alloc]i ...

  8. 安装centos minimal 版本后安装mysql详细过程（linux）

    本文内容参考自:http://www.centoscn.com/mysql/2014/1211/4290.html PS:Yum(全称为 Yellow dog Updater, Modified)是一 ...

  9. [深度学习] 使用Darknet YOLO 模型破解中文验证码点击识别

    内容 背景 准备 实践 结果 总结 引用 背景 老规矩,先上代码吧 代码所在: https://github.com/BruceDone/darknet_demo 最近在做深度学习相关的项目的时候,了 ...

  10. TW实习日记：第七天

    今天早上,将项目的两个企业微信接口:登录和应用消息发送接口,做了最后的收尾工作,把目前我能解决的问题算是基本都解决了.早上还开了一个会,大意是组长封装了许多组件叫我们使用,在不断的使用中打磨组件的可用 ...