前言

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。–百度百科

在现实中webgl的用途很多，比如医院运维网站，地铁运维网站，海绵城市，可以以三维网页形式展示出现实状态。

WebGL相关文档：http://doc.yonyoucloud.com/doc/wiki/project/webgl/webgL-fundamentals.html

一、webgl的使用

安装第三方包：npm i --save threejs-miniprogram

1.画正方形

import drawRectangle from './draw-rectangle'Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {wx.createSelectorQuery().select('#myCanvas1').node().exec((res) => {const canvas = res[0].nodeconst gl = canvas.getContext('webgl')if (!gl) {console.log('webgl未受支持');return}// 检查所有支持的扩展var available_extensions = gl.getSupportedExtensions();console.log(available_extensions);// 清除画布// 使用完全不透明的黑色清除所有图像，我们将清除色设为黑色，此时并没有开始清除gl.clearColor(0.0, 0.0, 0.0, 1.0);// 用上面指定的颜色清除缓冲区gl.clear(gl.COLOR_BUFFER_BIT);// 画的是一个正方形drawRectangle(gl)
})

import {mat4
} from '../../lib/gl-matrix'function drawColorRectangle(gl) {// Vertex shader programconst vsSource = `attribute vec4 aVertexPosition;attribute vec4 aVertexColor;uniform mat4 uModelViewMatrix;uniform mat4 uProjectionMatrix;varying lowp vec4 vColor;void main(void) {gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;vColor = aVertexColor;}`;// Fragment shader program// 每个片段只是根据其相对于顶点的位置得到一个插值过的颜色，而不是一个指定的颜色值。// lowp表示低精度// lowp, mediump和highpconst fsSource = `varying lowp vec4 vColor;void main(void) {gl_FragColor = vColor;}`;// Initialize a shader program; this is where all the lighting// for the vertices and so forth is established.const shaderProgram = initShaderProgram(gl, vsSource, fsSource);// Collect all the info needed to use the shader program.// Look up which attributes our shader program is using// for aVertexPosition, aVevrtexColor and also// look up uniform locations.const programInfo = {program: shaderProgram,attribLocations: {vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),},uniformLocations: {projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),},};// Here's where we call the routine that builds all the// objects we'll be drawing.const buffers = initBuffers(gl);// Draw the scenedrawScene(gl, programInfo, buffers);
}//
// initBuffers
//
// Initialize the buffers we'll need. For this demo, we just
// have one object -- a simple two-dimensional square.
//
function initBuffers(gl) {// Create a buffer for the square's positions.const positionBuffer = gl.createBuffer();// Select the positionBuffer as the one to apply buffer// operations to from here out.gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);// Now create an array of positions for the square.const positions = [1.0,  1.0,  0.0,-1.0, 1.0,  0.0,1.0,  -1.0, 0.0,-1.0, -1.0, 0.0];// Now pass the list of positions into WebGL to build the// shape. We do this by creating a Float32Array from the// JavaScript array, then use it to fill the current buffer.gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);// Now set up the colors for the vertices// 此数组中包含四组四值向量，每一组向量代表一个顶点的颜色。
var colors = [1.0,  1.0,  1.0,  1.0,    // white1.0,  0.0,  0.0,  1.0,    // red0.0,  1.0,  0.0,  1.0,    // green0.0,  0.0,  1.0,  1.0,    // blue
];const colorBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);return {position: positionBuffer,color: colorBuffer,};
}//
// Draw the scene.
//
function drawScene(gl, programInfo, buffers) {gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaquegl.clearDepth(1.0);                 // Clear everythinggl.enable(gl.DEPTH_TEST);           // Enable depth testinggl.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 radiansconst 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 matrixmodelViewMatrix,     // 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 = 3;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 how to pull out the colors from the color buffer// into the vertexColor attribute.{const numComponents = 4;const type = gl.FLOAT;const normalize = false;const stride = 0;const offset = 0;gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);gl.vertexAttribPointer(programInfo.attribLocations.vertexColor,numComponents,type,normalize,stride,offset);gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor);}// Tell WebGL to use our program when drawinggl.useProgram(programInfo.program);// Set the shader uniformsgl.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);}
}//
// Initialize a shader program, so WebGL knows how to draw our data
//
function initShaderProgram(gl, vsSource, fsSource) {const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);// Create the shader programconst shaderProgram = gl.createProgram();gl.attachShader(shaderProgram, vertexShader);gl.attachShader(shaderProgram, fragmentShader);gl.linkProgram(shaderProgram);// If creating the shader program failed, alertif (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));return null;}return shaderProgram;
}//
// creates a shader of the given type, uploads the source and
// compiles it.
//
function loadShader(gl, type, source) {const shader = gl.createShader(type);// Send the source to the shader objectgl.shaderSource(shader, source);// Compile the shader programgl.compileShader(shader);// See if it compiled successfullyif (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));gl.deleteShader(shader);return null;}return shader;
}export default drawColorRectangle

