WebGL颜色与纹理

于 2024-09-22 15:33:00 发布
阅读量1.1k 收藏 17
点赞数 25
分类专栏： WebGL 文章标签： webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gghhb12/article/details/142437419
版权

WEBGL中的着色器变量包括以下种类：

  • 属性变量（Attribute Variables）：这些变量用于接收从应用程序中传递的顶点数据，比如顶点位置和颜色，是只读的不可修改。
  • 统一变量（Uniform Variables）：这些变量是着色器中的全局变量，用于接收从应用程序中传递的值，比如投影矩阵，旋转矩阵等。
  • 纹理坐标变量（Texture Coordinate Variables）：这些变量用于指定在纹理图像中采样的位置。
  • 法线向量变量（Normal Vector Variables）：这些变量用于计算光照效果，用于标识几何体表面的法向量。
  • 输出变量（Output Variables）：这些变量用于将着色器的输出传递给渲染管线的下一阶段，比如像素着色器的颜色值。

一、varying变量

1.varying变量定义

在WebGL中，varying变量是在顶点着色器和片元着色器之间传递数据的一种特殊类型的变量。它们被用于在顶点着色器和片元着色器之间传递信息，以便在渲染过程中进行插值。在顶点着色器中，varying变量的值被计算并传递到片元着色器中，然后在片元着色器中进行插值，然后被用来确定要绘制的像素的颜色。

Varying变量通常被用于将光照和纹理坐标等信息从顶点着色器传递到片元着色器中。由于它们是在渲染过程中插值的，所以它们可以用来创建平滑的过渡，使得渲染出来的图像更加真实和细腻。

例如，如果你想在三角形中使用纹理映射，那么你需要将纹理坐标从顶点着色器传递到片元着色器中。你可以通过定义一个varying变量来传递这个纹理坐标，然后在片元着色器中使用它来获取纹理的颜色，从而创建一个真实的纹理映射效果。

2.varying执行流程

在WebGL中，varying变量用于在顶点着色器和片元着色器之间传递数据。它们的执行原理如下：

  1. 在顶点着色器中声明一个varying变量，并对其进行赋值。
  2. 这个varying变量的值会被传递到片元着色器中。
  3. 在片元着色器中，可以通过读取这个varying变量的值来进行后续的计算。
  4. 由于每个像素都会执行片元着色器，因此varying变量的值也会被相应地插值，以便在不同像素之间进行平滑的过渡。
  5. 最终的像素颜色将由片元着色器中的计算结果和其他因素（如光照）共同决定。

varying变量的执行原理是通过在顶点着色器和片元着色器之间传递数据，使得像素颜色可以根据这些数据进行计算。
在这里插入图片描述

3.使用varying绘制彩色三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>varying变量</title>
    <script src="../../lib/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            margin: 50px auto 0;
            display: block;
            background: yellow;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400">
        此浏览器不支持webGL
    </canvas>
</body>
</html>

<script>
    const ctx = document.getElementById('canvas')

    const gl = ctx.getContext('webgl');

    //着色器
    //创建着色器源码
    const VERTEX_SHADER_SOURCE = `
        attribute vec4 aPosition;
        //需要同时在顶点和片元着色器中声明，将数据从顶点着色器传递到片元着色器
        varying vec4 vColor;
        void main(){
            vColor = aPosition;
            //要绘制的坐标
            gl_Position = aPosition;
            //要绘制的大小(着色器变量使用的是浮点型)
            gl_PointSize = 10.0;
        }
    `; //顶点着色器

    const FRAGMENT_SHADER_SOURCE = `
        precision lowp float;
        varying vec4 vColor;
        void main(){
            //要绘制的颜色
            gl_FragColor = vColor;
        }
    `; //片元着色器

    const program =  initShader(gl,VERTEX_SHADER_SOURCE,FRAGMENT_SHADER_SOURCE)
    const aPosition = gl.getAttribLocation(program, 'aPosition')

    
    const points = new Float32Array([
        -0.5,-0.5,
        0.5,-0.5,
        0.0,0.5,
    ])

    const buffer = gl.createBuffer();
    
    gl.bindBuffer(gl.ARRAY_BUFFER,buffer);

    gl.bufferData(gl.ARRAY_BUFFER,points,gl.STATIC_DRAW)


    gl.vertexAttribPointer(aPosition,2,gl.FLOAT,false,0,0);
    gl.enableVertexAttribArray(aPosition)

   
    gl.drawArrays(gl.TRIANGLES,0,3)

