0
0

WebGL进阶（四）-视点和视线

理论基础：

顶点着色器 Vertex Shader

主要是负责处理顶点位置、顶点颜色、顶点向量等顶点的数据；处理一些顶点的变换：例如在进行视图变换和投影变换时MVP矩阵会改变顶点的位置信息。

输入：

顶点着色器输入部分主要是声明：

①储存着每个顶点属性的attribute变量；

②所有顶点都会实现的（例如MVP矩阵、透视变换矩阵等）全局的uniform变量；

③一些会传递给片元着色器的varying变量。

  1. // 变量
  2. attribute vwc3 aVertexPosition; // 顶点位置
  3. attribute vec3 aNormalPosition; // 法线
  4. attribute vec2 aTextureCoord; // uv坐标
  6. varying highp vec2 vTextureCoord; // 顶点着色器传递给片元着色器
  7. varying highp vec3 vFragPos;
  8. varying highp vec3 vNormal;
  10. // 矩阵
  11. uniform mat4 uModelViewMatrix; // 视图变换矩阵
  12. uniform mat4 uProjectionMatrix; // 透视变换矩阵
输出：

①顶点坐标gl_Position；

②给输入部分声明的varying变量赋值；

矩阵运算从右往左运算

  1. vFragPos = aVertexPosition;
  2. vNormal = aNormalPosition;
  4. // 计算点坐标
  5. gl_Position = uProjextionMatrix * uModelViewMatrix * vec4(aVertexPosition,1.0);
  7. vTextureCoord = aTextureCoord;
片元着色器 Fragment Shader

用于颜色、贴图、光照阴影等

  1. //除了上述出现的“着色器不支持高精度，限定浮点类型为中精度”
  2. precision mediump float;
  4. //还有表示支持高精度的：“着色器支持高精度，限定浮点类型为高精度”
  5. precision highp float;
  7. //以及仅支持低精度的：
  8. prcision lowp float;
输入：

uniform声明

  1. /声明一个纹理相关的变量，sampler2D 也是一种数据类型
  2. //它是一种取样器类型的变量，该变量对应传入的纹理2D图片的像素数据
  3. uniform sampler2D uSampler;
  4. //Blinn-Phong需要的漫反射项kd、高光项ks、光源位置、相机位置、光强
  5. uniform vec3 uKd;
  6. uniform vec3 uKs;
  7. uniform vec3 uLightPos;
  8. uniform vec3 uCameraPos;
  9. uniform float uLightIntensity;
  10. // 这个TextureSample参数作用应该是：
  11. // 以左上角为原点，通过UV截取图片，如果==1，则正常取值
  12. uniform int uTextureSample;

varing变量

  1. //继承varying参数
  2. varying highp vec2 vTextureCoord;
  3. varying highp vec3 vFragPos;
  4. varying highp vec3 vNormal;
输出：

一般设置为gl_FragColor

参考：GAMES101-现代计算机图形学入门-闫令琪_哔哩哔哩_bilibili

gl.compileShader(shader), 传递需要编译的着色器，函数实现着色器编译。
gl.getShaderParameter(shader,COMPILE_STATUS),COMPILE_STATUS为：
  • gl.DELETE_STATUS:标示着色器是否被删除，删除（GL_TRUE）未删除（GL_FALSE）.
  • gl.COMPILE_STATUS: 标示着色器是否编译成功，是（GL_TRUE）不是（GL_FALSE）
  • gl.SHADER_TYPE: 标示着色器类型，是顶点着色器 (gl.VERTEX_SHADER) 还是片段着色器 (gl.FRAGMENT_SHADER)
WebGLRenderingContext.enableVertexAttribArray()

在 WebGL 中，作用于顶点的数据会先储存在attributes。这些数据仅对 JavaScript 代码和顶点着色器可用。属性由索引号引用到 GPU 维护的属性列表中。在不同的平台或 GPU 上，某些顶点属性索引可能具有预定义的值。创建属性时，WebGL 层会分配其他属性。

类型为GLuint 的索引，指向要激活的顶点属性。可以使用getAttribLocation方法来获取索引.

WebGLRenderingContext.vertexAttribPointer(index,size,type,normalized,stride,offset)

打开属性数组列表中指定索引处的通用顶点属性数组,

index:定要修改的顶点属性的索引。

