标签: rendering

我在理解如何使用OpenGL处理​​/渲染多个对象时遇到了一些困难.我环顾四周,在谷歌和OpenGL红皮书中找到答案,围绕着我想弄清楚的东西跳舞,但我需要看看我是否有正确的想法.

我的第一个想法是我应该分别处理X,Y和Z的平移和旋转变量的位置数据.将单个网格存储在该类的静态VBO中,然后为我想渲染的每个实例执行for-next循环

• 加载标识
• 转换为特定对象的位置/旋转
• 使用drawarrays在该位置渲染网格
• 循环到下一个对象并为每个对象重复上述操作

为每个帧更新处理这样的转换是否会显着影响性能？

有人提到的另一种方法是在一个VBO中粘贴每个顶点的所有位置数据,然后用一次调用渲染它.在这个方法中,我假设"创建"一个对象,我需要通过一个函数来处理每个顶点的位置数据,该函数将获取其本地坐标(通过静态数组)并将该特定对象的位置数据添加到顶点,然后把它存放在VBO中？如果是这种情况,我将如何处理轮换？

第三个想法是在对象的每个实例中存储一个4x4矩阵来保存平移/旋转信息,然后当我去渲染时,我只是加载该对象的矩阵,从单个VBO中绘制网格,然后加载下一个对象的矩阵,从同一个VBO中抽取等等....

最后,我看到有人建议为每个对象都有一个VBO,并为每个实例调用drawarray.这种方式对我来说似乎效率很低,让我想知道如果你为每个网格调用VBO,那么VBO会是什么意思.看起来像立即模式(我理解它被折旧)会更快,因为你没有为每个单个对象创建和绑定VBO的开销.

处理/渲染多个对象的任何/所有这些方法是否有效？如果是这样,每种方法的优点和缺点是什么？

最有意义的方法是每个网格具有单个VBO的方法,然后根据更新转换它们,或者每次更新加载每个对象的矩阵并以此方式呈现.我是OpenGL和图形渲染的新手,所以我试图完全理解处理渲染多个对象所需信息的最佳方法.

场景

我正在创建一个帧缓冲区对象并将纹理绑定到颜色附件0.我没有使用深度缓冲区.创建它之后,我解开它.

在某个时间点之后,帧缓冲区被绑定,向其呈现三角形条带(某些部分部分透明),然后再次解除绑定.使用不同的三角形条重复多次.

最终,绘制到主帧缓冲区的是纹理四边形,其纹理附加到我创建的帧缓冲区对象上.

问题

我发现绘制到纹理中的三角形条带的部分透明部分与其他三角形条带重叠没有正确混合.它们似乎与白色混合,而不是纹理中已经存在的颜色.即使我用纯绿色填充纹理(例如),在混合时拾取的颜色仍然是白色.

这里是我用来完成所有这些的代码的几个片段:

初始化

glGenTextures(1, &texture_id);
glBindTexture(GL_TEXTURE_2D, texture_id);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL);
glGenFramebuffers(1, &framebuffer_id);
glBindFramebuffer(GL_FRAMEBUFFER, framebuffer_id);
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, texture_id, 0);
glBindTexture(GL_TEXTURE_2D, 0);
glBindFramebuffer(GL_FRAMEBUFFER, 0);

渲染到纹理(迭代)

glBindFramebuffer(GL_FRAMEBUFFER, framebuffer_id);
glDisable(GL_DEPTH_TEST);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

// On the first render iteration, do_clear is true
if (do_clear)
{
    glClearColor(r, g, b, a);
    glClear(GL_COLOR_BUFFER_BIT);
}

// ... render the current triangle strip ...

