小编Luc*_*s C的帖子

使用three.js,我想对单个场景应用单独的后处理效果,然后将所有这些场景组合成最终渲染.为此,我使用的是three.js Effects Composer.

const radialBlurShader = {
	uniforms: {
		"tDiffuse": { value: null },
	},
	vertexShader: `
		varying vec2 vUv;
		void main() {
			vUv = uv;
			gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
		}
	`,

	fragmentShader: `
		uniform sampler2D tDiffuse;
		varying vec2 vUv;

    const float strength = 0.7;
    const int samples = 50;

		void main() {
      vec4 col = vec4(0);

      vec2 dir = vec2(0.5) - vUv;
      for (int i = 0; i < samples; i++) {
        float amount = …

我正在写一个web应用程序这使得一个图形保存〜700个节点和它们各自的边缘。每个节点都显示为一个圆圈，其中包含一个文本块、一个背景图像以及其他内容。图形是交互式的，用户可以缩放和平移图形。因此，平滑和高性能是必要的。

假设图形是用 SVG 呈现的。考虑到每个节点都包含丰富的类似 HTML 的内容，更容易在 a 中使用 HTML/CSS 来构建和设置节点样式，div并将其作为foreignObject 包含在图形中。但是，使用此方法在移动设备上使用该应用程序时，性能会明显下降。在现代浏览器上，如果节点完全在 SVG 中构建，您会期望显着提高性能吗？

在这个特定的情况下，使用HTML为每个节点包括使用的div文本，以及类似的CSS属性width，height，border，background-image，border-radius，和flex。使用纯 SVG 实现起来会更复杂，但会包含像rect和 等元素pattern以及相应的 SVG 样式属性。