size:指定每个顶点属性的组成数量，必须是 1，2，3 或 4。

type:

指定数组中每个元素的数据类型可能是：

  • gl.BYTE: signed 8-bit integer, with values in [-128, 127] 有符号的 8 位整数，范围 [-128, 127]
  • gl.SHORT: signed 16-bit integer, with values in [-32768, 32767] 有符号的 16 位整数，范围 [-32768, 32767]
  • gl.UNSIGNED_BYTE: unsigned 8-bit integer, with values in [0, 255] 无符号的 8 位整数，范围 [0, 255]
  • gl.UNSIGNED_SHORT: unsigned 16-bit integer, with values in [0, 65535] 无符号的 16 位整数，范围 [0, 65535]
  • gl.FLOAT: 32-bit IEEE floating point number 32 位 IEEE 标准的浮点数
  • When using a WebGL 2 context, the following values are available additionally: 使用 WebGL2 版本的还可以使用以下值：- gl.HALF_FLOAT: 16-bit IEEE floating point number 16 位 IEEE 标准的浮点数

normalize:

  1.      当转换为浮点数时是否应该将整数数值归一化到特定的范围。
  • or types gl.BYTE and gl.SHORT, normalizes the values to [-1, 1] if true. 对于类型gl.BYTE和gl.SHORT，如果是 true 则将值归一化为 [-1, 1]
  • For types gl.UNSIGNED_BYTE and gl.UNSIGNED_SHORT, normalizes the values to [0, 1] if true. 对于类型gl.UNSIGNED_BYTE和gl.UNSIGNED_SHORT，如果是 true 则将值归一化为 [0, 1]
  • For types gl.FLOAT and gl.HALF_FLOAT, this parameter has no effect. 对于类型gl.FLOAT和gl.HALF_FLOAT，此参数无效

stride:

一个 GLsizei，以字节为单位指定连续顶点属性开始之间的偏移量 (即数组中一行长度)。不能大于 255。如果 stride 为 0，则假定该属性是紧密打包的，即不交错属性，每个属性在一个单独的块中，下一个顶点的属性紧跟当前顶点之后。

offset:

指定顶点属性数组中第一部分的字节偏移量。必须是类型的字节长度的倍数。

WebGLRenderingContext.uniformMatrix[234]fv(location,transpose,value)

该方法的 3 个版本（

  1. uniformMatrix2fv()

、

  1. uniformMatrix3fv()

和 

  1. unifomMatrix4fv()

），分别以二阶、三阶和四阶方阵作为输入值，它们应是分别具有 4、9、16 个浮点数的数组。

  1. WebGLRenderingContext.uniformMatrix2fv(location, transpose, value);
  2. WebGLRenderingContext.uniformMatrix3fv(location, transpose, value);
  3. WebGLRenderingContext.uniformMatrix4fv(location, transpose, value);

location

WebGLUniformLocation 对象包含了要修改的 uniform attribute 位置。位置使用 getUniformLocation()获得。

transpose

GLboolean 指定是否转置矩阵。必须为 

  1. false

。

value

Float32Array 型或者是 

  1. GLfloat

序列值。这些值被假定按列主序（column major order）的方式提供。

源码：