</script>

在这里插入图片描述

二、使用纹理渲染图片背景

1.创建纹理对象

纹理对象主要用于存储纹理图像数据。

const texture = gl.createTexture();

同时也可以通过gl.deleteTexture(texture)来删除纹理对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渲染图片背景</title>
    <script src="../../lib/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            margin: 50px auto 0;
            display: block;
            background: yellow;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400">
        此浏览器不支持webGL
    </canvas>
</body>
</html>

<script>
    const ctx = document.getElementById('canvas')

    const gl = ctx.getContext('webgl');

    //着色器
    //创建着色器源码
    const VERTEX_SHADER_SOURCE = `
        attribute vec4 aPosition;
        attribute vec4 aTex;
        varying vec2 vTex;
        void main(){
            //要绘制的坐标
            gl_Position = aPosition;
            vTex = vec2(aTex.x,aTex.y);
        }
    `; //顶点着色器

    const FRAGMENT_SHADER_SOURCE = `
        precision lowp float;
        uniform sampler2D uSampler;
        //纹理坐标
        varying vec2 vTex;
        void main(){
            //要绘制的颜色
            gl_FragColor = texture2D(uSampler,vTex);
        }
    `; //片元着色器

    const program =  initShader(gl,VERTEX_SHADER_SOURCE,FRAGMENT_SHADER_SOURCE)
    const aPosition = gl.getAttribLocation(program, 'aPosition')
    const aTex = gl.getAttribLocation(program, 'aTex')
    const uSampler = gl.getUniformLocation(program, 'uSampler')


    
    const points = new Float32Array([
        -0.5,0.5,0.0,1.0,
        -0.5,-0.5,0.0,0.0,
        0.5,0.5,1.0,1.0,
        0.5,-0.5,1.0,0.0,
    ])

    const buffer = gl.createBuffer();
    const BYTES = points.BYTES_PER_ELEMENT;
    gl.bindBuffer(gl.ARRAY_BUFFER,buffer);

    gl.bufferData(gl.ARRAY_BUFFER,points,gl.STATIC_DRAW)


    gl.vertexAttribPointer(aPosition,2,gl.FLOAT,false,BYTES*4,0);
    gl.vertexAttribPointer(aTex,2,gl.FLOAT,false,BYTES*4,BYTES*2);

    gl.enableVertexAttribArray(aPosition)
    gl.enableVertexAttribArray(aTex)


    const img = new Image();

    img.onload = function(){
        console.log("加载图片",img)
        //创建纹理图像存储纹理数据
        const texture = gl.createTexture();
        //翻转 图片 Y轴
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1)
        //开启一个纹理单元
        gl.activeTexture(gl.TEXTURE0);
        //绑定纹理对象gl.bindTexture(type,texture)
        /*type有两种类型
        gl.TEXTURE_2D:二维纹理
        gl.TEXTURE_CUBE_MAP:立方体纹理
        */
        gl.bindTexture(gl.TEXTURE_2D,texture);
        //处理放大缩小的逻辑gl.texParamteri(type,pname,param)
        /*type 同上
        pname:gl.TEXTURE_MAG_FILTER 放大
              gl.TEXTURE_MIN_FILTER 缩小
              gl.TEXTURE_WRAP_S 横向（水平填充）
              gl.TEXTURE_WRAP_T 纵向（垂直填充）
        param:设置给放大和缩小的有 gl.NEAREST 使用像素颜色值
                                gl.LINEAR 使用四周的加权平均值
              设置给填充的有  gl.REPEAT 平铺重复
                            gl.MIRRORED_REPEAT 镜像对称 
                            gl.CLAMP_TO_EDGE 边缘延伸                
        */
        gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
        //水平垂直的填充模式
        gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);
        //配置纹理图集gl.texImage2D(type,level,internalformat,format,dataType,image)
        /*
        internalformat:图像的内部格式 gl.RGB, gl.RGBA,gl.ALPHA,gl.LUMINANCE(使用物体表面的红绿蓝分量的加权平均值来计算),gl.LUMINANCE_ALPHA
        format:纹理的内部格式，必须和internalformat相同
        dataType: 纹理的数据类型 gl.UNSIGNED_BYTE,gl.UNSIGNED_SHORT_5_6_5,gl.UNSIGNED_SHORT_4_4_4_4,gl.UNSIGNED_SHORT_5_5_5_1,
        */
        gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,img);

        gl.uniform1i(uSampler,0)

        gl.drawArrays(gl.TRIANGLE_STRIP,0,4)

    }
    img.src = "../../picture/test.jpg";