glBindFramebuffer(GL_FRAMEBUFFER, …

我已经学习 SDL 2D 编程一段时间了，现在我想创建一个结合使用 SDL 和 OpenGL 的程序。我是这样设置的：

SDL_Init(SDL_INIT_VIDEO);

window = SDL_CreateWindow("SDL and OpenGL", SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED, width, height, SDL_WINDOW_OPENGL);

context = SDL_GL_CreateContext(window);

该程序现在只是一个使用 OpenGl 显示的带有白线的黑色窗口。这是渲染的代码：

glClearColor(0, 0, 0, 0);
glClear(GL_COLOR_BUFFER_BIT);         

glBegin(GL_LINES);     
glVertex2d(1, 0);
glVertex2d(-1, 0);
glEnd();

SDL_GL_SwapWindow(window);  

所以问题是，我想额外使用纯 SDL 和 SDL_Renderer 对象渲染纹理，就像我之前没有 OpenGL 所做的那样。我试过了，但没有用。甚至有可能做到这一点以及如何做到这一点？我所做的是创建一个 SDL_Renderer 然后在绘制 OpenGL 的东西之后这样做：

SDL_Rect fillRect;
fillRect.w = 50;
fillRect.h = 50;
fillRect.x = 0;
fillRect.y = 0; 

SDL_SetRenderDrawColor(renderer, 100, 200, 100, 0);
SDL_RenderFillRect(renderer, &fillRect);

SDL_RenderPresent(renderer);    

但这不起作用。矩形未显示，尽管在几毫秒内它会略微出现。我觉得 OpenGL 渲染正在覆盖它。

我目前有一个工作的传单地图,并希望在此基础上使用传单插件Heatmap.js.http://www.patrick-wied.at/static/heatmapjs/example-heatmap-leaflet.html

我使用的代码与上面链接中的示例非常相似.

 var testData = {
                max: 8,
                data: [{lat: 24.6408, lng:46.7728, radius:500, count: 3}]
            };


 var cfg = {
                "radius": 2,
                "maxOpacity": 8,
                "scaleRadius": true,                    
                "useLocalExtrema": true,
                latField: 'lat',                 
                lngField: 'lng',
                valueField: 'count'
            };

var heatmapLayer = new HeatmapOverlay(cfg);

map.addLayer(heatmapLayer);

heatmapLayer.setData(testData);

当我运行地图时,我没有看到任何热图的迹象.然后,当我在地图上平移时,我在控制台中收到以下错误:

无法在'CanvasRenderingContext2D'上执行'getImageData':源高度为0.

知道如何解决这个问题吗？heatmap.js网站上的演示使用几乎完全相同的代码.

谢谢!

编辑:

我发现错误可能来自哪里.heatmap.js中的第316行是:

this._height = canvas.height = shadowCanvas.height = +(computed.height.replace(/px/,''));

高度返回为零.但是正确设置了宽度.

据我所知，应该可以使用 MeshStandardMaterial 在 Three.js 中定义类金属材料，它应该遵循 pbr-roughness-metalness-workflow 但我找不到任何关于如何实现这一点的好例子。

我不能使用 Phong-Shader，我必须坚持使用 MeshStandardMaterial。

我想实现这样的目标：

我正在开发一个由多个屏幕组成的 React Native 应用程序（尽管我认为我的问题通常适用于 React）。

所以我创建了一个简单的组件来切换屏幕：

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { View } from 'react-native';

class AppNavComponent extends Component {

    constructor() {
        super();
        this.screenCache_ = {};
    }

    render() {
        if (!this.props.route) throw new Error('Route must not be null');
        let route = this.props.route;
        if (this.screenCache_[route.routeName]) return this.screenCache_[route.routeName];
        let Screen = this.props.screens[route.routeName].screen;

        this.screenCache_[route.routeName] = (
            <View>
                <Screen/>
            </View>
        );

        return this.screenCache_[route.routeName];
    }

}

const AppNav = connect(
    (state) => {
        return { …

我正在尝试渲染draw.io保存的 (SaveAs->Device) .xml 图表。

使用作为输入示例的保存图：

<mxGraphModel dx="1426" dy="720" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" background="#ffffff" math="0" shadow="0">
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="2" value="" style="shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;" vertex="1" parent="1">
      <mxGeometry x="180" y="200" width="120" height="60" as="geometry"/>
    </mxCell>
    <mxCell id="3" value="" style="whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
      <mxGeometry x="360" y="180" width="80" height="80" as="geometry"/>
    </mxCell>
    <mxCell id="4" value="" style="endArrow=classic;html=1;exitX=0.025;exitY=0.638;exitPerimeter=0;" edge="1" parent="1" source="3" target="2">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="180" y="430" as="sourcePoint"/>
        <mxPoint x="230" y="380" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
  </root> …

我的颤动网在某些分辨率下很模糊。谁知道怎么修它？

有关更多信息，我正在调试模式下运行，当我放大或缩小页面时，质量会发生变化，有些缩放级别模糊，有些则没有。

在此处输入图片说明

[?] Flutter (Channel stable, v1.7.8+hotfix.4, on Microsoft Windows [Version 10.0.17763.615], locale en-US)
• Flutter version 1.7.8+hotfix.4 at D:\flutter
• Framework revision 20e59316b8 (3 weeks ago), 2019-07-18 20:04:33 -0700
• Engine revision fee001c93f
• Dart version 2.4.0

我正在对 45 分钟 1.2GB 视频 80,0000 帧大小为 1344x756 的视频进行一些渲染，并且视频采用 mp4 格式，我正在尝试使用 x265 压缩输出视频问题是当我使用时cv2.VideoWriter 10 分钟的视频输出大小超过 2GB，这不是我想要的结果，所以我在 mac osx 和 ubuntu 18 上尝试了以下操作：

codec = cv2.VideoWriter_fourcc(*'HEVC')
out = cv2.VideoWriter('output.mp4', 'HEVC', fps, (width, height))

我得到的只是运行时警告：

OpenCV: FFMPEG: tag 0x43564548/'HEVC' is not found (format 'mp4 / MP4 (MPEG-4 Part 14)')'

我想要实现的不一定是最高质量的输出，而应该是高质量和尽可能小的尺寸。

这将很难提出，因为尽管我尽了最大的努力，但我终其一生都无法生成一个独立的示例，因此我将不得不希望有人已经熟悉这个问题。此外，这个问题似乎不会出现在系统字体上，但会出现在像 Inter.

我在我的网站上使用Inter 字体。它看起来很棒，但有一个问题，有时文本呈现得比它应该的更粗（有时在悬停事件期间它也会暂时闪烁更粗）。最终我发现我可以通过backface-visibility: hidden在受此问题影响的元素上应用该属性来解决此问题。

它影响哪些元素似乎是随机的。绝大多数网站都运行良好，但偶尔我会发现一个有此问题的标签，我必须backface-visibility: hidden在其上添加一个属性来修复它。此外，这不会发生在所有浏览器和操作系统上。从我所见，Mac 设备上不存在此问题。在 Windows 上，它有时会在悬停在元素上时出现，等等。

好吧，那么为什么不将此 CSS 规则应用于根文档，以便它应用于每个元素呢？表现。

显然这条规则强制某种形式的 GPU 加速？我对细节不是很清楚，但是当我在全球范围内应用它时，我网站上的 FPS下降了。但是，仍然存在的问题是，如果该元素足够多，它所在的少数剩余标签可能会导致 FPS 性能问题。

所以我的问题是：是什么导致了这种情况，是否有高性能修复？我不能简单地应用于backface-visibility: hidden每个元素，因为它会破坏我网站的性能，但即使将它应用于弹出的少数随机元素也会导致性能问题。是什么导致某些元素随机具有这种奇怪的粗体文本效果？

我发现这篇文章似乎参考了闪烁和使用backface-visiblity hidden及其相应的性能问题，但目前还没有解决方案。

编辑：在进行额外的研究后，似乎不仅仅是backface-visibility: hidden修复它，而是引发硬件加速的任何 CSS 属性。因此，放入transform: translateZ(0);元素也可以修复它，但也存在性能问题。仍然需要知道的是，为什么这种图形闪烁会发生在像 Inter 这样的字体而不是系统字体上，而且只发生在某些操作系统和浏览器上。此外，似乎有一些与悬停事件的交互导致绝对定位的元素变得可见，从而导致页面上的后续元素闪烁。