键盘动态改变视点

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="glMatrix-0.9.6.min.js"></script>
  10.     <script>
  11.         let vertexstring = `
  12.         attribute vec4 a_position;
  13.         uniform mat4 u_formMatrix;
  14.         attribute vec4 a_color;
  15.         varying vec4 color;
  16.         void main(void){
  17.             gl_Position =  u_formMatrix * a_position;
  18.             color = a_color;
  19.         }
  20.         `;
  21.         let fragmentstring = `
  22.         precision mediump float;
  23.         varying vec4 color;
  24.         void main(void){
  25.           gl_FragColor =color;
  26.         }
  27.         `;
  29.         var webgl;
  30.         var uniformTexture = 0;
  31.         var uniformTexture1 = 0;
  32.         var uniformAnim = 0;
  33.         var count = 0;
  34.         var texture0;
  35.         var texture1;
  36.         var angley=0;
  37.         var anglex= 0;
  38.         function webglStart() {
  39.             init();
  40.             tick()
  41.         }
  42.         function tick() {
  43.             requestAnimFrame(tick);
  44.             initBuffer();
  45.             draw();
  46.         }
  47.         function init() {
  48.             initWebgl();
  49.             initShader();
  50.             initEvent();
  51.         }
  52.         function handleKeyDown(event) {
  54.             if (String.fromCharCode(event.keyCode) == 'W') {
  55.                 angley += 0.01;
  56.             }
  57.             else if (String.fromCharCode(event.keyCode) == 'S') {
  58.                 angley -= 0.01;
  59.             }
  60.             else if (String.fromCharCode(event.keyCode) == 'A') {
  61.                 anglex -= 0.01;
  62.             }
  63.             else if (String.fromCharCode(event.keyCode) == 'D') {
  64.                 anglex += 0.01;
  65.             }
  67.         }
  68.         function initEvent() {
  69.             document.onkeydown = handleKeyDown;
  70.         }
  71.         function initWebgl() {
  72.             let webglDiv = document.getElementById('myCanvas');
  73.             webgl = webglDiv.getContext("webgl");
  74.             webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);
  76.         }
  77.         function initShader() {
  79.             let vsshader = webgl.createShader(webgl.VERTEX_SHADER);
  80.             let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);
  82.             webgl.shaderSource(vsshader, vertexstring);
  83.             webgl.shaderSource(fsshader, fragmentstring);
  85.             webgl.compileShader(vsshader);
  86.             webgl.compileShader(fsshader);
  87.             if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {
  88.                 var err = webgl.getShaderInfoLog(vsshader);
  89.                 alert(err);
  90.                 return;
  91.             }
  92.             if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {
  93.                 var err = webgl.getShaderInfoLog(fsshader);
  94.                 alert(err);
  95.                 return;
  96.             }
  97.             let program = webgl.createProgram();
  98.             webgl.attachShader(program, vsshader);
  99.             webgl.attachShader(program, fsshader)
  100.             webgl.linkProgram(program);
  101.             webgl.useProgram(program);
  102.             webgl.program = program
  104.         }
  105.         function initBuffer() {
  106.             let ModelMatrix = mat4.create();
  107.             mat4.identity(ModelMatrix);
  108.             let angle = Math.PI / 180 * count;
  109.             console.log(angle);
  110.             mat4.rotate(ModelMatrix, angle, [0, 0, 1])
  112.             let ViewMatrix = mat4.create();
  113.             mat4.identity(ViewMatrix);
  114.             debugger
  115.             ViewMatrix = mat4.lookAt([anglex, angley, 0.2], [0, 0, 0], [0, 1, 0], ViewMatrix);
  116.             console.log(ViewMatrix);
  118.             let mvMatrix = mat4.multiply(ViewMatrix, ModelMatrix)
  120.             let arr = [
  121.                 0.0, 0.5, -0.4, 1, 0.4, 1.0, 0.4, 1,
  122.                 -0.5, -0.5, -0.4, 1, 0.4, 1.0, 0.4, 1,
  123.                 0.5, -0.5, -0.4, 1, 0.4, 1.0, 0.4, 1,
  125.                 0.5, 0.4, -0.2, 1, 1.0, 1.0, 0.4, 1,
  126.                 -0.5, 0.4, -0.2, 1, 1.0, 1.0, 0.4, 1,
  127.                 0.0, -0.6, -0.2, 1, 1.0, 1.0, 0.4, 1,
  129.                 0.0, 0.5, 0.0, 1, 0.4, 0.4, 1.0, 1,
  130.                 -0.5, -0.5, 0.0, 1, 0.4, 0.4, 1.0, 1,
  131.                 0.5, -0.5, 0.0, 1, 0.4, 0.4, 1.0, 1,
  133.             ]
  135.             let pointPosition = new Float32Array(arr);
  136.             let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");
  137.             let triangleBuffer = webgl.createBuffer();
  138.             webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
  139.             webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);
  140.             webgl.enableVertexAttribArray(aPsotion);
  141.             webgl.vertexAttribPointer(aPsotion, 4, webgl.FLOAT, false, 8 * 4, 0);
  142.             let aColor = webgl.getAttribLocation(webgl.program, "a_color");
  143.             webgl.enableVertexAttribArray(aColor);
  144.             webgl.vertexAttribPointer(aColor, 4, webgl.FLOAT, false, 8 * 4, 4 * 4);
  146.             let uniformMatrix1 = webgl.getUniformLocation(webgl.program, "u_formMatrix");
  147.             webgl.uniformMatrix4fv(uniformMatrix1, false, mvMatrix)
  148.         }
  150.         function draw() {
  151.             webgl.clearColor(0.0, 1.0, 0.0, 1.0);
  152.             webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
  153.             webgl.enable(webgl.DEPTH_TEST);
  154.             //纹理变动
  155.             uniformAnim = webgl.getUniformLocation(webgl.program, "anim");
  156.             count = count + 1;
  157.             webgl.uniform1f(uniformAnim, count);
  158.             webgl.drawArrays(webgl.TRIANGLES, 0, 9);
  159.         }
  160.         window.requestAnimFrame = (function () {
  161.             return window.requestAnimationFrame ||
  162.                 window.webkitRequestAnimationFrame ||
  163.                 window.mozRequestAnimationFrame ||
  164.                 window.oRequestAnimationFrame ||
  165.                 window.msRequestAnimationFrame ||
  166.                 function (callback, element) {
  167.                     window.setTimeout(callback, 1000 / 60);
  168.                 };
  169.         })();
  170.     </script>
  171. </head>
  173. <body onload="webglStart()">
  174.     <canvas id='myCanvas' width="1024" height='768'></canvas>
  175. </body>
  177. </html>

