踩坑：

1、图片不显示：图片分辨率为非2的幂次方，图片不能被渲染。图形变成黑方块
2的N次幂：1 2 4 8 16 32 64 128 256 512 1024 2048 4096……
2、几何图形配置映射方式，顶点坐标和纹理坐标对应需要注意，构建顺序与新增顶点的奇偶性相关。
如果新增顶点时奇数，顶点排列顺序为：T = [n-1 n-2 n]；
如果新增顶点为偶数，顶点排列顺序为：T = [n-2 n-1 n]；

图片素材：

链接: https://pan.baidu.com/s/1CQ2fZ36Ke8QfGFDytFkyQw

提取码: 3dh4

关键代码：

function initTexture(ctx) {

let texture = ctx.createTexture()

let u_sampler = ctx.getUniformLocation(ctx.program, "u_sampler")

let image = new Image()

image.crossOrigin = "anonymous"

image.src = "http://localhost:8080/upload/dog.webp"

//异步加载，图片加载完成之后执行这个函数里的任务

image.onload = () => {

//对纹理图像进行y轴反转,是否翻转

ctx.pixelStorei(ctx.UNPACK_FLIP_Y_WEBGL, true);

//默认可以贴8张图片，从索引0开始,这里激活第一个

ctx.activeTexture(ctx.TEXTURE0)

//以TEXTURE_2D方式绑定贴图

ctx.bindTexture(ctx.TEXTURE_2D, texture)

//对贴图的参数进行设置texParameteri(贴图的种类,参数的名称，具体值)

ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.LINEAR)

//设置纹理贴图填充方式(纹理贴图像素尺寸小于顶点绘制区域像素尺寸)

ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MAG_FILTER, ctx.LINEAR)

console.log(image)

//贴图用那种图片进行贴图

ctx.texImage2D(ctx.TEXTURE_2D, 0, ctx.RGBA, ctx.RGBA, ctx.UNSIGNED_BYTE, image)

//将第0张贴图贴到u_sampler

ctx.uniform1i(u_sampler, 0)

draw(ctx)

}

}

html

<!DOCTYPE html>

<head>

<style>

