WebGL系列教程六（纹理映射与立方体贴图）

已于 2024-10-09 11:15:10 修改
阅读量1.3k 收藏 24
点赞数 22
分类专栏： WebGL 文章标签： webgl 贴图 纹理映射 uv 纹理坐标 立方体
于 2024-09-12 11:14:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiangshangdemayi/article/details/142164134
版权

快速导航（持续更新中）

WebGL系列教程一（开篇）
WebGL系列教程二（环境搭建及着色器初始化）
WebGL系列教程三（使用缓冲区绘制三角形）
WebGL系列教程四（绘制彩色三角形）
WebGL系列教程五（使用索引绘制彩色立方体）
WebGL系列教程六（纹理映射与立方体贴图）
WebGL系列教程七（二维及三维旋转、平移、缩放）
WebGL系列教程八（GLSL着色器基础语法）
WebGL系列教程九（动画）
WebGL系列教程十（模型Model、视图View、投影Projection变换）
WebGL系列教程十一（光照原理及Blinn Phong着色模型）

目录

1 前言

  上一讲我们讲了如何使用索引绘制彩色立方体，还留了一个思考题：怎么让立方体的每个面都保持一个颜色?这一讲我们就来解决这个问题，并引出纹理映射和立方体贴图。

2 思考题

  怎么让立方体的每个面都保持一个颜色?那当然是让每个面的两个三角形都保持一个颜色就行了，那怎么让每个三角形都保持一个颜色呢？因为三角形的颜色是通过顶点的颜色插值出来的，自然是让三角形的每个顶点都保持一个颜色就可以了。
  但是这样又产生了新问题，因为顶点是公用的，难道给每个顶点多个颜色吗？答：是的。
在这里插入图片描述
  比如v0这个顶点，它被三个面公用，分别是前面、上面、右面。那么也就意味着它会有三个颜色，因为我们要让立方体每个表面都是一个颜色。回顾一下上一讲我们是怎么给顶点颜色的：

//顶点和颜色
let verticesColors = new Float32Array([
     1.0, 1.0, 1.0,   1.0,1.0,1.0,//v0 近平面 右上 颜色
    -1.0, 1.0, 1.0,   1.0,0.0,1.0,//v1 近平面 左上 颜色
    -1.0,-1.0, 1.0,   1.0,0.0,1.0,//v2 近平面 左下 颜色
     1.0,-1.0, 1.0,   1.0,1.0,0.0,//v3 近平面 右下 颜色
     1.0,-1.0,-1.0,   1.0,0.0,1.0,//v4 远平面 右下 颜色
    -1.0,-1.0,-1.0,   1.0,1.0,1.0,//v5 远平面 左下 颜色
    -1.0, 1.0,-1.0,   0.0,0.0,1.0,//v6 远平面 左上 颜色
     1.0, 1.0,-1.0,   0.0,1.0,1.0 //v7 远平面 右上 颜色
]);
//顶点索引
let indices = new Uint8Array([
    0,1,2,  0,2,3,//近平面
    4,5,6,  4,6,7,//远平面
    1,2,5,  1,5,6,//左平面
    0,3,4,  0,4,7,//右平面
    3,4,2,  3,5,2,//下平面
    0,7,6,  0,1,6 //上平面
]);

  现在一个顶点三个颜色，那岂不是说顶点不够用了？是的，所以每个顶点我们要写三次。也就是说，这次顶点不能公用了。我们对上述代码进行修改

