处理闪烁问题的3D SVG动画,svg加载问题

Question

我正试图通过Jer Thorp的"Just Landed"启发时间推移地理推特可视化.我正在使用最新版本的处理.

我正在为我的地图使用SVG图像,因为我希望能够以任意角度放大地图,专注于某些地方,然后在全球范围内显示推特连接.我遇到了几个问题,第一个问题是当我旋转地图时,这些国家的路径边界会闪烁.这是我的问题的截图:

这是导致问题的代码:

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地图文件测试我的代码,并且通常让SVG看起来像我认为的样子.在我的SVG地图上有一堆城市和其他奇怪的标记,甚至当我从维基媒体公共下载完全"空白"的svg世界地图mercator投影时.这些城市标记/区域属性显示在处理渲染中,不会显示在浏览器视图中.我正在试图弄清楚如何在Inkscape中"清理"我的SVG文件,但我不确定具体要寻找什么.

例如,我用这张地图运行它:http://commons.wikimedia.org/wiki/File:Metator_Projection.svg

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

当我使用这个地图时,它应该是上面没有所有标记的"空白版本",我不仅看到一堆标记(大概是在SVG XML中隐藏了一些样式属性？)而且这也很奇怪垂直条带,我的相机控制超级慢.applet似乎表现得好像文件太大了,但它像2MB.这是一个截图:

我真的只是想找到一种方法来获得一个"干净"的SVG世界地图到Processing中,所以我可以旋转它并放大它,如果我可以让它工作,我可以启动Arc-Drawing部分.我真诚地感谢任何人都能给予我的帮助.

谢谢

Answer 1

如果我正确理解你的问题，闪烁只发生在边缘，大概是它们重叠的地方。这对我来说意味着深度冲突。我通常发现在主草图之外进行简单的测试是最好的，就像一种快速的方法来了解发生了什么以及如何修复它。

如果您制作一个具有两个重叠形状且仅共享一条边的简单 SVG，是否会发生同样的情况？

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

• 在 Illustrator 中选择所有国家/地区
• 使用Object > Transform > Scale...后略有收缩

然后将您的固定地图分享给其他人！