animation - 处理中的 3D SVG 动画——闪烁问题、svg 加载问题

Question

我正在尝试制作一个受 Jer Thorp's "Just Landed" 启发的延时地理 twitter 可视化。 .我正在使用最新版本的处理。

我将 SVG 图像用于我的 map ，因为我希望能够以任意角度放大 map ，专注于某些地方，然后在全局范围内显示 twitter 连接。我遇到了几个问题，第一个是当我旋转 map 时国家的路径边界闪烁。这是我的问题的屏幕截图:



这是导致问题的我的代码:

import processing.opengl.*;
import java.awt.event.*;

PShape map;
PShape test1;
PShape test2;

//camera position/movement intialization
PVector position = new PVector(450, 450);
PVector movement = new PVector();
PVector rotation = new PVector();
PVector velocity = new PVector();

float rotationSpeed = 0.035;
float panningsSpeed = 0.035;
float movementSpeed = 0.05;
float scaleSpeed = 0.25;
float fScale = 2;

void setup(){
  map = loadShape("blank_merc.svg"); //swap out for whatever file
  size(900, 900, OPENGL);
  smooth();
  fill(150, 200, 250);
  addMouseWheelListener(new MouseWheelListener(){
    public void mouseWheelMoved(MouseWheelEvent mwe){
      mouseWheel(mwe.getWheelRotation());
    }
  }); 
}

void draw(){
  if (mousePressed) {
    if (mouseButton==LEFT) velocity.add( (pmouseY-mouseY) * 0.01, (mouseX-pmouseX) * 0.01, 0);
    if (mouseButton==RIGHT) movement.add( (mouseX-pmouseX) * movementSpeed, (mouseY-pmouseY) * movementSpeed, 0);
  }
  //TODO: implement reset functionality: DONE
  if (keyPressed){
    if (key=='r'){
      position.set(450,450);
      rotation.sub(rotation.get());
      velocity.sub(velocity.get());
      movement.sub(movement.get());
    }
  }
  velocity.mult(0.95);
  rotation.add(velocity);
  movement.mult(0.95);
  position.add(movement);

  background(255);
  //lights();




  translate(position.x, position.y, position.z);
  rotateX(rotation.x*rotationSpeed);
  rotateY(rotation.y*rotationSpeed);
  scale(fScale);

  shape(map,-250,-250,1000,1000);

}

void mouseWheel(int delta){
  fScale -= delta * scaleSpeed;
  fScale = max(0.5, fScale);
}

有人告诉我这可能是路径之间的 z-fighting，我认为这可能是问题所在，因为本地图处于中间旋转时，闪烁更成问题，尤其是在与观察平面不正交的角度。我试图通过使用 test1.translate(0,0,0.1); 在 Z 方向上“翻译”文件的一个 PShape 子项来解决这个问题。命令，但我收到一条错误消息，告诉我 illegal argument exception: cannot use translate(x,y,z) on a PMatrix2D .

我在使用其他 SVG map 文件测试我的代码时也遇到了麻烦，并且通常让 SVG 看起来像我认为的样子。我的 SVG map 上有一堆城市和其他奇怪的标记，即使我从 wikimedia commons 下载了完全“空白”的 svg 世界地图墨卡托投影。这些城市标记/区域属性会显示在处理渲染中，而不会显示在浏览器 View 中。我试图弄清楚如何在 Inkscape 中“清理”我的 SVG 文件，但我不确定具体要寻找什么。

例如，我用这张 map 运行它: http://commons.wikimedia.org/wiki/File:Mercator_Projection.svg

但是我没有用的点和线，我不得不求助于手动选择和删除路径，这不是一个非常彻底的过程

当我使用 this map ，它应该是上面没有所有标记的“空白版本”，我不仅看到一堆标记(可能隐藏在 SVG XML 中的某些样式属性中？)而且还有这个奇怪的垂直 strip ，还有我的相机控制 super 慢。小程序似乎表现得好像文件太大了，但它像 2MB。这是一个截图:



我真的只是在寻找一种将“干净”的 SVG 世界地图放入 Processing 中的方法，这样我就可以旋转它并放大它，如果我可以让它工作，我可以开始 Arc-Drawing 部分。我真诚地感谢任何人可以给我的任何帮助。

谢谢

Answer 1

如果我正确理解您的问题，闪烁仅在边缘，大概是它们重叠的地方。这对我来说意味着z-fighting。我通常发现在你的主要草图之外进行一个简单的测试是最好的，就像一个快速的方法来查看正在发生的事情以及你如何修复它。

如果你用两个重叠的形状制作一个简单的 SVG，只共享一个边，会发生同样的事情吗？

如果是这样，我认为最简单的解决方案(虽然不是那么容易)是:

在 Illustrator 中选择所有国家

使用Object > Transform > Scale...并缩小一点

然后将您的固定 map 分享给其他人!