jjzjj

javascript - 从着色器读取数据

coder 2024-07-21 原文

我正在尝试学习如何利用threepu和webgl东西的gpu可能性，因此我只是分析代码以获取一些模式，方法来完成事情，并且需要一些代码说明。

我发现了以下示例:One million particles，这似乎是最简单的示例，涉及在着色器中进行的计算并吐出。

因此，根据我的发现:
-粒子速度和位置的数据保存在传递给着色器的纹理中，以在那里进行计算，并取回它们以进行更新

  • 粒子是在平面上随机创建的，但不超过纹理大小？

    for (var i = 0; i < 1000000; i++) {

    particles.vertices.push(new THREE.Vector3((i % texSize)/texSize,

    Math.floor(i/texSize)/texSize , 0)) ; }

  • 我看不到任何粒子位置更新吗？如何从着色器检索数据并更新每个粒子？

    挑选()
    仅通过鼠标位置来计算粒子运动的方向？
  • 为什么会有2个缓冲区？和8个(4对片段和矢量)着色器？仅用于计算速度和位置的一个还不够吗？
  • 着色器如何更新纹理？我只是看书而不是写东西？

    • 预先感谢您的任何解释!

    最佳答案

    他们到底是怎么做到的:

    在这篇文章中，我将解释如何几乎完全通过WebGL/Three.js在gpu上计算此结果-当我使用Intel i7 4770k的集成显卡时，可能看起来有些草率:



    介绍:

    将所有内容保持在内部gpu的简单想法:每个粒子的状态将由一个纹理像素颜色值表示。一百万个粒子将产生1024x1024像素的纹理，一个保持当前位置，另一个保持这些粒子的速度。

    从来没有人禁止滥用纹理的RGB颜色值获取完全不同的0 ... 255 Universe数据。对于要保存在GPU内存中的任何内容，基本上每个纹理像素都有32位(R + G + B + alpha)。 (如果一个人需要为每个粒子/对象存储更多数据，甚至可以使用多个纹理像素)。

    他们基本上按顺序使用了多个着色器。从源代码中，可以确定其处理流程的以下步骤:

  • 随机化粒子(此答案中忽略)('randShader')
  • 通过与鼠标位置的距离确定每个粒子的速度('velShader')
  • 基于速度，相应地移动每个粒子('posShader')
  • 显示屏幕('dispShader')**

    • 。

    步骤2:确定每个粒子的速度:

    他们在100万个点上调用绘制过程，其输出将另存为纹理。在顶点着色器中，每个片段都会获得2个额外的变量，称为“vUv” ，它们基本上确定了过程中使用的纹理内的x和y像素位置。

    下一步是其片段着色器，因为只有该着色器可以输出(作为RGB值进入帧缓冲区，然后将其转换为纹理缓冲区-全部发生在gpu内存中)。您可以在id="velFrag"片段着色器中看到，它获得了一个名为uniform vec3 targetPos;的输入变量。从CPU的每个帧中便宜地设置这些制服，因为它们在所有实例之间共享，并且不涉及大量的内存传输。 (包含鼠标坐标，可能在-1.00f到+ 1.00f的Universe中-它们可能还每隔FEW帧更新一次鼠标坐标，以降低cpu的使用率)。

    这里发生了什么？好吧，该着色器会计算该粒子到鼠标坐标的距离，并取决于它更改粒子速度的速度-该速度还保存有关粒子飞行方向的信息。注意:根据灰度值，此速度步长还会使粒子获得动量并保持飞行/越过鼠标的位置。

    。

    步骤3:更新每个粒子的位置:

    到目前为止，每个粒子都有一个速度和一个先前的位置。这两个值将被处理到一个新位置，再次作为纹理输出-这次进入positionTexture。直到渲染整个帧(放入默认帧缓冲区)，然后将其标记为新纹理，旧的positionTexture保持不变，并且可以轻松读取:

    在id="posFrag"片段着色器中，它们从两个纹理(posTexture和velTexture)中读取并将该数据处理到新位置。它们将x和y位置坐标输出为该纹理的颜色(作为红色和绿色值)。

    。

    步骤4:黄金时间(=输出)

    为了输出结果，他们可能又需要一百万个点/顶点并将其positionTexture作为输入。然后，顶点着色器通过读取x，y位置处的纹理的RGB值(作为顶点属性传递)来设置每个点的位置。
    // From <script type="x-shader/x-vertex" id="dispVert">
