webgl基础之纹理使用

在webgl中纹理有很多的用途，可以进行数据的保存、贴图等方面的用途。

下面我记录一下在webgl中，最简单纹理的使用,参考文章为一叶斋 | WebGL 纹理详解

本文使用图片也来自一叶斋 | WebGL 纹理详解中demo提供的

1、首页创建顶点、片元着色器

const VERTEX = `attribute vec2 a_position;
varying vec2 vPos;
void main(){vPos = a_position;gl_Position = vec4(2.0 * a_position - 1.0, 0.0, 1.0);
}`const FRAGEMENT = `precision mediump float;
varying vec2 vPos;
uniform sampler2D u_img;
// uniform sampler2D tMap;
void main() {vec4 color =  texture2D(u_img, vPos*5.0);gl_FragColor = color;
}`
const vertexShader = gl.createShader(gl.VERTEX_SHADER)!;gl.shaderSource(vertexShader, VERTEX);gl.compileShader(vertexShader);const fragShader = gl.createShader(gl.FRAGMENT_SHADER)!;gl.shaderSource(fragShader, FRAGEMENT);gl.compileShader(fragShader);

2、创建程序

 const program = gl.createProgram()!;gl.attachShader(program, vertexShader);gl.attachShader(program, fragShader);gl.linkProgram(program);gl.useProgram(program);

3、创建缓冲区并传递顶点

const posBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(positions),gl.STATIC_DRAW
);

4、获取位置信息并启用

const aPosition = gl.getAttribLocation(program, 'a_position');
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition);

5、创建纹理绑定纹理

//加载图片
const img  = await loadImg(img_url)
const texture = gl.createTexture();
// 设置预处理函数，由于图片坐标系和WebGL坐标的Y轴是反的，这个设置可以将图片Y坐标翻转一下
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
// 激活指定纹理单元，WebGL有多个纹理单元，因此在Shader中可以使用多个纹理
gl.activeTexture(gl.TEXTURE0);
// 将纹理绑定到当前上下文
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
// 设置纹理的一些参数
// gl.TEXTURE_WRAP_S 纹理在X方向的包裹方式、
// 取值有gl.REPEAT、gl.MIRRORED_REPEAT、gl.CLAMP_TO_EDGE
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
// gl.TEXTURE_WRAP_T 纹理在Y方向的包裹方式、
// 取值有gl.REPEAT、gl.MIRRORED_REPEAT、gl.CLAMP_TO_EDGE
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
// 纹理缩小时过滤方式，可以取值为gl.LINEAR、gl.NEAREST
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
// 纹理方大时过滤方式，可以取值为gl.LINEAR、gl.NEAREST
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST )
// 解除纹理绑定
gl.bindTexture(gl.TEXTURE_2D, null);

6、绘制

gl.drawArrays(gl.TRIANGLE_FAN, 0, positions.length / 2);

webgl基础之纹理使用相关推荐

WebGL学习之纹理盒
原文地址:WebGL学习之纹理盒我们之前已经学习过二维纹理 gl.TEXTURE_2D,而且还使用它实现了各种效果.但还有一种立方体纹理 gl.TEXTURE_CUBE_MAP,它包含了6个纹理代表 ...
【第二届青训营-寒假前端场】- 「WebGL基础」笔记
Why WebGL / Why GPU? 现代的图像系统 The Pipeline GPU WebGL & OpenGL关系 WebGL绘图步骤创建WebGL上下文创建WebGL Prog ...
JavaScript WebGL 基础概念
引子看了一个库的源码,里面用到了 WebGL ,就开始找 WebGL 的资料.发现相关的知识点很多,按照自己的理解习惯进行了整理记录. Origin My GitHub 简介 WebGL 是一个跨平 ...
webgl 基础渲染demo_WebGL + ThreeJS 实现实时水下焦散 Part 1
知乎视频www.zhihu.com 采用 WebGL 和 ThreeJS 运行实时焦散运算,需要一点相关基础.本文主要介绍焦散的原理以及计算方法原作者 https://github.com/mar ...
js 判断支持webgl_「WebGL基础」：第一部分
WebGL是一种基于OpenGL的浏览器内置3D渲染器,它可以让你在HTML5页面中直接显示3维内容. 在本教程中,我会介绍你使用此框架所需的所有基础内容. 介绍开始学习之前,有几件事你是需要了解的 ...
WebGL基础：着色器基础知识
今天由字节跳动的"yancy"童鞋给大家重磅推出一篇WebGL的干货接下来让我们开启奇幻旅程,进入 3D 的世界. 本文作者:yancy 1. 认识3D 首先我们要介绍的是几个概念 ...
二维特征分类的基础_纹理特征1:灰度共生矩阵（GLCM）
GLCM复习备用: 纹理分析是对图像灰度(浓淡)空间分布模式的提取和分析.纹理分析在遥感图像.X射线照片.细胞图像判读和处理方面有广泛的应用.关于纹理,还没有一个统一的数学模型.它起源于表征纺织品表面 ...
基于WebGL的球体纹理贴图实现全景展示
1 绘制球体 1.1 将球面映射到二维平面三维球面坐标与二维坐标系之间的映射关系如下: 归一化表示为: 1.2 离散化将坐标系沿两轴划分多份,横轴每份宽度为δu,纵轴每份宽度为δv,下图便可以确定 ...
webgl学习六纹理贴图
<html><head><title>纹理贴图</title><script type="text/javascript" s ...
webgl叠加多重纹理
效果:有点像变装,因为没有变装的图片,所以采用了一张图分两半来代替,本文为了突出效果,给下半部分加了个移动,这样就可以体现纹理的叠加效果了,所以在制作图片的时候背景应当设置为黑色,这样就不会因为叠加 ...

webgl基础之纹理使用

在webgl中纹理有很多的用途，可以进行数据的保存、贴图等方面的用途。

本文使用图片也来自一叶斋 | WebGL 纹理详解中demo提供的

1、首页创建顶点、片元着色器

2、创建程序

3、创建缓冲区并传递顶点

4、获取位置信息并启用

5、创建纹理绑定纹理

6、绘制

webgl基础之纹理使用相关推荐

最新文章

热门文章

webgl基础之纹理使用

在webgl中纹理有很多的用途，可以进行数据的保存、贴图等方面的用途。

本文使用图片也来自一叶斋 | WebGL 纹理详解 中demo提供的

1、首页创建顶点、片元着色器

2、创建程序

3、创建缓冲区并传递顶点

4、获取位置信息并启用

5、创建纹理绑定纹理

6、绘制

webgl基础之纹理使用相关推荐

最新文章

热门文章

本文使用图片也来自一叶斋 | WebGL 纹理详解中demo提供的