如何在WebGL中使用大量纹理进行计算
仅关注单个顶点/片段着色器对的一致性/属性/变化，我想知道如何使用。关注2D 位置：当前对象的位置。 翻译：基于预先的一些CPU计算提出的对象。 速度：物体的速度。 旋转：下一个旋转的对象。 重力或碰撞等力：物体在每个方向上作用的合力。 温度：对象的温度。 质量/密度：对象的质量/密度。 曲率：沿预定义曲线移动，如缓和。 起初我想这样做：如何在WebGL中使用大量纹理进行计算,webgl,gpu,textures,shader,Webgl,Gpu,Textures,Shader,仅关注单个顶点/片段着色器对的一致性/属性/变化，我想知道如何使用。关注2D 位置：当前对象的位置。 翻译：基于预先的一些CPU计算提出的对象。 速度：物体的速度。 旋转：下一个旋转的对象。 重力或碰撞等力：物体在每个方向上作用的合力。 温度：对象的温度。 质量/密度：对象的质量/密度。 曲率：沿预定义曲线移动，如缓和。 起初我想这样做： attribute vec3 a_position; attribute vec3 a_translation; attribute vec3 a_veloc
attribute vec3 a_position;
attribute vec3 a_translation;
attribute vec3 a_velocity;
attribute vec3 a_rotation;
attribute vec3 a_force;
attribute vec3 a_temperature;
attribute vec3 a_material; // mass and density
attribute vec4 a_color;
attribute vec4 a_curvature;
attribute vec2 a_position_uv;
attribute vec2 a_translation_uv;
attribute vec2 a_velocity_uv;
attribute vec2 a_rotation_uv;
attribute vec2 a_force_uv;
attribute vec2 a_temperature_uv;
attribute vec2 a_material_uv;
attribute vec2 a_color_uv;
attribute vec2 a_curvature_uv;
uniform sampler2D u_position_texture;
uniform sampler2D u_translation_texture;
uniform sampler2D u_velocity_texture;
uniform sampler2D u_rotation_texture;
uniform sampler2D u_force_texture;
uniform sampler2D u_temperature_texture;
uniform sampler2D u_material_texture;
uniform sampler2D u_color_texture;
uniform sampler2D u_curvature_texture;
void main() {
vec4 position = texture2D(u_position_texture, a_position_uv);
vec4 translation = texture2D(u_translation_texture, a_translation_uv);
// ...
gl_Position = position * ...
}
attribute vec2 a_position_uv;
attribute vec2 a_translation_uv;
attribute vec2 a_velocity_uv;
attribute vec2 a_rotation_uv;
attribute vec2 a_force_uv;
attribute vec2 a_temperature_uv;
attribute vec2 a_material_uv;
attribute vec2 a_color_uv;
attribute vec2 a_curvature_uv;
uniform sampler2D u_position_texture;
uniform sampler2D u_translation_texture;
uniform sampler2D u_velocity_texture;
uniform sampler2D u_rotation_texture;
uniform sampler2D u_force_texture;
uniform sampler2D u_temperature_texture;
uniform sampler2D u_material_texture;
uniform sampler2D u_color_texture;
uniform sampler2D u_curvature_texture;
void main() {
vec4 position = texture2D(u_position_texture, a_position_uv);
vec4 translation = texture2D(u_translation_texture, a_translation_uv);
// ...
gl_Position = position * ...
}
uniform sampler2D u_position_texture;
uniform sampler2D u_translation_texture;
uniform sampler2D u_velocity_texture;
uniform sampler2D u_rotation_texture;
uniform sampler2D u_force_texture;
uniform sampler2D u_temperature_texture;
uniform sampler2D u_material_texture;
uniform sampler2D u_color_texture;
uniform sampler2D u_curvature_texture;
varying vec2 v_foo
varying vec2 v_bar
void main() {
// ...
gl_Color = position * ... * v_foo * v_bar
}
<>你链接的问题不是太多的属性，而是太多的变量，它不仅与大多数平台上支持的纹理单元的最大数量相仿，而且假设你不需要将所有数据从顶点转移到片段着色器就应该是很好的。如果你不做任何更大的批量，你可以先用制服。也就是说，如果你出于任何原因决定使用纹理，你可能只会使用一个UV坐标并对齐所有数据纹理，否则你真的会无缘无故地将带宽需求增加了一倍
这样，您的数据集本身就可以被压缩很多。您可以将位置和旋转存储为四元数在2D中您甚至可以使用带有x、y、α的vec3原始数据集中缺少的速度和扭矩实际上只是当前位置和下一个位置的增量，因此您只需存储其中一个设置速度/扭矩或下一个位置/旋转，力似乎不相关，因为你会在CPU上应用它们，质量和温度是标量值，所以它们完全适合于一个vec2和一些其他jazz。但是我越是试图理解它，这看起来就越不成熟，你不能在GPU上真正进行模拟，但是你的一半属性是渲染不需要的模拟属性，感觉你过早地优化了一些甚至还不接近现有的东西，所以建议你：构建它，然后看看 >你链接的问题不是太多的属性，而是太多的变量，它不仅与大多数平台上支持的纹理单元的最大数量相仿，而且应该假设你不需要将所有数据从顶点转移到片段着色器。如果你不做任何更大的批量，你可以先用制服。也就是说，如果你出于任何原因决定使用纹理，你可能只会使用一个UV坐标并对齐所有数据纹理，否则你真的会无缘无故地将带宽需求增加了一倍
这样，您的数据集本身就可以被压缩很多。您可以将位置和旋转存储为四元数在2D中您甚至可以使用带有x、y、α的vec3原始数据集中缺少的速度和扭矩实际上只是当前位置和下一个位置的增量，因此您只需存储其中一个设置速度/扭矩或下一个位置/旋转，力似乎不相关，因为你会在CPU上应用它们，质量和温度是标量值，所以它们完全适合于一个vec2和一些其他jazz。但是我越是试图理解它，这看起来就越不成熟，你不能在GPU上真正进行模拟，但是你的一半属性是渲染不需要的模拟属性，感觉你过早地优化了一些甚至还不接近现有的东西，所以建议你：构建它，然后看看 LJ的答案可以说是正确的，但是如果你想在纹理中存储数据，你所需要的只是每个顶点的索引
attribute float index;
然后从中计算UV坐标
uniform vec2 textureSize; // size of texture
float numVec4sPerElement = 8.;
float elementsPerRow = floor(textureSize.x / numVec4sPerElement);
float tx = mod(index, elementsPerRow) * numVec4sPerElement;
float ty = floor(index / elementsPerRow);
vec2 baseTexel = vec2(tx, ty) + 0.5;
position0, translation0, velocity0, rotation0, forces0, ....
position1, translation1, velocity1, rotation1, forces1, ....
position2, translation2, velocity2, rotation2, forces2, ....
position2, translation3, velocity3, rotation3, forces3, ....
attribute float index;
然后从中计算UV坐标
uniform vec2 textureSize; // size of texture
float numVec4sPerElement = 8.;
float elementsPerRow = floor(textureSize.x / numVec4sPerElement);
float tx = mod(index, elementsPerRow) * numVec4sPerElement;
float ty = floor(index / elementsPerRow);
vec2 baseTexel = vec2(tx, ty) + 0.5;
vec4 position = texture2D(dataTexture, baseTexel / textureSize);
vec4 translation = texture2D(dataTexture, (baseTexel + vec2(1,0)) / textureSize);
vec4 velocity = texture2D(dataTexture, (baseTexel + vec2(2,0)) / textureSize);
vec4 rotation = texture2D(dataTexture, (baseTexel + vec2(3,0)) / textureSize);
vec4 forces = texture2D(dataTexture, (baseTexel + vec2(4,0)) / textureSize);
position0, translation0, velocity0, rotation0, forces0, ....
position1, translation1, velocity1, rotation1, forces1, ....
position2, translation2, velocity2, rotation2, forces2, ....
position2, translation3, velocity3, rotation3, forces3, ....