const verticesColors = new Float32Array([
  // 前面
  -1.0, -1.0,  1.0,     1.0, 0.0,1.0,//v2 红色
   1.0, -1.0,  1.0,     1.0, 0.0,1.0,//v3 红色
   1.0,  1.0,  1.0,     1.0, 0.0,1.0,//v0 红色
  -1.0,  1.0,  1.0,     1.0, 0.0,1.0,//v1 红色

  // 后面
  -1.0, -1.0, -1.0,     0.0, 1.0, 0.0,//v5 绿色
   1.0, -1.0, -1.0,     0.0, 1.0, 0.0,//v4 绿色
   1.0,  1.0, -1.0,     0.0, 1.0, 0.0,//v7 绿色
  -1.0,  1.0, -1.0,     0.0, 1.0, 0.0,//v6 绿色

  // 上面
  -1.0,  1.0,  1.0,     0.0, 0.0,1.0,//v1 蓝色
   1.0,  1.0,  1.0,     0.0, 0.0,1.0,//v0 蓝色
   1.0,  1.0, -1.0,     0.0, 0.0,1.0,//v7 蓝色
  -1.0,  1.0, -1.0,     0.0, 0.0,1.0,//v6 蓝色

  // 下面
  -1.0, -1.0,  1.0,     0.0, 0.0,0.0,//v2 黑色
   1.0, -1.0,  1.0,     0.0, 0.0,0.0,//v3 黑色
   1.0, -1.0, -1.0,     0.0, 0.0,0.0,//v4 黑色
  -1.0, -1.0, -1.0,     0.0, 0.0,0.0,//v5 黑色

  // 左面
  -1.0, -1.0, -1.0,     0.0, 1.0,1.0,//v5 青色
  -1.0, -1.0,  1.0,     0.0, 1.0,1.0,//v2 青色
  -1.0,  1.0,  1.0,     0.0, 1.0,1.0,//v1 青色
  -1.0,  1.0, -1.0,     0.0, 1.0,1.0,//v6 青色

  // 右面
   1.0, -1.0,  1.0,     1.0, 1.0,1.0,//v3 白色
   1.0, -1.0, -1.0,     1.0, 1.0,1.0,//v4 白色
   1.0,  1.0, -1.0,     1.0, 1.0,1.0,//v7 白色
   1.0,  1.0,  1.0,     1.0, 1.0,1.0,//v0 白色
]);
//顶点索引
let indices = new Uint8Array([
   0, 1, 2, 0, 2, 3, // 前面
   4, 5, 6, 4, 6, 7, // 后面
   8, 9, 10, 8, 10, 11, // 上面
   12, 13, 14, 12, 14, 15, // 下面
   16, 17, 18, 16, 18, 19, // 左面
   20, 21, 22, 20, 22, 23  // 右面
]);

  看下效果，prefect！
在这里插入图片描述

3 纹理映射介绍

  其实这个词语还是比较好理解。见名知意，大概意思就是把纹理映射到某个地方，纹理是什么？现在你可以简单的认为纹理就是一张图片。把一张二维的图片映射到一个三维物体的表面，就叫纹理映射。
在这里插入图片描述

4 怎么映射？

  很简单，你只需要将立方体的的和图片的位置对应起来告诉WebGL就可以了。比如立方体的左上角对应图片的左上角，立方体右上角对应图片右上角，左下角、右下角类似。那么中间的怎么办？中间的WebGL会自动帮我们去映射。纹理坐标我们用uv来表示，相当于xy。不论图片是什么尺寸的，图片的左下角uv始终是【0，0】，右上角始终是【1，1】，这一点也是WebGL帮我们实现的。
在这里插入图片描述

5 开始绘制

5.1 声明顶点着色器和片元着色器

<script id="vertex-shader" type="x-shader/x-vertex">
    //顶点位置
    attribute vec4 a_Position;
    //纹理坐标
    attribute vec2 a_TexCoord;
    //传递纹理坐标
    varying vec2 v_TexCoord;
    void main(){
        gl_Position = a_Position;
        //直接将纹理坐标赋值给传递变量
        v_TexCoord = a_TexCoord;
    }
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
    precision highp float;
    //采样器，固定写法
    uniform sampler2D u_Sampler;
    //接收顶点着色器传过来的值
    varying vec2 v_TexCoord;
    void main(){
    	//到某个纹理坐标去采样，也是固定写法
        gl_FragColor = texture2D(u_Sampler,v_TexCoord);
    }
</script>

5.2 修改顶点的颜色为纹理坐标

  前面我们给立方体的表面赋值的是颜色，现在我们把它变为纹理坐标