*{

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

<canvas id = 'webgl'>

您的浏览器不支持HTML5,请更换浏览器

</canvas>

<script src="./main.js"></script>

</body>

main.js

let canvas = document.getElementById('webgl')

canvas.width = window.innerWidth

canvas.height = window.innerHeight

let radio = window.innerWidth / window.innerHeight;

let ctx = canvas.getContext('webgl')

//创建顶点资源和像素资源（颜色）

let vertexSource = `

attribute vec2 a_position;

attribute vec2 a_uv;

varying vec2 v_uv;

void main() {

v_uv = a_uv;

gl_Position = vec4(a_position, 0.0, 1.0);

gl_PointSize = 10.0;

}

`

let fragmentSource = `

precision mediump float;

varying vec2 v_uv;

uniform sampler2D u_sampler;

void main (){

vec4 color = texture2D(u_sampler, v_uv);

gl_FragColor = color;

}

`

//gl_FragColor = vec4(v_uv, 0.0, 1.0);

if (initShader(ctx, vertexSource, fragmentSource)) {

let box = [

-0.5, -0.5,

0.5, -0.5,

0.5, 0.5,

-0.5, 0.5

]

let boxFloat32Array = new Float32Array(box)

//创建buffer

let buffer = ctx.createBuffer()

//绑定buffer

ctx.bindBuffer(ctx.ARRAY_BUFFER, buffer)

//往buffer中填充值，并指定数据用途

ctx.bufferData(ctx.ARRAY_BUFFER, boxFloat32Array, ctx.STATIC_DRAW)

//获取vertexShader指定变量内存

let a_Position = ctx.getAttribLocation(ctx.program, "a_position")

//指定每两个数组元素为一个点

/*

* 当数组元素不需进行分割拆分的时候最后两位可以指定为0，0

*

*

*/

ctx.vertexAttribPointer(

a_Position, //location: vertex Shader里面的attributes变量的location

2, ctx.FLOAT, //size: attribute变量的长度 vec2长度2 vec3长度3

false, //normalized: 正交化 true或false , [1, 2] => [1/根号5， 2/根号5]

2 * boxFloat32Array.BYTES_PER_ELEMENT, //stride: 每个点的信息所占的BYTES

0 //offset: 每个点的信息，从第几个BYTES开始数

)

ctx.enableVertexAttribArray(a_Position);

let color = [

0.0, 0.0,

1.0, 0.0,

1.0, 1.0,

0.0, 1.0

]

let colorFloat32Array = new Float32Array(color)

let colorBuffer = ctx.createBuffer()

ctx.bindBuffer(ctx.ARRAY_BUFFER, colorBuffer)

ctx.bufferData(ctx.ARRAY_BUFFER, colorFloat32Array, ctx.STATIC_DRAW)

let a_uv = ctx.getAttribLocation(ctx.program, "a_uv")

ctx.vertexAttribPointer(a_uv, 2, ctx.FLOAT, false, 2 * colorFloat32Array.BYTES_PER_ELEMENT, 0)

ctx.enableVertexAttribArray(a_uv)

initTexture(ctx)

}

function draw(ctx) {

ctx.clearColor(0.0, 0.0, 0.0, 1.0)

ctx.clear(ctx.COLOR_BUFFER_BIT)

ctx.drawArrays(ctx.TRIANGLE_FAN,

0,//从第几个点开始

4 //画几个点)

)

// ctx.drawArrays(ctx.TRIANGLE_FAN,

// 0,//从第几个点开始

// 4 //画几个点)

// )

}

function initTexture(ctx) {

let texture = ctx.createTexture()

let u_sampler = ctx.getUniformLocation(ctx.program, "u_sampler")

let image = new Image()

image.crossOrigin = "anonymous"

image.src = "http://localhost:8080/upload/dog.webp"//需要更改资源地址

//异步加载，图片加载完成之后执行这个函数里的任务

image.onload = () => {

//对纹理图像进行y轴反转

ctx.pixelStorei(ctx.UNPACK_FLIP_Y_WEBGL, 1);

//默认可以贴8张图片，从索引0开始,这里激活第一个

ctx.activeTexture(ctx.TEXTURE0)

//以TEXTURE_2D方式绑定贴图

ctx.bindTexture(ctx.TEXTURE_2D, texture)

//对贴图的参数进行设置texParameteri(贴图的种类,参数的名称，具体值)

ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.LINEAR)

//设置纹理贴图填充方式(纹理贴图像素尺寸小于顶点绘制区域像素尺寸)

ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MAG_FILTER, ctx.LINEAR)

console.log(image)

//贴图用那种图片进行贴图

ctx.texImage2D(ctx.TEXTURE_2D, 0, ctx.RGBA, ctx.RGBA, ctx.UNSIGNED_BYTE, image)

//将第0张贴图贴到u_sampler

ctx.uniform1i(u_sampler, 0)

draw(ctx)

}

}

//创建顶点阴影和像素阴影

function createShader(ctx, type, source) {

//创建shader

let shader = ctx.createShader(type)

//绑定

ctx.shaderSource(shader, source)

//编译shader

ctx.compileShader(shader)

//获取编译结果

let compiler = ctx.getShaderParameter(shader, ctx.COMPILE_STATUS)

if (compiler) {

return shader

} else {

let log = ctx.getShaderInfoLog(shader)

console.log("compile shaders error", log)

//删除异常的shader,防止内存泄露

ctx.deleteShader(shader)

return null

}

}

function createProgram(ctx, vertexShader, fragmentShader) {

//创建program

let program = ctx.createProgram()

if (!program) {

return null

}

//点资源和像素资源合并

ctx.attachShader(program, vertexShader)

ctx.attachShader(program, fragmentShader)

ctx.linkProgram(program)

//获取linked的结果

let linked = ctx.getProgramParameter(program, ctx.LINK_STATUS)

if (linked) {

return program

} else {

//获取link错误信息

let log = ctx.getProgramInfoLog(program)

console.log("link program error", log)

//删除防止内存泄漏

ctx.delete(program)

ctx.deleteShader(vertexShader)

ctx.deleteShader(fragmentShader)

return null

}

}

function initShader(ctx, vertexSource, fragmentSource) {

let vertexShader = createShader(ctx, ctx.VERTEX_SHADER, vertexSource)

let fragmentShader = createShader(ctx, ctx.FRAGMENT_SHADER, fragmentSource)

let program = createProgram(ctx, vertexShader, fragmentShader)

if (program) {

ctx.useProgram(program)

//挂载到ctx

ctx.program = program

return true

} else {

return false

}

}