</script>

在这里插入图片描述

三、使用多重纹理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用多重纹理</title>
    <script src="../../lib/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            margin: 50px auto 0;
            display: block;
            background: yellow;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400">
        此浏览器不支持webGL
    </canvas>
</body>
</html>

<script>
    const ctx = document.getElementById('canvas')

    const gl = ctx.getContext('webgl');

    //着色器
    //创建着色器源码
    const VERTEX_SHADER_SOURCE = `
        attribute vec4 aPosition;
        attribute vec4 aTex;
        varying vec2 vTex;
        void main(){
            //要绘制的坐标
            gl_Position = aPosition;
            vTex = vec2(aTex.x,aTex.y);
        }
    `; //顶点着色器

    const FRAGMENT_SHADER_SOURCE = `
        precision lowp float;
        uniform sampler2D uSampler1;
        uniform sampler2D uSampler2;

        //纹理坐标
        varying vec2 vTex;
        void main(){
            vec4 c1 = texture2D(uSampler1,vTex);
            vec4 c2 = texture2D(uSampler2,vTex);

            gl_FragColor = c1*c2;
        }
    `; //片元着色器

    const program =  initShader(gl,VERTEX_SHADER_SOURCE,FRAGMENT_SHADER_SOURCE)
    const aPosition = gl.getAttribLocation(program, 'aPosition')
    const aTex = gl.getAttribLocation(program, 'aTex')
    const uSampler1 = gl.getUniformLocation(program, 'uSampler1')
    const uSampler2 = gl.getUniformLocation(program, 'uSampler2')


    
    const points = new Float32Array([
        -0.5,0.5,0.0,1.0,
        -0.5,-0.5,0.0,0.0,
        0.5,0.5,1.0,1.0,
        0.5,-0.5,1.0,0.0,
    ])

    const buffer = gl.createBuffer();
    const BYTES = points.BYTES_PER_ELEMENT;
    gl.bindBuffer(gl.ARRAY_BUFFER,buffer);

    gl.bufferData(gl.ARRAY_BUFFER,points,gl.STATIC_DRAW)


    gl.vertexAttribPointer(aPosition,2,gl.FLOAT,false,BYTES*4,0);
    gl.vertexAttribPointer(aTex,2,gl.FLOAT,false,BYTES*4,BYTES*2);

    gl.enableVertexAttribArray(aPosition)
    gl.enableVertexAttribArray(aTex)


    Promise.all([getImage(gl,"../../picture/test.jpg",uSampler1,0),
                getImage(gl,"../../picture/test2.jpeg",uSampler2,1)])
            .then(()=>{
                gl.drawArrays(gl.TRIANGLE_STRIP,0,4)
            })

</script>

要叠加的图片
请添加图片描述

在这里插入图片描述