const verticesColors = new Float32Array([
  // 前面
   -1.0, -1.0,  1.0,   0.0, 0.0,//v2 图片左下角纹理坐标
    1.0, -1.0,  1.0,   1.0, 0.0,//v3 图片左下角纹理坐标
    1.0,  1.0,  1.0,   1.0, 1.0,//v0 图片右下角纹理坐标
   -1.0,  1.0,  1.0,   0.0, 1.0,//v1 图片左上角纹理坐标

   // 后面
   -1.0, -1.0, -1.0,   0.0, 0.0,//v5 同上
    1.0, -1.0, -1.0,   1.0, 0.0,//v4 同上
    1.0,  1.0, -1.0,   1.0, 1.0,//v7 同上
   -1.0,  1.0, -1.0,   0.0, 1.0,//v6 同上

   // 上面
   -1.0,  1.0,  1.0,   0.0, 0.0,//v1 同上
    1.0,  1.0,  1.0,   1.0, 0.0,//v0 同上
    1.0,  1.0, -1.0,   1.0, 1.0,//v7 同上
   -1.0,  1.0, -1.0,   0.0, 1.0,//v6 同上

   // 下面
    -1.0, -1.0, 1.0,   0.0, 0.0,//v2 同上
    1.0,  -1.0, 1.0,   1.0, 0.0,//v3 同上
    1.0,  -1.0,-1.0,   1.0, 1.0,//v4 同上
    -1.0, -1.0,-1.0,   0.0, 1.0,//v5 同上

   // 左面
   -1.0, -1.0, -1.0,   0.0, 0.0,//v5 同上
   -1.0, -1.0,  1.0,   1.0, 0.0,//v2 同上
   -1.0,  1.0,  1.0,   1.0, 1.0,//v1 同上
   -1.0,  1.0, -1.0,   0.0, 1.0,//v6 同上

   // 右面
    1.0, -1.0,  1.0,   0.0, 0.0,//v3 同上
    1.0, -1.0, -1.0,   1.0, 0.0,//v4 同上
    1.0,  1.0, -1.0,   1.0, 1.0,//v7 同上
    1.0,  1.0,  1.0,   0.0, 1.0,//v0 同上
]);


const indices = new Uint8Array([
   0, 1, 2, 0, 2, 3, // 前面
   4, 5, 6, 4, 6, 7, // 后面
   8, 9, 10, 8, 10, 11, // 上面
   12, 13, 14, 12, 14, 15, // 下面
   16, 17, 18, 16, 18, 19, // 左面
   20, 21, 22, 20, 22, 23  // 右面
]);

5.3 指定顶点位置和纹理坐标的值

 //顶点
 let vertexColorBuffer = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer);
 gl.bufferData(gl.ARRAY_BUFFER,verticesColors,gl.STATIC_DRAW);
 let FSIZE = verticesColors.BYTES_PER_ELEMENT;
 let a_Position = gl.getAttribLocation(program,'a_Position');
 gl.vertexAttribPointer(a_Position,3,gl.FLOAT,false,FSIZE*5,0);
 gl.enableVertexAttribArray(a_Position);
 //指定纹理坐标值
 let a_TexCoord = gl.getAttribLocation(program,'a_TexCoord');
 gl.vertexAttribPointer(a_TexCoord,2,gl.FLOAT,false,5*FSIZE,3*FSIZE);
 gl.enableVertexAttribArray(a_TexCoord);

5.4 获取图片成功后进行绘制

let image = new Image();
image.src = 'static/sky.jpg';
image.onload = function(){
    console.log('image ok');
	//创建纹理对象
    let texture = gl.createTexture();
    //获取采样器
    let u_Sampler = gl.getUniformLocation(program,'u_Sampler');
    //反转Y轴，canvas的Y轴和WebGL的Y轴方向是反的
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
    //启用0号纹理
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D,texture);
    //设置纹理为，缩小纹理时，取纹理坐标周围四个像素的颜色均值
    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
    //设置对象使用的图片，mipmap层级，图像的格式，纹理的格式，纹理数据类型，图片
    gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,image);
    //将0号纹理赋值给采样器
    gl.uniform1i(u_Sampler,0);


    //绑定索引缓冲
    let indexBuffer =  gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indices,gl.STATIC_DRAW);
    //清空颜色缓冲和深度缓冲
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    //绘制
    //顶点索引数组如果是Uint8Array，就是UNSIGNED_BYTE，表示数组里的值在0-2^8-1(255)
    //................Uint16Array,就是UNSIGNED_SHORT，表示数组里的值在0-2^16-1(65535)
    //................Uint32Array,就是UNSIGNED_INT，表示数组里的值在0-2^32-1(4294967295)
    gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_BYTE, 0);
};

5.5 效果

  为了能看到明显的效果，我将立方体进行了旋转，具体如何旋转，我们后面的文章会进行介绍。
在这里插入图片描述

5.6 完整代码