模型矩阵与视图矩阵共同作用 ：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="./gl-matrix.js"></script>
  10.     <script>
  11.         let vertexstring = `
  12.         attribute vec4 a_position;
  13.         uniform mat4 u_formMatrix;
  14.         uniform mat4 proj;
  15.         attribute vec4 a_color;
  16.         varying vec4 color;
  17.         void main(void){
  18.             gl_Position =  u_formMatrix * a_position;
  19.             color = a_color;
  20.         }
  21.         `;
  22.         let fragmentstring = `
  23.         precision mediump float;
  24.         varying vec4 color;
  25.         void main(void){
  26.           gl_FragColor =color;
  27.         }
  28.         `;
  30.         var webgl;
  31.         var uniformTexture = 0;
  32.         var uniformTexture1 = 0;
  33.         var uniformAnim = 0;
  34.         var count = 0;
  35.         var texture0;
  36.         var texture1;
  37.         
  38.         function webglStart() {
  39.             init();
  40.         }
  42.         function init() {
  43.             initWebgl();
  44.             initShader();
  45.             initBuffer();
  46.             draw();
  47.             initEvent()
  48.         }
  49.         
  50.         function initWebgl() {
  51.             let webglDiv = document.getElementById('myCanvas');
  52.             webgl = webglDiv.getContext("webgl");
  53.             webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);
  55.         }
  56.         function initShader() {
  58.             let vsshader = webgl.createShader(webgl.VERTEX_SHADER);
  59.             let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);
  61.             webgl.shaderSource(vsshader, vertexstring);
  62.             webgl.shaderSource(fsshader, fragmentstring);
  64.             webgl.compileShader(vsshader);
  65.             webgl.compileShader(fsshader);
  66.             if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {
  67.                 var err = webgl.getShaderInfoLog(vsshader);
  68.                 alert(err);
  69.                 return;
  70.             }
  71.             if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {
  72.                 var err = webgl.getShaderInfoLog(fsshader);
  73.                 alert(err);
  74.                 return;
  75.             }
  76.             let program = webgl.createProgram();
  77.             webgl.attachShader(program, vsshader);
  78.             webgl.attachShader(program, fsshader)
  79.             webgl.linkProgram(program);
  80.             webgl.useProgram(program);
  81.             webgl.program = program
  83.         }
  84.         function initBuffer() {
  85.             let ModelMatrix = glMatrix.mat4.create();
  86.             glMatrix.mat4.identity(ModelMatrix);
  87.             let angle = Math.PI / 180 * 30;
  88.             console.log(angle);
  89.             glMatrix.mat4.rotate(ModelMatrix, ModelMatrix,angle, [0, 0, 1])
  91.             let ViewMatrix = glMatrix.mat4.create();
  92.             glMatrix.mat4.identity(ViewMatrix);
  93.             debugger
  94.             ViewMatrix =glMatrix.mat4.lookAt(ViewMatrix,[0, 0, 0.3], [0, 0, 0], [0, 1, 0]);
  95.             console.log(ViewMatrix);
  96.             let mvMatrix = glMatrix.mat4.create();
  97.            glMatrix.mat4.multiply(mvMatrix,ViewMatrix, ModelMatrix)
  99.             let arr = [
  100.                 0.0, 0.5, -0.4, 1, 0.4, 1.0, 0.4, 1,
  101.                 -0.5, -0.5, -0.4, 1, 0.4, 1.0, 0.4, 1,
  102.                 0.5, -0.5, -0.4, 1, 0.4, 1.0, 0.4, 1,
  104.                 0.5, 0.4, -0.2, 1, 1.0, 1.0, 0.4, 1,
  105.                 -0.5, 0.4, -0.2, 1, 1.0, 1.0, 0.4, 1,
  106.                 0.0, -0.6, -0.2, 1, 1.0, 1.0, 0.4, 1,
  108.                 0.0, 0.5, 0.0, 1, 0.4, 0.4, 1.0, 1,
  109.                 -0.5, -0.5, 0.0, 1, 0.4, 0.4, 1.0, 1,
  110.                 0.5, -0.5, 0.0, 1, 0.4, 0.4, 1.0, 1,
  112.             ]
  114.             let pointPosition = new Float32Array(arr);
  115.             let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");
  116.             let triangleBuffer = webgl.createBuffer();
  117.             webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
  118.             webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);
  119.             webgl.enableVertexAttribArray(aPsotion);
  120.             webgl.vertexAttribPointer(aPsotion, 4, webgl.FLOAT, false, 8 * 4, 0);
  121.             let aColor = webgl.getAttribLocation(webgl.program, "a_color");
  122.             webgl.enableVertexAttribArray(aColor);
  123.             webgl.vertexAttribPointer(aColor, 4, webgl.FLOAT, false, 8 * 4, 4 * 4);
  125.             let uniformMatrix1 = webgl.getUniformLocation(webgl.program, "u_formMatrix");
  126.             webgl.uniformMatrix4fv(uniformMatrix1, false, mvMatrix)
  127.         }
  129.         function draw() {
  130.             webgl.clearColor(0.0, 1.0, 0.0, 1.0);
  131.             webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
  132.             // webgl.enable(webgl.DEPTH_TEST);
  133.             //纹理变动
  134.             uniformAnim = webgl.getUniformLocation(webgl.program, "anim");
  135.             count = count + 0.01;
  136.             webgl.uniform1f(uniformAnim, count);
  137.             webgl.drawArrays(webgl.TRIANGLES, 0, 9);
  138.         }
  140.     </script>
  141. </head>
  143. <body onload="webglStart()">
  144.     <canvas id='myCanvas' width="1024" height='768'></canvas>
  145. </body>
  147. </html>

