- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在学习 OpenGL 并尝试在我的应用程序中实现一些粒子。
为此,我学习了一些类(class)。
但是当我尝试渲染我的粒子时,没有任何反应,它甚至没有进入着色器(我试图在其中放置一些无限循环但没有任何反应)。我尝试了很多东西,也许有些东西我不明白..
我创建了一个类 Particle,带有一个构造函数、一个更新和一个绘制方法,我遵循了类(class)的每一步,并将其调整到我的类(class)中(类(class)在主循环中执行所有操作)。
我的粒子类有一些私有(private)成员:
private:
size_t maxSize_;
std::vector<float> quadData_;
unsigned int dataVbo_;
std::vector<float> posData_;
unsigned int posVbo_;
std::vector<float> colorData_;
unsigned int colorVbo_;
std::list<Particle> allParticles_;
这里是Particles
的初始化:
Particles::Particles(size_t maxSize)
: maxSize_(maxSize), quadData_({-0.5f, -0.5f, 0.0f, 0.5f, -0.5f, 0.0f, -0.5f, 0.5f, 0.0f, 0.5f, 0.5f, 0.0f})
{
posData_.resize(maxSize_*4);
colorData_.resize(maxSize_*4);
glGenBuffers(1, &dataVbo_);
glBindBuffer(GL_ARRAY_BUFFER, dataVbo_);
glBufferData(GL_ARRAY_BUFFER, quadData_.size() * sizeof(float), quadData_.data(), GL_STATIC_DRAW);
// The VBO containing the positions and sizes of the particles
glGenBuffers(1, &posVbo_);
glBindBuffer(GL_ARRAY_BUFFER, posVbo_);
// Initialize with empty (NULL) buffer : it will be updated later, each frame.
glBufferData(GL_ARRAY_BUFFER, maxSize_ * 4 * sizeof(float), NULL, GL_STREAM_DRAW);
// The VBO containing the colors of the particles
glGenBuffers(1, &colorVbo_);
glBindBuffer(GL_ARRAY_BUFFER, colorVbo_);
// Initialize with empty (NULL) buffer : it will be updated later, each frame.
glBufferData(GL_ARRAY_BUFFER, maxSize_ * 4 * sizeof(float), NULL, GL_STREAM_DRAW);
}
和抽签:
void Particles::draw(){
size_t count(posData_.size());
glBindBuffer(GL_ARRAY_BUFFER, posVbo_);
glBufferData(GL_ARRAY_BUFFER, maxSize_ * 4 * sizeof(float), NULL, GL_STREAM_DRAW); // Buffer orphaning, a common way to improve streaming perf. See above link for details.
glBufferSubData(GL_ARRAY_BUFFER, 0, count * sizeof(float), posData_.data());
glBindBuffer(GL_ARRAY_BUFFER, colorVbo_);
glBufferData(GL_ARRAY_BUFFER, maxSize_ * 4 * sizeof(float), NULL, GL_STREAM_DRAW); // Buffer orphaning, a common way to improve streaming perf. See above link for details.
glBufferSubData(GL_ARRAY_BUFFER, 0, count * sizeof(float) * 4, colorData_.data());
glEnableVertexAttribArray(0);
glBindBuffer(GL_ARRAY_BUFFER, dataVbo_);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, (void*) 0);
// 2nd attribute buffer : positions of particles' centers
glEnableVertexAttribArray(1);
glBindBuffer(GL_ARRAY_BUFFER, posVbo_);
glVertexAttribPointer(1, 4, GL_FLOAT, GL_FALSE, 0, (void*) 0);
// 3rd attribute buffer : particles' colors
glEnableVertexAttribArray(2);
glBindBuffer(GL_ARRAY_BUFFER, colorVbo_);
glVertexAttribPointer(2, 4, GL_FLOAT, GL_FALSE, 0, (void*) 0);
glVertexAttribDivisor(0, 0); // particles vertices : always reuse the same 4 vertices -> 0
glVertexAttribDivisor(1, 1); // positions : one per quad (its center) -> 1
glVertexAttribDivisor(2, 1); // color : one per quad -> 1
glDrawArraysInstanced(GL_TRIANGLE_STRIP, 0, 4, count);
glDisableVertexAttribArray(0);
glDisableVertexAttribArray(1);
glDisableVertexAttribArray(2);
}
在我的主循环中我这样做:
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
myParticules.update(elapsedTime);
glDisable(GL_DEPTH_TEST);
glUseProgram(_particleShad);
myParticles.draw();
我还会发送一些统一的 vec 和 mat,但没什么重要的。
在我的着色器中,我只尝试这样做:
Vertex :
gl_Position = vec4(squareVertices.xyz, 1);
//squareVertices contain the vertices of my square for my particles
Fragment :
color = vec4(1, 1, 1, 1);
我没有发现任何问题,我真的需要一些帮助,我完全迷路了。
最佳答案
您必须创建一个 VAO(顶点数组对象):
class Particles {
private:
// add:
GLuint vao;
...
初始化:
Particles::Particles(size_t maxSize)
: maxSize_(maxSize), quadData_({-0.5f, -0.5f, 0.0f, 0.5f, -0.5f, 0.0f, -0.5f, 0.5f, 0.0f, 0.5f, 0.5f, 0.0f})
{
posData_.resize(maxSize_*4);
colorData_.resize(maxSize_*4);
glGenVertexArrays(1, &vao);
glBindVertexArray(vao);
glGenBuffers(1, &dataVbo_);
glBindBuffer(GL_ARRAY_BUFFER, dataVbo_);
glBufferData(GL_ARRAY_BUFFER, quadData_.size() * sizeof(float), quadData_.data(), GL_STATIC_DRAW);
glEnableVertexAttribArray(0);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, (void*) 0);
// The VBO containing the positions and sizes of the particles
glGenBuffers(1, &posVbo_);
glBindBuffer(GL_ARRAY_BUFFER, posVbo_);
// Initialize with empty (NULL) buffer : it will be updated later, each frame.
glBufferData(GL_ARRAY_BUFFER, maxSize_ * 4 * sizeof(float), NULL, GL_STREAM_DRAW);
glEnableVertexAttribArray(1);
glVertexAttribPointer(1, 4, GL_FLOAT, GL_FALSE, 0, (void*) 0);
// The VBO containing the colors of the particles
glGenBuffers(1, &colorVbo_);
glBindBuffer(GL_ARRAY_BUFFER, colorVbo_);
// Initialize with empty (NULL) buffer : it will be updated later, each frame.
glBufferData(GL_ARRAY_BUFFER, maxSize_ * 4 * sizeof(float), NULL, GL_STREAM_DRAW);
glEnableVertexAttribArray(2);
glVertexAttribPointer(2, 4, GL_FLOAT, GL_FALSE, 0, (void*) 0);
glVertexAttribDivisor(0, 0); // particles vertices : always reuse the same 4 vertices -> 0
glVertexAttribDivisor(1, 1); // positions : one per quad (its center) -> 1
glVertexAttribDivisor(2, 1); // color : one per quad -> 1
}
绘图代码:
void Particles::draw(){
size_t count(posData_.size());
glBindBuffer(GL_ARRAY_BUFFER, posVbo_);
glBufferSubData(GL_ARRAY_BUFFER, 0, count * sizeof(float), posData_.data());
glBindBuffer(GL_ARRAY_BUFFER, colorVbo_);
glBufferSubData(GL_ARRAY_BUFFER, 0, count * sizeof(float) * 4, colorData_.data());
glBindVertexArray(vao);
glDrawArraysInstanced(GL_TRIANGLE_STRIP, 0, 4, count);
}
请注意在 draw()
调用期间您不需要更新 VAO 状态,只需在初始化期间。
关于c++ - Particle 和 OpenGL 的问题,没有绘制任何东西,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55775520/
我有一个 fork 的 Three.js codepen 实验,其中有方形颗粒漂浮在周围。 但我正在尝试修改它,以便我可以将文本(几何图形?)传递到其中,替换方形粒子,有点像单词/标签云。这可能吗?
Particles.js:为Web项目增添动态粒子效果 示例 介绍 Particles.js是一个轻量级的JavaScript库,用于在Web页面上创建和管理动态粒子效果。它允许开发者通
请帮忙。跟踪帧中对象的凝聚算法步骤是: 初始化一个点,在它周围随机选择N个点,设置权重为1/N。 根据动态模型(等速模型)传播点。 现在,使用观察模型计算每个粒子的权重。到现在为止,有N个粒子。 现在
我想在整个绿色区域的背景中获得粒子动画,但文本和图像被阻挡(参见 http://billiving-qa.azurewebsites.net)。动画仅出现在绿色区域的底部。 这是包装 div: 谢谢
为我完全缺乏 javascript 直觉而道歉,但我想知道是否可以更改 particles.js 的属性动态对象: 我正在使用 jQuery 来检测用户何时在屏幕上移动 slider (成功)。但是,
HTML 脚本 particlesJS.load('particles-js', 'particles.json', function(){ console.lo
拜托,我需要帮助... 我必须创建一个粒子 JS Canvas 。这并不难,但我必须像这样更改每行之间的背景颜色: 例子 我浏览了粒子 JS 提供的所有设置,但没有做我需要的事情......如果有人可
我在我的网站上实现 particles.js 时遇到问题。我收到错误:Uncaught ReferenceError: particlesJS is not defined。我尝试了下载网站上的演示,
我使用 particles.js 作为我的背景,但粒子只跨越到窗口的大小,并在向下滚动时消失。为了解决这个问题,我将 position: fixed; 添加到它的 css 选择器中。尽管粒子完全跨越了
我有一个 particles.js 文件作为我网站的背景,它显示正确但不与鼠标交互,它只设置为像视频一样。 非常感谢您。 更新:在下面的评论中解决。只需在您的 app.js 中更改“窗口”而不是“ C
我从 Envato 购买了模板“Penelope”,我想用 particles.js 背景更改背景。这是为我提供此模板的原始 CSS。我想知道如何更改它以放置 particles.js 背景。 我的r
我做不到particles.js作为背景工作。它覆盖了整个页面,我尝试为我想要覆盖 particles.js 的所有内容设置更高的 z-index (50)。这是 particles codepen
我终于让 particle.js 作为背景工作了。 但是当您点击文本上方或下方(高度方向)时,您只能生成星星,您不能在文本所在的位置(或与其容器在同一行)生成它们。 有办法解决这个问题吗? 我的 HT
我想知道如何在单个页面中多次添加多个 particles.js?似乎每页只能执行一次。但我想不止一次使用它,比如在 2 个单独的 div 中。我怎样才能做到这一点?我只能做一次,但似乎不能在另一个 d
我有一个系统可以从源中生成粒子并更新它们的位置。目前,我在 OpenGL 中编写了一个程序,它调用我的 GenerateParticles(...) 和 UpdateParticles(...) 并显
我正在尝试使用 particles.js 作为背景,但我无法将 Canvas 设置为全尺寸背景。 我针对类似问题尝试了至少 10 种不同的解决方案,但均无效果。 Canvas 始终作为具有与屏幕宽高比
我正在使用 Vincent Garreau 的 Particles.js(会链接但不能共享多个链接)在我网站的特定部分实现粒子效果背景。
我似乎无法让 particles.js 正常工作——我究竟做错了什么?任何见解将不胜感激,我无法确定错误是否是由于外部依赖性造成的... HTML: CSS: /* ---- particles
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
团结 我创建了两个碰撞器效果,并希望它们在相互碰撞时可以发挥某些作用。但我不知道如何制作两个粒子对撞机。如何让火与水相撞,水能灭火。感谢帮助!!!! 最佳答案 来自文档 ( http://docs.u
我是一名优秀的程序员,十分优秀!