// Create a cube
//    v6----- v7
//   /|      /|
//  v1------v0|
//  | |     | |
//  | |v5---|-|v4
//  |/      |/
//  v2------v3
const verticesColors = new Float32Array([
    // 前面
    -1.0, -1.0,  1.0,   0.0, 0.0,//v2 图片左下角纹理坐标
     1.0, -1.0,  1.0,   1.0, 0.0,//v3 图片左下角纹理坐标
     1.0,  1.0,  1.0,   1.0, 1.0,//v0 图片右下角纹理坐标
    -1.0,  1.0,  1.0,   0.0, 1.0,//v1 图片左上角纹理坐标

    // 后面
    -1.0, -1.0, -1.0,   0.0, 0.0,//v5 同上
     1.0, -1.0, -1.0,   1.0, 0.0,//v4 同上
     1.0,  1.0, -1.0,   1.0, 1.0,//v7 同上
    -1.0,  1.0, -1.0,   0.0, 1.0,//v6 同上

    // 上面
    -1.0,  1.0,  1.0,   0.0, 0.0,//v1 同上
     1.0,  1.0,  1.0,   1.0, 0.0,//v0 同上
     1.0,  1.0, -1.0,   1.0, 1.0,//v7 同上
    -1.0,  1.0, -1.0,   0.0, 1.0,//v6 同上

    // 下面
     -1.0, -1.0, 1.0,   0.0, 0.0,//v2 同上
     1.0,  -1.0, 1.0,   1.0, 0.0,//v3 同上
     1.0,  -1.0,-1.0,   1.0, 1.0,//v4 同上
     -1.0, -1.0,-1.0,   0.0, 1.0,//v5 同上

    // 左面
    -1.0, -1.0, -1.0,   0.0, 0.0,//v5 同上
    -1.0, -1.0,  1.0,   1.0, 0.0,//v2 同上
    -1.0,  1.0,  1.0,   1.0, 1.0,//v1 同上
    -1.0,  1.0, -1.0,   0.0, 1.0,//v6 同上

    // 右面
     1.0, -1.0,  1.0,   0.0, 0.0,//v3 同上
     1.0, -1.0, -1.0,   1.0, 0.0,//v4 同上
     1.0,  1.0, -1.0,   1.0, 1.0,//v7 同上
     1.0,  1.0,  1.0,   0.0, 1.0,//v0 同上
]);


const indices = new Uint8Array([
    0, 1, 2, 0, 2, 3, // 前面
    4, 5, 6, 4, 6, 7, // 后面
    8, 9, 10, 8, 10, 11, // 上面
    12, 13, 14, 12, 14, 15, // 下面
    16, 17, 18, 16, 18, 19, // 左面
    20, 21, 22, 20, 22, 23  // 右面
]);
gl.viewport(0, 0, canvas.width, canvas.height);
gl.enable(gl.DEPTH_TEST);
//顶点
let vertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER,verticesColors,gl.STATIC_DRAW);
let FSIZE = verticesColors.BYTES_PER_ELEMENT;
let a_Position = gl.getAttribLocation(program,'a_Position');
gl.vertexAttribPointer(a_Position,3,gl.FLOAT,false,FSIZE*5,0);
gl.enableVertexAttribArray(a_Position);
//指定纹理坐标值
let a_TexCoord = gl.getAttribLocation(program,'a_TexCoord');
gl.vertexAttribPointer(a_TexCoord,2,gl.FLOAT,false,5*FSIZE,3*FSIZE);
gl.enableVertexAttribArray(a_TexCoord);
let image = new Image();
image.src = 'static/sky.jpg';
image.onload = function(){
    console.log('image ok');
	//创建纹理对象
    let texture = gl.createTexture();
    //获取采样器
    let u_Sampler = gl.getUniformLocation(program,'u_Sampler');
    //反转Y轴，canvas的Y轴和WebGL的Y轴方向是反的
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
    //启用0号纹理
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D,texture);
    //设置纹理为，缩小纹理时，取纹理坐标周围四个像素的颜色均值
    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
    //设置对象使用的图片，mipmap层级，图像的格式，纹理的格式，纹理数据类型，图片
    gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,image);
    //将0号纹理赋值给采样器
    gl.uniform1i(u_Sampler,0);


    //绑定索引缓冲
    let indexBuffer =  gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indices,gl.STATIC_DRAW);
    //清空颜色缓冲和深度缓冲
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    //绘制
    //顶点索引数组如果是Uint8Array，就是UNSIGNED_BYTE，表示数组里的值在0-2^8-1(255)
    //................Uint16Array,就是UNSIGNED_SHORT，表示数组里的值在0-2^16-1(65535)
    //................Uint32Array,就是UNSIGNED_INT，表示数组里的值在0-2^32-1(4294967295)
    gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_BYTE, 0);
};