实际效果

二、相关包源码

gl-matrix相关包源码链接如下：
https://download.csdn.net/download/aa2528877987/86513333

三、总结

画一个图形主要经历如下四个步骤：

1.编写GLSL着色器代码，一个是顶点着色器，一个是片断着色器。
2.加载着色器，组成着色器程序。
3.创建缓冲区对象，填充缓冲区。
4.创建摄像机透视距阵，把元件放到适当的位置。
5.给着色器中的变量绑定值。
6.调用gl.drawArrays，从向量数组中开始绘制。

【愚公系列】2022年09月微信小程序-WebGL画渐变色正方形相关推荐

【愚公系列】2022年09月微信小程序-WebGL立体图形的绘制
文章目录前言一.webgl的使用 1.立体图形的绘制二.相关包源码三.总结前言 WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaS ...
【愚公系列】2022年09月微信小程序-WebGL纹理材质的使用
文章目录前言一.webgl的使用 1.立体图形的绘制二.相关包源码三.总结前言 WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaS ...
【愚公系列】2022年09月微信小程序-微信小程序实现网页一键登录功能
文章目录前言一.微信小程序实现网页一键登录功能 1.旧版登录方法 2.新版登录方法二.相关第三方包源码前言如果微信小程序要获取微信登录的用户信息,需要拿到code去后台换取用户信息,具体步骤 ...
【愚公系列】2022年09月微信小程序-webview内嵌网页的授权认证
文章目录前言一.webview内嵌网页的授权认证 1.内嵌页面 2.登录页面二.web端相关函数 1.判断是否是小程序环境前言随着微信小程序的广泛应用,小程序的用户越来越多,但受其小程序体积 ...
【愚公系列】2022年09月微信小程序-图片加载和全屏适配问题
文章目录前言一.图片加载二.适配机型实现全屏背景图前言在使用图片问题中可能会遇到各种各样的问题,比如图片加载不出来,图片显示在不同机型效果不同,图片加载展示问题等等. 微信小程序image相 ...
【愚公系列】2022年09月微信小程序-自定义导航栏功能的实现
文章目录前言一.自定义导航栏功能的实现 1.组件的封装 2.使用前言导航栏是指位于页面顶部或者侧边区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接站点或者软件内的各个页面的作用. ...
【愚公系列】2022年09月微信小程序-Page页面扩展
文章目录前言一.Page页面扩展 1.组件的封装和引用 2.页面使用 3.效果二.其他相关封装 1.pop-up组件 2.LoginPanel组件 3.LoginPanel组件前言在小程序日 ...
【愚公系列】2022年09月微信小程序-图片懒加载功能实现
文章目录前言一.官方图片的懒加载 1.wxml 2.js 3.css 4.效果二.第三方包实现图片的懒加载 1.安装第三方包 2.组件引用 3.wxml 4.js 5.css 6.效果前言大 ...
【愚公系列】2022年09月微信小程序-three.js绘制正方体
文章目录前言一.Three.js的使用 1.正方体的绘制二.正方体相关js文件三.效果图四.总结前言 Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括 ...

【愚公系列】2022年09月微信小程序-WebGL画渐变色正方形

文章目录

前言

一、webgl的使用

1.画正方形

二、相关包源码

三、总结

【愚公系列】2022年09月微信小程序-WebGL画渐变色正方形相关推荐

最新文章

热门文章

【愚公系列】2022年09月 微信小程序-WebGL画渐变色正方形

文章目录

前言

一、webgl的使用

1.画正方形

二、相关包源码

三、总结

【愚公系列】2022年09月 微信小程序-WebGL画渐变色正方形相关推荐

最新文章

热门文章

【愚公系列】2022年09月微信小程序-WebGL画渐变色正方形

【愚公系列】2022年09月微信小程序-WebGL画渐变色正方形相关推荐