В vtk.js нет vtkGlyph3DJavascript

Форум по Javascript
Ответить
Anonymous
 В vtk.js нет vtkGlyph3D

Сообщение Anonymous »

У меня есть код, который создает интерактивное окно, которое показывает Мозг в визуализации, основанной на Джарвисе из фильмов «Железный человек», с использованием vtk.py и pyqt5, я действительно усердно работал над ним как над личным проектом в течение последних 4 лет (я был взволнован, когда это сработало, признаюсь).
введите описание изображения здесь
(это репозиторий github https://github.com/GodSpell69/VirtualAssistant.git)
Но меня не устраивает использование его только через рабочий стол с помощью pyinstaller, я хотел использовать его в Интернете. Я искал, и основным 3D-визуализатором является Three.js, есть много невероятных визуализаций, и я думал, что смогу адаптировать к нему свой код (ознакомьтесь с этим другим репозиторием: https://github.com/GodSpell69/BrainVisualization.git), но я не мог заставить точки МЕРЦАТЬ, и это так важно, потому что кажется, что через них проходит энергия (например, срабатывание синапсов), и это просто кажется таким правильно.
Итак, я начал пробовать vtk.js, который был очень похож на vtk.py, у меня были некоторые проблемы, потому что я никогда не пробовал веб-разработку, и просто чтобы вы имели представление, я использовал unpgkCDN, потому что я не мог установить с помощью npm, но я нашел способ.
Я смог адаптироваться от vtk.py к vtk.js, но даже несмотря на то, что я создал код, мне потребовалось много времени, чтобы понять Самым важным, что заставило точки мерцать, был vtkGlyph3D, после столь долгого времени я думал, что это было своего рода взаимодействием с каркасом, заменившим шейдеры, но я провел несколько тестов, и на самом деле это просто glyph3D

Код: Выделить всё

import "@kitware/vtk.js/Rendering/Profiles/Geometry";
import './style.css';

import vtkOBJReader from '@kitware/vtk.js/IO/Misc/OBJReader';
import vtkXMLPolyDataReader from '@kitware/vtk.js/IO/XML/XMLPolyDataReader';
import vtkSphereSource from '@kitware/vtk.js/Filters/Sources/SphereSource';
import vtkGlyph3DMapper from '@kitware/vtk.js/Rendering/Core/Glyph3DMapper';
import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
import vtkRenderWindow from '@kitware/vtk.js/Rendering/Core/RenderWindow';
import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
import vtkOpenGLRenderWindow from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';
import vtkPolyDataNormals from '@kitware/vtk.js/Filters/Core/PolyDataNormals';

const container = document.getElementById("container");
const loading = document.getElementById("loading");
const { clientWidth, clientHeight } = container;
const renderWindow = vtkRenderWindow.newInstance();
const renderer = vtkRenderer.newInstance();
const glWindow = vtkOpenGLRenderWindow.newInstance();
renderWindow.addRenderer(renderer);
renderWindow.addView(glWindow);
renderer.setBackground(0.02,0.02,0.02);
glWindow.setContainer(container);
glWindow.setSize(clientWidth, clientHeight);
glWindow.initialize();

let wireframeActor, hullActor, sphereActor;
let loadedWireframe, loadedHull, loadedPoints;

function tryInit() {
if (loadedHull && loadedPoints && loadedWireframe) {
renderer.resetCamera();
renderer.getActiveCamera().zoom(1.5);
loading.classList.add("hidden");
animate();
}
}

const wireframeReader = vtkOBJReader.newInstance();
wireframeReader.setUrl("/models/brain.obj").then(() => {
wireframeReader.update();
const normals = vtkPolyDataNormals.newInstance({
computePointNormals: true,
computeCellNormals: false,
});
normals.setInputConnection(wireframeReader.getOutputPort());
normals.update();

const wireframeMapper = vtkMapper.newInstance();
wireframeMapper.setInputConnection(normals.getOutputPort());

wireframeActor = vtkActor.newInstance();
wireframeActor.setMapper(wireframeMapper);
wireframeActor.getProperty().setRepresentationToWireframe();

wireframeActor.getProperty().setColor(0,0,0);
wireframeActor.getProperty().setBackfaceCulling(false);
wireframeActor.getProperty().setOpacity(1);

wireframeActor.setOrigin(-0.7230189442634583, 1.5103785395622253, 0.8213195204734802);
wireframeActor.setOrientation(0, 90, 0);

renderer.addActor(wireframeActor);
loadedWireframe = true;
tryInit();
});

const hullReader = vtkOBJReader.newInstance();
hullReader.setUrl("/models/brain.obj").then(() =>  {
hullReader.update();
const hullMapper = vtkMapper.newInstance();
hullMapper.setInputConnection(hullReader.getOutputPort());
hullActor = vtkActor.newInstance();
hullActor.setMapper(hullMapper);
hullActor.getProperty().setColor(0.020, 0.835, 0.886);
hullActor.getProperty().setOpacity(0.01);
hullActor.getProperty().setLighting(false);
hullActor.getProperty().setBackfaceCulling(false);
hullActor.setOrigin(-0.7230189442634583, 1.5103785395622253, 0.8213195204734802);
hullActor.setOrientation(0, 90, 0);
renderer.addActor(hullActor);
loadedHull = true;
tryInit();
});

const edgesReader = vtkXMLPolyDataReader.newInstance();
edgesReader.setUrl("/models/edges.vtp").then(() => {
edgesReader.update();
const edges = edgesReader.getOutputData();

const sphereSrc = vtkSphereSource.newInstance();
sphereSrc.setRadius(0.002);

const glyph = vtkGlyph3DMapper.newInstance();
glyph.setInputData(edges);
glyph.setSourceConnection(sphereSrc.getOutputPort());

glyph.setScaleFactor(1.0);
glyph.setScaleModeToScaleByConstant();

sphereActor = vtkActor.newInstance();
sphereActor.setMapper(glyph);
sphereActor.getProperty().setColor(0.020, 0.835, 0.886);
sphereActor.getProperty().setOpacity(0.5);
sphereActor.getProperty().setRepresentation(0);
sphereActor.setOrigin(-0.7230189442634583, 1.5103785395622253, 0.8213195204734802);
sphereActor.setOrientation(0, 90, 0);

renderer.addActor(sphereActor);;
loadedPoints = true;
tryInit();
});

window.addEventListener("resize", () => {
const { clientWidth, clientHeight } = container;
glWindow.setSize(clientWidth, clientHeight);
renderWindow.render();
});

function animate() {
requestAnimationFrame(animate);
wireframeActor.rotateY(0.15);
hullActor.rotateY(0.15);
sphereActor.rotateY(0.15);
renderWindow.render();
}
Дело в следующем:
В vtk.js нет vtkGlyph3D, есть только vtkGlyph3DMapper. И они РАЗНЫЕ
Очевидно, vtkGlyph3D (A) слишком тяжел, чтобы vtk.js запускал его в сети, поэтому он использует vtkGlyph3DMapper (B), который использует графический процессор и не является картографом, не является фильтром и не создает новые полиданные, только создает экземпляр точек, сферы, векторов, масштаба, ориентации для графического процессора, поэтому шейдер обрабатывает каждую точку как одну и ту же, создавая нет мерцания.
Мне удалось создать псевдомерцание, при котором внешний слой каркасного актера выходит вперед (посредством вращения) точек и появляется снова несколько раз, создавая эффект. Проблема заключается в контрасте между каркасом и точками, поэтому я не могу использовать светлые цвета в каркасе, если точки также имеют светлые цвета, поэтому это затемненный актер, а не яркий, как Джарвис.
введите здесь описание изображения, которое лучше всего можно было бы сделать с помощью vtk.js
Я разочарован и мне нужно либо решение для использования vtk.py в Интернете, либо даже слова подтверждения на этом этапе

Подробнее здесь: https://stackoverflow.com/questions/798 ... -in-vtk-js
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»