视点改变影响三维展示效果：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="./gl-matrix.js"></script>
  10.     <script>
  11.         let vertexstring = `
  12.         attribute vec4 a_position;
  13.         uniform mat4 u_formMatrix;
  14.         attribute vec4 a_color;
  15.         varying vec4 color;
  16.         void main(void){
  17.             gl_Position = u_formMatrix * a_position;
  18.             color = a_color;
  19.         }
  20.         `;
  21.         let fragmentstring = `
  22.         precision mediump float;
  23.         varying vec4 color;
  24.         void main(void){
  25.           gl_FragColor =color;
  26.         }
  27.         `;
  29.         var webgl;
  30.         var uniformTexture = 0;
  31.         var uniformTexture1 = 0;
  32.         var uniformAnim = 0;
  33.         var count = 0;
  34.         var texture0;
  35.         var texture1;
  36.         var projMatrix = glMatrix.mat4.create()
  38.         function init() {
  39.             initWebgl();
  40.             initShader();
  41.             initBuffer();
  42.             draw();
  43.         }
  44.         function initWebgl() {
  45.             let webglDiv = document.getElementById('myCanvas');
  46.             webgl = webglDiv.getContext("webgl");
  48.         }
  49.         function initShader() {
  51.             let vsshader = webgl.createShader(webgl.VERTEX_SHADER);
  52.             let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);
  54.             webgl.shaderSource(vsshader, vertexstring);
  55.             webgl.shaderSource(fsshader, fragmentstring);
  57.             webgl.compileShader(vsshader);
  58.             webgl.compileShader(fsshader);
  59.             if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {
  60.                 var err = webgl.getShaderInfoLog(vsshader);
  61.                 alert(err);
  62.                 return;
  63.             }
  64.             if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {
  65.                 var err = webgl.getShaderInfoLog(fsshader);
  66.                 alert(err);
  67.                 return;
  68.             }
  69.             let program = webgl.createProgram();
  70.             webgl.attachShader(program, vsshader);
  71.             webgl.attachShader(program, fsshader)
  72.             webgl.linkProgram(program);
  73.             webgl.useProgram(program);
  74.             webgl.program = program
  76.         }
  77.         function initBuffer() {
  78.             let arr = [
  80.                 0.0, 0.5, -0.4, 1, 0.4, 1.0, 0.4, 1,
  81.                 -0.5, -0.5, -0.4, 1, 0.4, 1.0, 0.4, 1,
  82.                 0.5, -0.5, -0.4, 1, 0.4, 1.0, 0.4, 1,
  84.                 0.5, 0.4, -0.2, 1, 1.0, 1.0, 0.4, 1,
  85.                 -0.5, 0.4, -0.2, 1, 1.0, 1.0, 0.4, 1,
  86.                 0.0, -0.6, -0.2, 1, 1.0, 1.0, 0.4, 1,
  88.                 0.0, 0.5, 0.0, 1, 0.4, 0.4, 1.0, 1,
  89.                 -0.5, -0.5, 0.0, 1, 0.4, 0.4, 1.0, 1,
  90.                 0.5, -0.5, 0.0, 1, 0.4, 0.4, 1.0, 1,
  92.                 // 0.0, 0.6, -0.4, 1,    0.4, 1.0, 1,1, // The back green one
  93.                 // -0.5, -0.4, -0.4,  1, 0.4, 1.0, 1,1,
  94.                 // 0.5, -0.4, -0.4, 1,  0.4, 1.0,1,1,
  96.                 // 0.5, 0.4, -0.2,  1, 1.0, 1.0, 0.4,1, // The middle yellow one
  97.                 // -0.5, 0.4, -0.2, 1,  1.0, 1.0, 0.4,1,
  98.                 // 0.0, -0.6, -0.2,1,   1.0, 1.0, 0.4,1,
  100.                 // 0.0, 0.5, 0.0,  1,   0.4, 0.4, 1.0,1, // The front blue one 
  101.                 // -0.5, -0.5, 0.0,1,  0.4, 0.4, 1.0,1,
  102.                 // 0.5, -0.5, 0.0, 1,  0.4, 0.4, 1.0,1,
  103.             ]
  105.             let pointPosition = new Float32Array(arr);
  106.             let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");
  107.             let triangleBuffer = webgl.createBuffer();
  108.             webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
  109.             webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);
  110.             webgl.enableVertexAttribArray(aPsotion);
  111.             webgl.vertexAttribPointer(aPsotion, 4, webgl.FLOAT, false, 8 * 4, 0);
  112.             let aColor = webgl.getAttribLocation(webgl.program, "a_color");
  113.             webgl.enableVertexAttribArray(aColor);
  114.             webgl.vertexAttribPointer(aColor, 4, webgl.FLOAT, false, 8 * 4, 4 * 4);
  116.             let modelView = glMatrix.mat4.create();
  117.             glMatrix.mat4.identity(modelView);
  118.             debugger
  119.             modelView = glMatrix.mat4.lookAt(modelView, [0, 0, 0.2], [0, 0, 0], [0, 1, 0]);
  120.             console.log(modelView);
  122.             let uniformMatrix1 = webgl.getUniformLocation(webgl.program, "u_formMatrix");
  123.             webgl.uniformMatrix4fv(uniformMatrix1, false, modelView);
  124.         }
  126.         function draw() {
  127.             webgl.clearColor(0.0, 1.0, 0.0, 1.0);
  128.             webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
  129.             webgl.drawArrays(webgl.TRIANGLES, 0, 9);
  130.         }
  132.     </script>
  133. </head>
  135. <body onload="init()">
  136.     <canvas id='myCanvas' width="1024" height='768'></canvas>
  137. </body>
  139. </html>

效果：

复盘：

标签： webgl javascript 开发语言
本文转载自: https://blog.csdn.net/Ian1025/article/details/143300285
版权归原作者 Ian1025 所有， 如有侵权，请联系我们删除。
登录后发布评论

“WebGL进阶（四）-视点和视线”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。