草庐IT

纹理表

全部标签

javascript - WebGL:有没有一种有效的方法可以只上传图像/ Canvas 的一部分作为纹理?

我正在开发一个基于2D图层的应用程序,我想使用WebGL进行合成。这些层可能会相对于彼此移动,并且每个帧只有每个层的一小部分(矩形)可能会发生变化。但是,该矩形部分的宽度和高度可能会发生不可预测的变化。我想每层使用一个Canvas(2D)和一个纹理,并且每个Canvas上的每一帧仅重绘已修改的图层部分,然后只需将该小区域上传到GPU以将相应部分更新为纹理,在GPU为我进行合成之前。但是我还没有找到一种有效的方法来将图像的一部分上传到纹理的一部分。似乎texSubImage2D()可以更新纹理的一部分,但只需要完整的图像/Canvas,而且似乎无法指定矩形区域要使用的图像。我已经想到了几

使用纹理(Textures)

        当物体表面并非是纯色的时候,比如带波点,斑纹或者表面有刮痕或被裂纹等,这些效果该如何实现呢?        这里我们需要提到一个概念是贴图(Maps)。Maps是覆盖在游戏物体上的2D图片,用来设置表面的颜色、specularity或metalness、物理纹理或其他相关属性。包含maps的图片文件称为纹理(Textures)。纹理是什么        纹理(Textures)可以看做是普通的图像文件,比如BMP,TIF,PNG和JPG。图像文件中的数据通过通道(channels)进行组织。黑白图像(也称为灰度度,grayscaleimage)只有一个通道来表示每个像素的灰度值

html - 使用 Three.js 进行纹理喷溅

纹理飞溅是否适用于Three.js或其他Javascript3D渲染框架?如果是的话,我想看看例子,甚至可能是关于大地形的教程。如果它不起作用,是否有任何其他方法绘制大地形图?谢谢。 最佳答案 接受挑战!首先,您可以编写一个顶点着色器,它采用灰度图像并将其用作高度图,并包含一个可变float(下面称为vAmount)以传递给片段着色器以确定纹理(s)在该点显示(混合)。uniformsampler2DbumpTexture;uniformfloatbumpScale;varyingfloatvAmount;varyingvec2vU

html - 使用 Three.js 进行纹理喷溅

纹理飞溅是否适用于Three.js或其他Javascript3D渲染框架?如果是的话,我想看看例子,甚至可能是关于大地形的教程。如果它不起作用,是否有任何其他方法绘制大地形图?谢谢。 最佳答案 接受挑战!首先,您可以编写一个顶点着色器,它采用灰度图像并将其用作高度图,并包含一个可变float(下面称为vAmount)以传递给片段着色器以确定纹理(s)在该点显示(混合)。uniformsampler2DbumpTexture;uniformfloatbumpScale;varyingfloatvAmount;varyingvec2vU

html - WebGL - 等待纹理加载

如何测试WebGLTexture对象是否“完整”?目前我收到这条消息:[WebGLRenderingContext]渲染警告:绑定(bind)到纹理单元0的纹理不可渲染。它可能不是2的幂并且具有不兼容的纹理过滤或者不是“纹理完整”我收到此警告是因为渲染循环试图在其图像加载完成之前使用纹理,那么如何解决这个问题? 最佳答案 解决这个问题的最简单方法是在创建时制作一个1x1纹理。vartex=gl.createTexture();gl.bindTexture(gl.TEXTURE_2D,tex);gl.texImage2D(gl.TEX

html - WebGL - 等待纹理加载

如何测试WebGLTexture对象是否“完整”?目前我收到这条消息:[WebGLRenderingContext]渲染警告:绑定(bind)到纹理单元0的纹理不可渲染。它可能不是2的幂并且具有不兼容的纹理过滤或者不是“纹理完整”我收到此警告是因为渲染循环试图在其图像加载完成之前使用纹理,那么如何解决这个问题? 最佳答案 解决这个问题的最简单方法是在创建时制作一个1x1纹理。vartex=gl.createTexture();gl.bindTexture(gl.TEXTURE_2D,tex);gl.texImage2D(gl.TEX

javascript - WebGL 创建纹理

我成功地从图像创建了WebGL纹理并将其绘制到Canvas元素中。functioninitTexture(src){texture=gl.createTexture();texture.image=newImage();texture.image.onload=function(){handleLoadedTexture(texture)}texture.image.src=src;}我还尝试从其中一种数据类型创建纹理,但没有成功。[对象图像数据][对象CanvasPixelArray][对象CanvasRenderingContext2D]是否可以仅使用图像的像素阵列创建纹理?或者换

javascript - WebGL 创建纹理

我成功地从图像创建了WebGL纹理并将其绘制到Canvas元素中。functioninitTexture(src){texture=gl.createTexture();texture.image=newImage();texture.image.onload=function(){handleLoadedTexture(texture)}texture.image.src=src;}我还尝试从其中一种数据类型创建纹理,但没有成功。[对象图像数据][对象CanvasPixelArray][对象CanvasRenderingContext2D]是否可以仅使用图像的像素阵列创建纹理?或者换

ios - 在 OpenGL ES 中绘制一个非常高分辨率的纹理对象(球体)

我在OpenGLES中绘制行星,遇到了一些有趣的性能问题。普遍的问题是:如何最好地在球体上渲染“非常详细”的纹理?(球体是有保证的;我对球体特定的优化很感兴趣)基本案例:窗口大约是。2048x1536(例如iPad3)地球的纹理贴图为24,000x12,000像素(美国一半大小的区域适合整个屏幕宽度)Globe显示在从放大(美国全屏)到缩小(整个地球可见)的所有位置我至少需要3个纹理层(1个用于行星表面,1个用于昼夜差异,1个用于用户界面(突出显示不同区域)一些图层是动画的(即它们必须在运行时快速加载和删除它们的纹理)限制:高端平板电脑仅限于4096x4096纹理高端平板电脑限制为8个

ios - 在 OpenGL ES 中绘制一个非常高分辨率的纹理对象(球体)

我在OpenGLES中绘制行星,遇到了一些有趣的性能问题。普遍的问题是:如何最好地在球体上渲染“非常详细”的纹理?(球体是有保证的;我对球体特定的优化很感兴趣)基本案例:窗口大约是。2048x1536(例如iPad3)地球的纹理贴图为24,000x12,000像素(美国一半大小的区域适合整个屏幕宽度)Globe显示在从放大(美国全屏)到缩小(整个地球可见)的所有位置我至少需要3个纹理层(1个用于行星表面,1个用于昼夜差异,1个用于用户界面(突出显示不同区域)一些图层是动画的(即它们必须在运行时快速加载和删除它们的纹理)限制:高端平板电脑仅限于4096x4096纹理高端平板电脑限制为8个