码上生花
关注
专栏目录
WebGL 纹理——在矩形表面贴上图像
dabaooooq的博客
09-06 549
WebGL要进行纹理映射，需遵循以下四步： 1. 准备好映射到几何图形上的纹理图像。 2.为几何图形配置纹理映射方式。 3.加载纹理图像，对其进行一些配置，以在WebGL中使用它。 4.在片元着色器中将相应的纹素从纹理中抽取出来，并将纹素的颜色赋给片元。接下来，我们来仔细研究上述第1步到第4步。第1步中准备的纹理图像，可以是浏览器支持的任意格式的图像。你可以使用任何照片第2步指定映射方式，就是确定“几何图形的某个片元”的颜色如何取决于“纹理图像中哪个（或哪几个）像素”的问题（即前者到后者的映
WebGL纹理与材质
最新发布
天涯学馆
09-23 302
WebGL中的纹理和材质是实现3D图形真实感的关键。通过理解它们的工作原理，以及如何创建和应用，你将能够创建出丰富的3D场景。结合高级纹理技术，如法线映射、环境光遮罩等，可以进一步提升视觉效果。在实践中不断学习和探索，你将能够掌握更多的3D图形编程技巧。
WebGL入门 颜色与纹理
IT男的成长记录
11-15 1114
第五章 颜色与纹理 gl.vertexAttribPointer()的步进和偏移参数 var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'attribute float a_PointSize;\n' + 'void main() {\n' + ' gl_Position = a_Position;\n
webgl纹理
静儿的博客
08-23 1683
效果图： 操作步骤： 1.创建HTML5 canvas 2.获取画布 canvas 的 ID 3.获取WebGL 4.编译着色器，合并程序 //顶点着色器程序 var VSHADER_SOURCE = "attribute vec4 a_Position;" + "attribute vec2 a_TextCoord;" + // 接受纹理坐标 "varying vec2 v_TexCoord;" + // 传递纹理坐标 "vo
在WebGL中使用纹理
qq_20535249的博客
07-17 459
//创建纹理 cubeTexture = gl.createTexture(); //加载图片 cubeImage = new Image(); cubeImage.src = "./1.jpg"; cubeImage.onload = function () { handleTextureLoaded(cubeImage, cubeTexture); } function handleTextureLoaded(image, texture) { //将创建的纹理绑定到 TE.
在 WebGL 中使用纹理
qq_25547755的博客
12-28 940
现在我们已经创建好了一个可以旋转的 3D 的立方体，接下来是时候使用贴图来代替每个面的单一的颜色了。
webgl配置纹理
dtbk123的博客
04-01 371
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Draw quad with texture</title> </head> <body onload="main()"> ...
WebGL学习颜色与纹理
04-01
### WebGL学习颜色与纹理 #### 一、理解Varying变量的作用 在WebGL中，顶点着色器(Vertex Shader)和片段着色器(Fragment Shader)之间通过Varying变量进行通信。当我们想要为每个顶点指定不同的颜色时，就需要用到...
玩转WebGL(八)立方体纹理
q641187432的专栏
02-09 2270
纹理映射 步骤： 准备纹理图像 配置集合图形纹理映射方式 加载和配置纹理图像 从纹理中抽出纹素赋给片元 纹理坐标 就是纹理图像上的坐标，通过纹理坐标可以在纹理图像上获取纹素颜色，webgl系统中的纹理坐标是二维的。 设置纹理坐标： private texCoords = [ 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 1.0, 0.0,
WebGL的颜色渲染-渲染一张DEM(数字高程模型)
05-01
WebGL是一种基于OpenGL标准的JavaScript API...总的来说，WebGL的颜色渲染和DEM的结合，为在线地图服务、虚拟地球仪和地理信息系统提供了强大的可视化工具。掌握这些技术，能够帮助开发者创建出引人入胜的3D地理应用。
webgl-原生纹理贴图
以爱护甲,爱满枫林。
04-12 933
false, //normalized: 正交化 true或false , [1, 2] => [1/根号5， 2/根号5]image.src = "http://localhost:8080/upload/dog.webp"//需要更改资源地址。//对贴图的参数进行设置texParameteri(贴图的种类,参数的名称，具体值)//对贴图的参数进行设置texParameteri(贴图的种类,参数的名称，具体值)。//设置纹理贴图填充方式(纹理贴图像素尺寸小于顶点绘制区域像素尺寸)
WebGL－11.渲染到纹理
Sun zi chao的博客
11-17 386
本系列教程主要讲解利用WebGL开发网页版的三维图形程序。这里主要用到的OpenGL和FlyMath内容。本系列内容较难。要求学生对几何和编程有一定的了解。建议初三以上同学学习。离屏渲染也叫渲染到纹理。也就FBO（帧缓冲对象）其实就是两次渲染。第一次渲染的图像保存在一张纹理上，第二次渲染时把第一次渲染出来的纹理使用上。第一次的渲染结果只保存在纹理上，不在屏幕上显示。所以叫“离屏渲染”。离屏渲染主要用在镜子和阴影上。比如一个镜子，镜子前方有一物体。摄像机在物体后方看向镜子。
WebGL编程指南13-纹理贴图原理
weixin_46773434的博客
09-19 1677
为了更好的理解纹理坐标系与顶点坐标系映射关系，调整一下纹理坐标，更方便我们理解纹理是如何映射到几何体上的。
webgl纹理贴图机制
qq_37987033的博客
01-23 2633
在计算机图形学中，为了模拟更加真实的效果，需要给每个像素赋予不同的颜色值，这种情况下如果手动指定每个像素点的rgb值，将会是一件难以完成的任务。这就需要有一种机制，能够让我们把图片素材渲染到模型的一个或者多个表面上，这种机制叫做纹理贴图，本文将详细介绍在webgl中如何把一张真实图像贴到计算器图形上的。
6. WebGPU 纹理(Textures )
xuejianxinokok的专栏
06-12 1501
纹理通常表示二维图像。二维图像只是颜色值的二维数组，因此您可能想知道，为什么需要二维数组的纹理？可以将存储缓冲区用作二维数组。纹理的特别之处在于它们可以通过称为。
WebGL之使用纹理
qq_35094120的博客
03-07 1323
现在我们已经创建好了一个可以旋转的 3D 的立方体，接下来是时候使用贴图来代替每个面的单一的颜色了。
在 WebGL 中使用纹理贴图 (texture)
Kristen的博客
11-14 1353
由美术工作人员生成的纹理最终在用来渲染前都应该使用放大或缩小的方式把它生成为 2 的幂纹理，其实事实上来说，在创作纹理之初就应该直接使用大小是 2 的幂的宽和高。纹理的每一边都应该是像 1，2，4，8，16，32，64，128，256，512，1024 或 2048 这样的值。这样虽然已经可以使用非 2 的幂纹理了，但是你将无法使用多级渐进纹理，纹理坐标包装，纹理坐标重复，而且无法控制设备如何处理你的纹理。现在我们只使用一张单一的纹理贴到立方体的 6 个面上，但是同样的方法可以用来加载任意数量的纹理贴图。
[WebGL入门]二十七，多纹理
热门推荐
lufy小屋
10-19 1万+
多纹理进行渲染的时候应该注意的是，指定正确的纹理单位进行数据的处理，这就足够了。 其他的细节，主要是activeTexture函数和uniform1i函数的使用方法，这几个不出错的话，之后就可以在着色器一侧使用自己喜欢的图片了。 这次只是单纯的在着色器中将两个纹理数据进行相乘运算，然后各个纹理数据分别进行处理，就可以进行完全不一样的渲染，没有使用固定渲染管道，而是使用GLSL中的程序员自定义着色器，这一点很刺激吧。
WebGL 纹理颜色原理
weixin_34417183的博客
01-28 387
本文由云+社区发表 作者：ivweb qcyhust 导语 WebGL绘制图像时，往着色器中传入颜色信息就可以给图形绘制出相应的颜色，现在已经知道顶点着色器和片段着色器一起决定着向颜色缓冲区写入颜色信息并最终呈现出来，那么这个过程是什么样，如果图形的颜色需要用现有图片来渲染那么又该如何操作？ 颜色缓冲区 在绘制开始前，经常见到调用函数清空画布的代码gl.clear(gl.COLOR_BU...
WebGL 3D投影与基础布局入门教程
对齐的绑定（Attribute Binding）是指将顶点数据（如位置、法线、纹理坐标等）与顶点着色器中的属性变量进行绑定。这个过程是通过调用WebGL API函数来完成的，比如`gl.vertexAttribPointer`。 元素的替换（Element ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

码上生花

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

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

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

打赏作者

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

抵扣说明：

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

余额充值