当形状的 uv 坐标超出纹理时,改变纹理的行为方式。
为了使 texture() 正常工作,一个形状需要一种将其表面上的点映射到图像中的像素的方法。内置的形状,如 rect() 和 box(),已经根据它们的顶点具有了这些纹理映射。使用 vertex() 创建的自定义形状需要将纹理映射传递为 uv 坐标。
每次调用 vertex() 都必须包括 5 个参数,如 vertex(x, y, z, u, v)
,以将坐标 (x, y, z)
处的顶点映射到图像中坐标 (u, v)
的像素。例如,矩形图像的角落默认映射到矩形的角落:
// 应用图像作为纹理。 texture(img); <p>// 绘制矩形。 rect(0, 0, 30, 50); </p>
如果上面代码片段中的图像尺寸为 300 x 500 像素,则可以通过以下方式获得相同的结果:
// 应用图像作为纹理。 texture(img); <p>// 绘制矩形。 beginShape();</p> <p>// 左上角。 // u: 0, v: 0 vertex(0, 0, 0, 0, 0);</p> <p>// 右上角。 // u: 300, v: 0 vertex(30, 0, 0, 300, 0);</p> <p>// 右下角。 // u: 300, v: 500 vertex(30, 50, 0, 300, 500);</p> <p>// 左下角。 // u: 0, v: 500 vertex(0, 50, 0, 0, 500);</p> <p>endShape(); </p>
textureWrap()
控制纹理在其 uv 坐标超出纹理时的行为。这样做可以产生有趣的视觉效果,如平铺。例如,上面的自定义形状可能具有超出图像宽度的 u 坐标:
// 应用图像作为纹理。 texture(img); <p>// 绘制矩形。 beginShape(); vertex(0, 0, 0, 0, 0);</p> <p>// 右上角。 // u: 600 vertex(30, 0, 0, 600, 0);</p> <p>// 右下角。 // u: 600 vertex(30, 50, 0, 600, 500);</p> <p>vertex(0, 50, 0, 0, 500); endShape(); </p>
600 的 u 坐标大于 300 的纹理图像宽度,这就带来了一些有趣的可能性。
第一个参数 wrapX
接受三种可能的常量。如果传递 CLAMP
,如 textureWrap(CLAMP)
中所示,则纹理边缘的像素将延伸到形状的边缘。如果传递 REPEAT
,如 textureWrap(REPEAT)
中所示,则纹理将重复平铺直到达到形状的边缘。如果传递 MIRROR
,如 textureWrap(MIRROR)
中所示,则纹理将重复平铺直到达到形状的边缘,同时在平铺之间翻转其方向。默认情况下,纹理使用 CLAMP
模式。
第二个参数 wrapY
是可选的。它接受相同的三个常量:CLAMP
、REPEAT
和 MIRROR
。如果传递了其中一个常量,如 textureWRAP(MIRROR, REPEAT)
,那么纹理将在水平方向上 MIRROR
,在垂直方向上 REPEAT
。默认情况下,wrapY
将被设置为与 wrapX
相同的值。
注意:textureWrap()
只能在 WebGL 模式下使用。
示例
语法
textureWrap(wrapX, [wrapY])
参数
可以是 CLAMP、REPEAT 或 MIRROR
可以是 CLAMP、REPEAT 或 MIRROR
相关参考
ambientMaterial
设置形状表面材质的环境颜色。 ambientMaterial() 颜色设置形状将反射的 ambientLight() 颜色的组件。例如,调用 ambientMaterial(255, 255, 0) 将使形状反射红色和绿色光,但不反射蓝色光。 ambientMaterial() 可以通过不同的参数以三种方式调用来设置材质的颜色。 第一种调用 ambientMaterial() 的方式有一个参数 gray。可以传递介于 0 和 255 之间的灰度值,如 ambientMaterial(50),来设置材质的颜色。较高的灰度值会使形状看起来更亮。 第二种调用 ambientMaterial() 的方式有一个参数 color。可以传递一个 p5.Color 对象、一个颜色值数组或一个 CSS 颜色字符串,如 ambientMaterial('magenta'),来设置材质的颜色。 第三种调用 ambientMaterial() 的方式有三个参数 v1、v2 和 v3。可以传递 RGB、HSB 或 HSL 值,如 ambientMaterial(255, 0, 0),来设置材质的颜色。颜色值将根据当前的 colorMode() 进行解释。 注意:ambientMaterial() 只能在 WebGL 模式下使用。 .
createFilterShader
创建一个 p5.Shader 对象,与 filter() 函数。 createFilterShader() 的工作方式与 createShader() 类似,但包含默认的顶点着色器。 createFilterShader() 旨在与 filter() 一起使用来为画布的内容添加滤镜。 滤镜着色器将应用于整个画布,而不仅仅是 p5.Geometry 对象。 参数 fragSrc 设置片段着色器。 它是一个字符串,包含编写的片段着色器程序 GLSL。 创建的 p5.Shader 对象有一些可以设置的 uniform: sampler2D tex0,其中包含作为纹理的画布内容。 vec2 canvasSize,即画布的宽度和高度,不包括像素密度。 vec2 texelSize,这是物理像素的大小,包括像素密度。 像素宽度的计算方式为 1.0 / (width * Density),像素高度的计算方式为 1.0 / (height * density)。 创建的 p5.Shader 还提供了 varyingvec2 vTexCoord,这是一个值介于 0 和 1 vTexCoord 之间的坐标,描绘像素在画布上绘制的位置。 有关滤镜和着色器的更多信息,请参阅 Adam Ferriss 的 repo of shader examples 或 Introduction to Shaders 教程。 .
createShader
创建一个新的 p5.Shader 对象。 着色器是在图形处理单元 (GPU) 上运行的程序。 它们可以同时处理许多像素,从而可以快速执行许多图形任务。 它们是用 GLSL 语言编写的,并于绘图中运行其余代码。 一旦创建了 p5.Shader 对象,它就可以与 一起使用 Shader() 函数,如 shader(myShader) 中。 着色器程序由两部分组成,顶点着色器和片段着色器。 顶点着色器影响 3D 几何体在屏幕上绘制的位置,而片段着色器则影响颜色。 第一个参数 vertSrc 设置顶点着色器。 它是一个字符串,包含用 GLSL 编写的顶点着色器程序。 第二个参数,fragSrc,设置片段着色器。 它是一个字符串,包含用 GLSL 编写的片段着色器程序。 注意:2D 模式下只能使用滤镜着色器。 而所有着色器都可以在 WebGL 模式下使用。 .
emissiveMaterial
设置形状表面材质的自发光颜色。 emissiveMaterial() 颜色设置形状以全强度显示的颜色,不受光照影响。这可以使形状看起来发光。但是,自发光材质实际上并不会发出能够影响周围物体的光。 emissiveMaterial() 可以通过不同的参数以三种方式调用来设置材质的颜色。 第一种调用 emissiveMaterial() 的方式有一个参数 gray。可以传递介于 0 和 255 之间的灰度值,如 emissiveMaterial(50),来设置材质的颜色。较高的灰度值会使形状看起来更亮。 第二种调用 emissiveMaterial() 的方式有一个参数 color。可以传递一个 p5.Color 对象、一个颜色值数组或一个 CSS 颜色字符串,如 emissiveMaterial('magenta'),来设置材质的颜色。 第三种调用 emissiveMaterial() 的方式有四个参数,v1、v2、v3 和 alpha。 alpha 是可选的。RGBA、HSBA 或 HSLA值可以传递来设置材质的颜色,例如 emissiveMaterial(255, 0, 0) 或 emissiveMaterial(255, 0, 0, 30)。颜色值将根据当前的 colorMode()进行解释。 注意:emissiveMaterial() 只能在 WebGL 模式下使用。 .