<!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. Java基本修饰符

    java中的修饰符分为类修饰符,字段修饰符,方法修饰符.根据功能的不同,主要分为以下几种: *权限访问修饰符(可以用来修饰类.方法和字段) 适用范围<访问权限范围越小,安全性越高> 访问权 ...

  2. PL/SQL轻量版（三）——游标与异常处理

    一.游标 1.概念 游标是一个 指向上下文的句柄( handle) 或指针.通过游标,PL/SQL 可以控制上下文区和处理语句时上下文区会发生些什么事情. 2.游标处理 处理显式游标 主要包含以下四个 ...

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

    20155217 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 要产生对象必须先定义类,类定义时使用class关键词,建立实例要使用new关键词. ...

  4. java 万能转换器 输入SQL 直接得到ArrayList

    //java万能List转换器 public static <T> ArrayList<T> ToList(Class<T> clazz,String sql) t ...

  5. 成都Uber优步司机奖励政策（4月15日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  6. 【BZOJ4698】[SDOI2008]Sandy的卡片

    [BZOJ4698][SDOI2008]Sandy的卡片 题面 flag倒了. bzoj 洛谷 题解 首先题目的区间加很丑对吧, 将每个串差分一下,就可以转化为 求: 给定\(N\)个串,求他们的最长 ...

  7. sqlserver安装遇到的问题——1

    SQL Server安装过无数次,今天第一次遇到这样的问题 一.问题消息复制出来是这样的 TITLE: Microsoft SQL Server 2008 R2 安装程序--------------- ...

  8. Drupal8 新建第一个模块

    参考: https://www.drupal.org/developing/modules/8 https://www.drupal.org/node/1915030 https://www.drup ...

  9. idea 单元测试 mybatis spring-test 异常： org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)

    因为在idea中必须在test下才能进行单元测试,所以进行单元测试时,ssm的项目会因为找不到resourece中的配置文件而报错 这里 org.apache.ibatis.binding.Bindi ...

  10. EmitMapper自动映射工具

             在实体与DTO之间,我们一般都需要进行映射.如果手动的来进行转换,实在是太麻烦.所以就产生了很多映射工具,比如AutoMapper,EmitMapper.而经过一些对比,EmitMa ...