vec3 mvPosition = texture2D(posTex, vec2(x, y)).rgb;
gl_PointSize = 1.0;
gl_Position = projectionMatrix * modelViewMatrix * vec4(mvPosition,1.0);

    在显示片段着色器中，他们只需要设置一种颜色(请注意较低的alpha值，它可以堆叠20个粒子以完全点亮一个像素)。
    // From <script type="x-shader/x-fragment" id="dispFrag">
gl_FragColor = vec4(vec3(0.5, 1.0, 0.1), 0.05);

    。

    我希望这可以清楚地演示此小演示的工作原理:-)不过，我不是该演示的作者。刚刚注意到，这个答案实际上变成了一个 super 骗子的详细说明-通过“thick”关键字获得简短版本。

    关于javascript - 从着色器读取数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22940678/

    javascript从brstrongcodecanvasthree.jsshader

    有关javascript - 从着色器读取数据的更多相关文章

    1. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

      我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

    2. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

      我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

    3. Ruby 写入和读取对象到文件 - 2

      好的，所以我的目标是轻松地将一些数据保存到磁盘以备后用。您如何简单地写入然后读取一个对象？所以如果我有一个简单的类classCattr_accessor:a,:bdefinitialize(a,b)@a,@b=a,bendend所以如果我从中非常快地制作一个objobj=C.new("foo","bar")#justgaveitsomerandomvalues然后我可以把它变成一个kindaidstring=obj.to_s#whichreturns""我终于可以将此字符串打印到文件或其他内容中。我的问题是，我该如何再次将这个id变回一个对象？我知道我可以自己挑选信息并制作一个接受该信

    4. ruby - Ruby 有 `Pair` 数据类型吗？ - 2

      有时我需要处理键/值数据。我不喜欢使用数组，因为它们在大小上没有限制(很容易不小心添加超过2个项目，而且您最终需要稍后验证大小)。此外，0和1的索引变成了魔数(MagicNumber)，并且在传达含义方面做得很差(“当我说0时，我的意思是head...”)。散列也不合适，因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题，但我很想知道:Ruby标准库是否已经带有这样一个类？ 最佳

    5. ruby - 我如何添加二进制数据来遏制 POST - 2

      我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

    6. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

      无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

    7. FOHEART H1数据手套驱动Optitrack光学动捕双手运动(Unity3D) - 2

      本教程将在Unity3D中混合Optitrack与数据手套的数据流，在人体运动的基础上，添加双手手指部分的运动。双手手背的角度仍由Optitrack提供，数据手套提供双手手指的角度。 01  客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照：https://gitee.com/foheart_1/foheart-h1-data-summary.git02  数据转发打开MotiveBody软件的Streaming，开始向Unity3D广播数据；MotionVenus中设置->选项选择Unit

    8. 使用canal同步MySQL数据到ES - 2

      文章目录一、概述简介原理模块二、配置Mysql使用版本环境要求1.操作系统2.mysql要求三、配置canal-server离线下载在线下载上传解压修改配置单机配置集群配置分库分表配置1.修改全局配置2.实例配置垂直分库水平分库3.修改group-instance.xml4.启动监听四、配置canal-adapter1修改启动配置2配置映射文件3启动ES数据同步查询所有订阅同步数据同步开关启动4.验证五、配置canal-admin一、概述简介canal是Alibaba旗下的一款开源项目，Java开发。基于数据库增量日志解析，提供增量数据订阅&消费。Git地址：https://github.co

    9. python - 如何读取 MIDI 文件、更改其乐器并将其写回？ - 2

      我想解析一个已经存在的.mid文件，改变它的乐器，例如从“acousticgrandpiano”到“violin”，然后将它保存回去或作为另一个.mid文件。根据我在文档中看到的内容，该乐器通过program_change或patch_change指令进行了更改，但我找不到任何在已经存在的MIDI文件中执行此操作的库.他们似乎都只支持从头开始创建的MIDI文件。 最佳答案 MIDIpackage会为您完成此操作，但具体方法取决于midi文件的原始内容。一个MIDI文件由一个或多个音轨组成，每个音轨是十六个channel中任何一个上的

    10. ruby-on-rails - 创建 ruby​​ 数据库时惰性符号绑定(bind)失败 - 2

      我正在尝试在Rails上安装ruby​​，到目前为止一切都已安装，但是当我尝试使用rakedb:create创建数据库时，我收到一个奇怪的错误:dyld:lazysymbolbindingfailed:Symbolnotfound:_mysql_get_client_infoReferencedfrom:/Library/Ruby/Gems/1.8/gems/mysql2-0.3.11/lib/mysql2/mysql2.bundleExpectedin:flatnamespacedyld:Symbolnotfound:_mysql_get_client_infoReferencedf

    随机推荐