6 总结

  本节我们从如何将立方体每个面的颜色改为相同的颜色开始，介绍到了如何将图片贴到立方体的表面，系统的分析了为什么不能再共用顶点，并将代码进行了修改，以及讲解了纹理坐标的使用。这一节的内容相对较多，但理解起来并不难，希望读者认真体会，回见~

AIGIS.
关注
专栏目录
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
01-19
本文实例讲述了WebGL利用FBO完成立方体贴图效果的方法。分享给大家供大家参考，具体如下： 这篇主要记录WebGL的一些基本要点，顺便也学习下如何使用FBO与环境贴图。先看下效果图(需要支持WebGL，Chrome,火狐，IE11)。 主要实现过程如下，先用FBO输出当前环境在立方体纹理中，再画出当前立方体，最后画球，并且把FBO关联的纹理贴在这个球面上。 开始WebGL时，最好有些OpenGL基础，在前面讲Obj完善与MD2时，大家可能已经发现了，因为着色器的添加使用，原来一些Opengl大部分API已经没有使用。WebGL就和这差不多，大部分功能是着色器完成主要功能，记录下主要过程，大
Python实现立方体纹理映射
董付国的Python专栏
09-20 477
本文要点在于扩展库pyopengl的使用，接口与标准的OpenGL基本一致。import sysfrom OpenGL.GL import *from OpenGL.GLUT import...
WebGL笔记（三）：绘制立方体
weixin_30832405的博客
07-29 691
终于要在三维的场景里绘制一个三维的物体了——1个Cube。 我们先来厘清几个事情： 一个立方体有6个面，每个面4个顶点，所以要绘制24个顶点。 每个顶点位置由3个数字表示，所以顶点信息是72个数字的数组。 每个顶点颜色由4个数字表示，所以颜色信息是96个数字的数组。 先看一看长长的顶点数组： var vertices = [ // Fron...
网页高性能图形编程（四）-WebGL颜色-使用着色器绘制多顶点颜色的三角图形 & 操作部骤-顶点着色器和片段着色器 & 着色器编译羽图像绘制-vertexAttribPointer 方法
weixin_44867717的博客
08-01 1340
第5章-WebGL颜色 01-操作步骤介绍 颜色添加步骤 在顶点着色器中定义一个接收外部传入颜色值的属性变量a_Color和用于传输获取到的颜色值变量v_Color 在片段着色器中定义一个同一类型和名称的v_Color变量接收传顶点传入的值。 重新传入到顶点坐标和颜色值的类型化数组 将数组值传入缓存中并取出，赋值给顶点的两个变量 接收缓存值并绘制图形和颜色 vertexAttribPointer 方法 参数 说明 第1个参数 指定待分配attribute变量的存储位置
WebGL 入门
liubangbo的专栏
07-06 3700
webgl 是在网页上绘制和渲染三维图形的技术，可以让用户与其进行交互。我们之前学过的div+css、canvas 2d 都是专注于二维图形的，它们虽然也能模拟一部分三维效果，但它们和webgl 比起来，那就是玩具枪和AK47的差别。综上所述，webgl 绘图好麻烦啊！麻烦不是不学的理由，因为后面还有three.js 为你排忧解难。那我们为啥不直接学习three.js 呢？那是因为three.js 若是只想画个旋转的立方体还好，若是要深入学习，实现复杂的模型交互逻辑，就必须要有webgl 基础了。
webGL入门知识讲解
m0_57307213的博客
06-18 7126
webgl入门知识讲解
Webgl学习系列-Webgl 入门
最新发布
wjsn520的博客
03-28 557
第二章 Webgl 入门。
天空盒的六张贴图
04-14
1. **创建立方体贴图**：使用WebGL的`texImage2D`函数加载六张贴图到一个立方体贴图纹理单元。 2. **设置纹理参数**：如`gl.TEXTURE_WRAP_S`、`gl.TEXTURE_WRAP_T`和`gl.TEXTURE_MIN_FILTER`，确保纹理在边缘处正确...
threejs-cubemap-exporter:将THREE.CubeCamera的立方体贴图环境导出到6个.PNG中
05-19
《THREE.CubeCamera与立方体贴图环境导出详解》 在三维图形渲染领域，THREE.js是一个广泛使用的JavaScript库，它为WebGL提供了一套强大的工具和接口，使得开发者能够在浏览器中创建复杂的3D场景。其中，THREE....
threejs-cubemap-painter:在立方体贴图上绘制亮度HDR值
06-03
《立方体贴图绘制与HDR亮度值的Three.js实践》 立方体贴图（Cubemap）是一种常见的3D渲染技术，常用于环境映射、全局光照等场景，它由六个正方形图像组成，分别对应六个主要的视图方向：前、后、左、右、上、下。在...
panorama:使用立方体贴图制作一个全景房间，并可以通过手机的方向感应器进行控制
05-19
立方体贴图是一种特殊的纹理映射方式，由六个正方形图像组成，分别代表了空间中的六个方向：前、后、左、右、上、下。将这六个图像组合起来，可以构建出一个三维空间的外观，常用于实现360度全景效果。 在...
webgl教程DEMO
08-23
6. **纹理贴图**：WebGL支持纹理映射，允许你在3D模型上应用图像。`gl.bindTexture()`和`gl.texImage2D()`用于加载和应用纹理。 7. **深度测试和混合**：为了正确渲染多个图层，WebGL使用深度测试来确定哪个像素...
webGL编程指南实战教程
IT飞牛
03-05 2351
顶点着色器是GPU渲染管线上一个可以执行着色器语言的功能单元，具体执行的就是顶点着色器程序，webgl定点着色器程序在javascript中一字符串的形式存在，通过编译处理后传递给顶点着色器执行。片元着色器和顶点着色器一样是GPU渲染管线上一个可以执行着色器程序的功能单元，顶点着色器处理的是逐顶点处理顶点数据，片元着色器是逐片元处理片源数据。下面，我们在上面绘制多个点的案例基础上，改用缓存对象来实现，并且鼠标点击制作坐标收集保存，不做渲染，点击渲染按钮时，一次性对缓冲区中的顶点数据做渲染。
01-webgl入门
qq_22188085的博客
05-29 351
前言 课前准备 安装webstorm 或vscode 开发工具。 安装live-server，用于启服务，安装方法 npm i -g live-server 需掌握es6、html、css 的基础知识。 数学基础，三角函数和向量（非必须）。 课堂目标 对webgl 的概念有一个整体认知 掌握webgl 基本绘图原理和流程 知识点 webgl 概述 webgl 最短教程 - 在画布上刷底色 webgl 最简单图形 - 画一个点 第一章 webgl概述 1-webgl是什么？ webgl 是在网页上
WebGL系列教程：WebGL入门
xiangzhihong8的专栏
07-25 1214
WebGL(全写 Web Graphics Library)是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑 定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统 显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。
WebGL：基础练习 / 简单学习 / demo / canvas3D
snowball的博客
11-03 1188
在绘制过程中，我们首先编译和链接了顶点着色器和片元着色器，并创建了一个着色器程序。在这个 Demo 中，我们首先创建了一个 WebGL 上下文，并定义了一个顶点着色器和一个片元着色器。接着，我们创建了一个着色器程序对象，并将顶点着色器和片元着色器附加到这个程序对象上，并进行链接。接着，我们创建了着色器程序对象，并将顶点着色器和片元着色器附加到这个程序对象上，并进行链接。需要注意的是，绘制图形时，我们使用的是 gl.TRIANGLE_FAN，它表示绘制一个三角形扇形，也就是一个由五个三角形组成的正方形。
WebGL 纹理图像Y轴翻转理解
wzwxwc1987的专栏
03-08 1408
学习《WebGL编程指南》，对纹理图像进行Y轴翻转 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); 不是很理解。 下面写出我的思考： 一、3个坐标系： WebGL纹理映射中，有3个坐标系： webgl坐标系<————>纹理坐标系<————>图片坐标系 双向箭头“<————>”之间需要有映射关系 a、webgl坐标系和纹理坐标系之间的映射关系 b、纹理坐标系和图片坐标系之间的映射在书中没有讲 二、纹...
webgl纹理贴图机制
qq_37987033的博客
01-23 2625
在计算机图形学中，为了模拟更加真实的效果，需要给每个像素赋予不同的颜色值，这种情况下如果手动指定每个像素点的rgb值，将会是一件难以完成的任务。这就需要有一种机制，能够让我们把图片素材渲染到模型的一个或者多个表面上，这种机制叫做纹理贴图，本文将详细介绍在webgl中如何把一张真实图像贴到计算器图形上的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AIGIS.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值