标签: rendering

以下代码对应于 Blazor 服务器端页面：

<pre>
    @page "/ShowFile/{Id:guid}"
    
    //// What to put here to let the browser render the byte array stored on this.Model
    //// Also how to specify the content type of the response?
    
    @code
    {
        [Parameter]
        public Guid Id { get; set; }
    
        private byte[] Model { get; set; }
    
        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();
            //// Gets the byte array of a file based on its identifier.
            this.Model = await this.GetFile(this.Id).ConfigureAwait(false); 
        }
    }
</pre>

In ASP.NET MVC …

我想使用Bevy创建类似门户的效果。Unity 似乎有一个渲染纹理来实现这一点。

有没有办法在 Bevy 中做同样的事情？如果没有，未来是否有计划支持？

我正在开发一个渲染引擎，它使用绘制间接和实例渲染来渲染场景几何体。一些对象是根据实例化的基本形状（例如立方体或球体）按程序生成的，其他对象是在整个场景中实例化和使用的网格对象。现在，实例化几何体是使用对 glDrawElementsInstanced 的单独绘制调用来绘制的（现在有效，但通常不好），并且使用对 glMultiDrawElementsIndirect 的单个调用来绘制单个对象（在统一的 VBO 中）。由于我在渲染管道中使用照明和纹理（无绑定），并且场景很复杂，总共有数十万个网格，因此我需要实现 GPU 遮挡和视锥体剔除。两者都需要它：减轻片段着色器和顶点着色器的负担。

对我来说，主要问题是找到一种合理的方法来对实例几何体执行这些 GPU 剔除操作。虽然对于仅渲染一次的对象（使用间接绘制），所有剔除内容都通过示例很好地说明了，但它们似乎都没有解决实例网格物体的剔除问题。这样做似乎没有真正的障碍，但如何以最佳方式实现这一点。

我建议如下：

1. 对实例化和非实例化几何体仅使用一次绘制间接调用。（没有真正的理由将它们分开，因为 glMultidrawElementsIndirect 提供了实例）
2. 将网格的实例数据保存在两个单独的缓冲区（SSBO）中。一种具有所有场景对象的所有实例数据，另一种具有可见实例的实例数据。绘制间接命令是在计算着色器中编写的（在剔除之后），并根据某种可见性索引调整了实例计数和基本实例（我在这里正确吗）？

问题是：这种实例数据的复制（复制到两个单独的缓冲区中）是否合理，或者是否有更有效的方法？

我正在尝试在矩形上渲染线性渐变。这是代码：

Rectangle()
        .foregroundColor(Color.red)
        .overlay(
            LinearGradient(gradient: Gradient(colors: [.red, .yellow, .blue]), startPoint: .topLeading, endPoint: .bottomTrailing)
        )
        .frame(width: 300, height: 200)
        .position(x: 170, y: 120)

当我将其渲染在正方形上时，一切看起来都是正确的：

然而，当我在矩形上渲染它时，它看起来不再像从顶部前角到底部尾随。它看起来就像是被剪辑的同一个：

这是它在 svg 中的渲染方式（蓝色看起来不一样，但这不是重要的部分），以及我希望它在 swift 中的外观：

黄色对角线应该直接从一个角到另一个角，因为我指定了startPoint: .topLeading, endPoint: .bottomTrailing. 这里说SwiftUI 对角线 LinearGradient 在一个矩形中，这是一个标准行为，没关系 - 我并不是想说 SwiftUI 渲染它不正确，我只是需要一种方法让它看起来像 svg 中的那样。

我在最新的 Xcode 13 上运行我的应用程序，在模拟器中的 iOS 15 上运行我的应用程序，当水平滚动表行（包含集合视图）时会产生奇怪的渲染错误/问题。这只是视觉上的。单元格上的触摸点都正常，我可以用手指滚动渲染无法滚动的地方...

这是一个集合视图表...

另外，如果我垂直滚动表格，任何渲染故障都会得到解决......直到我再次从左向右滚动。

我刚刚创建了 NextJS 应用程序，第一个加载包大小约为 1.5Mb。这是我第一次使用 Nextjs，据我了解 1.2Mb 是非常大的。我附上了纱线构建的图像以及我的package.json.

我的应用程序中的所有页面都从数据库查询，现在页面呈现为静态 html。

我已经尝试了所有基本的东西，例如使用 ES6 导入（用于有条件渲染的组件），但这些都不起作用。我认为问题在于我的所有页面首先从数据库中获取数据（如果我错了，请纠正我），但是我不太确定如何解决这个问题。

我知道我可以使用 useEffect 直接从前端获取数据，但是我不知道这是否会减少构建大小。

如果有人有使用 NextJs 的经验，如果他们能够查看我的项目并让我知道哪里出了问题，我将非常感激。

谢谢！

包.JSON

  "dependencies": {
    "@chakra-ui/react": "^2.3.6",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@next/bundle-analyzer": "^13.0.2",
    "dotenv": "^16.0.3",
    "framer-motion": "^7.6.5",
    "moralis-v1": "^1.11.0",
    "next": "latest",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-moralis": "^1.4.2",
    "react-redux": "^8.0.4",
    "web3uikit": "^0.1.159"
  },
  "devDependencies": {
    "@types/node": "17.0.35",
    "@types/react": "18.0.9",
    "@types/react-dom": "18.0.5",
    "autoprefixer": "^10.4.7",
    "file-loader": "^6.2.0",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.2",
    "typescript": "4.7.2",
    "url-loader": "^4.1.1"
  }
}

捆：

我使用 React 已经近 3 年了，但有时会在“渲染”的含义上遇到困难。

实际上，为了检查“渲染”，我刚刚输入了

console.log('render')

在之前的组件中

return <>...</>

这是正确的检查吗？或者我无法知道是否重新渲染？

我必须在 Flutter 移动应用程序中显示很多图像。什么是最好的选择？显示图像时，请使用PNG 或 SVG。我是否可以知道可比差异何时接受我进行了很多搜索，但我没有以这种方式获得大量结果。

PS：我不使用网络图像或任何资源。

如果可能的话，如何在没有第三方库的情况下使用纯 WebGPU 渲染文本？

我还在学习WebGPU的过程中，了解不多，但是我找到了这个解决方案，但是它使用了第三方库

/* Canvas initialization */

const canvas = document.getElementById("canvas") as
HTMLCanvasElement;

/* WebGPU initialization */

const adapter: GPUAdapter = await navigator.gpu.
requestAdapter() as GPUAdapter;
const device: GPUDevice = await adapter.requestDevice() as
  GPUDevice;
}

/* Font initialization */

const fontParser = new FontParser(device, "fonts/RobotoRegular.ttf");

/* Text block to render */

const textBlock = new TextBlock(
    device, "Hello World", fontParser,
    options = {
    color = [0.6, 0.5. 0.6, 1.0],
    spacing = 2,
    width = 2,
    size = 4,
    isWinding …

这完全相同:IE6透明PNG问题

火狐:

IE 6: 图像的背景是透明的.IE似乎搞砸了.有任何想法吗？