clay-core
Version:
Provide a more friendly web-side drawing interface!
147 lines (143 loc) • 4.8 kB
HTML
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../../libs/easycss-1.3.1.min.css">
<link rel="stylesheet" href="../../libs/prettify.css">
<link rel="stylesheet" href="../../doc.css">
<script src="../../libs/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<header>
纹理
</header>
<p>
纹理的过程就是把选择片元着色器中使用指定颜色逐片元替换成指定图片逐片元。
</p>
<h2>
准备纹理
</h2>
<h4>
创建纹理对象
</h4>
<pre class='prettyprint lang-js'>var textureObj = render3D.texture(unit[, type]);</pre>
<p>
第一个参数表示创建的纹理单元是哪个，比如0表示0号纹理，必输；第二个是可选参数，表示纹理类型，默认选择为gl.TEXTURE_2D代表二维纹理。
</p>
<h4>
配置纹理
</h4>
<pre class='prettyprint lang-js'>textureObj.config({
"TEXTURE_WRAP_S": "CLAMP_TO_EDGE"
...
});</pre>
<p>
可配置项有四个：
</p>
<ul>
<li>
1. TEXTURE_MAX_FILTER：放大方法
</li>
<li>
2. TEXTURE_MIN_FILTER：缩小方法
</li>
<li>
3. TEXTURE_WRAP_S：水平填充方法
</li>
<li>
4. TEXTURE_WRAP_T：垂直填充方法
</li>
</ul>
<p>
上面的例子配置了水平填充方法，有点类似css中设置背景图片的填充方法。返回textureObj。
</p>
<h4>
链接资源图片
</h4>
<pre class='prettyprint lang-js'>textureObj.use(level, format, textureType, image);</pre>
<ul>
<li>
1.level：默认传入0即可，和金字塔纹理有关；
</li>
<li>
2.format：表示图像的内部格式；
<ul>
<li>
gl.RGB(红绿蓝)
</li>
<li>
gl.RGBA(红绿蓝透明度)
</li>
<li>
gl.ALPHA(0.0,0.0,0.0,透明度)
</li>
<li>
gl.LUMINANCE(L、L、L、1L:流明)
</li>
<li>
gl.LUMINANCE_ALPHA(L、L、L,透明度)
</li>
</ul>
</li>
<li>
3.textureType：表示纹理数据的格式；
<ul>
<li>
gl.UNSIGNED_BYTE: 表示无符号整形，每一个颜色分量占据1字节
</li>
<li>
gl.UNSIGNED_SHORT_5_6_5: 表示RGB，每一个分量分别占据占据5, 6, 5比特
</li>
<li>
gl.UNSIGNED_SHORT_4_4_4_4: 表示RGBA，每一个分量分别占据占据4, 4, 4, 4比特
</li>
<li>
gl.UNSIGNED_SHORT_5_5_5_1: 表示RGBA，每一个分量分别占据占据5比特，A分量占据1比特
</li>
</ul>
</li>
<li>
4.image：表示贴图的图片（比如new Image()）。
</li>
</ul>
<p class='warn'>
需要明白的是，到这一步为止，我们也只是把0号纹理和具体的图片联系起来了，具体使用的时候，还是看片元着色器。
</p>
<h4>
删除纹理
</h4>
<pre class='prettyprint lang-js'>textureObj.close();</pre>
<p class='warn'>
删除纹理必须在使用结束后（相关绘图结束）。返回gl。
</p>
<h2>
片元中使用纹理
</h2>
<pre class='prettyprint lang-js'>precision mediump float;
varying vec2 v_textcoord;
void main(){
gl_FragColor=texture2D(0, v_textcoord);
}</pre>
<p>
texture2D是GLES内置的方法，此处表示从0号（由第一个参数0指定）纹理获取v_textcoord指定的纹理坐标处的像素颜色。
</p>
<p>
v_textcoord是什么意思？就是webgl坐标对应的图片坐标，举个例子：
</p>
<pre class='prettyprint lang-js'>var data = new Float32Array([
// 顶点坐标2，纹理坐标2
-1.0, 0.707, 0.0, 0.0,
-1.0, -0.707, 0.0, 1.0,
1.0, 0.707, 1.0, 0.0,
1.0, -0.707, 1.0, 1.0
]);</pre>
<p>
现在绘制一个矩形，四个点（顶点坐标）确定图形，这个矩形用图片（也就是纹理）填充颜色。
</p>
<p>
对于顶点(-1.0, 0.707)对应图片上的点(0.0, 0.0)，四个点，就明确了所有点的对应方法。
</p>
</body>
</html>