Git Product home page Git Product logo

pixpipejs's Introduction

This is the website and website buider for Pixpipe.io.
At the root of this repository are all the pages generated by the core. The core is in the core folder and generates all the pages except the root index.html (which is static).

How to modify content?

Fork it, edit it, and make a PR.

The main page

The root index.html is just a static page. To modify it, just modify the html code in it.

The other pages

The other pages of the website are generated from markdown content, thus, their HTMLcontent should not be edited.

The folder core/content/ contains one subdirectory for each page to be generated. The name of this directory is (or will be) the url of this page. The folder with a name starting with a underscore will not be processed.

Each page subfolder contains:

  • a data folder, to put images and other assets
  • a config.json to add the template to use (most likely "generic") title, the subtitle and the header image to use
  • a content.md that contains the core of the article, written in markdown

To create a new page, you can copy-paste the _example-page, rename it with the url you want and change the data inside.

The Footer

The footer of the home page is simply part of the index.html file while the footer of the article pages is part of the template in core/templates/. Both look the same and have the same content but they are two different things to update.

Generate the static website

Once a modification is done:

$ cd core
# if not installed, do it:
$ npm install

$ npm run build

This will generate the static files at the root of the project and copy the data subfolders.

pixpipejs's People

Contributors

armintaheri avatar jonathanlurie avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

pixpipejs's Issues

md5 throw

on Node, when saving a Image3DAlt with PixBinEncoder, md5() crashes

Question: best approach to rendering a NIFTI volume in world space

Hello, thanks for the excellent library!

I'm setting out to render voxel data from Nifti's in a similar fashion to what you do in your volume3DNavigatorTimeCurve.html example (Axial/Sagittal/Coronal planes rendered in three js). The issue is I'm indexing to other geometries that are already affined to world space.

I can see some handling o NIFTI's ijk to world affine in that it's clearly read from the header in your NIFTI decoder and stashed into metadata, but I can't seem to see the metadata being consumed elsewhere.

I've tried modifying the vertex shader in your example to incorporate another Matrix4 uniform, which I call worldToIjkCentered. I've created this affine by logic like:

function computeWorldToIjkCentered(affine: Matrix4, dims: [number, number, number]): Matrix4 {
    const clone = invertAffine(affine.clone());

    const [i, j, k] = dims;

    const translation = new THREE.Vector3(i, j, k).multiplyScalar(-0.5);

    const affineToIJK = new THREE.Matrix4().makeTranslation(translation.x, translation.y, translation.z);

    const affineToWorld = affineToIJK.multiply(clone);

    return affineToWorld;
}

where invertAffine does what you probably expect and I call the method with a three Matrix4 version of the NIFTI header affine and the ijk dimensions.

I'm applying the new affine in the vertex shader like:

precision highp float;
varying vec2 vUv;
varying vec4 worldCoord;

uniform mat4 worldToIjkCentered;

void main() {
  vUv = uv;
  vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
  gl_Position = projectionMatrix * mvPosition;

  // this line changed
  vec4 normalizedPosition = worldToIjkCentered * vec4(position, 1.0);
  worldCoord = modelMatrix * vec4(normalizedPosition.x, normalizedPosition.y, normalizedPosition.z, 1.0);
}

Which, when combined with applying the ijkToWorld affine from the NIFTI header to the Plane Geometries works well for the Coronal plane but has some unanticipated results (to me at least) on the other planes. Reading through the vertex shader, I assume this issue is related to some of the assumptions there so my plan is to tackle that next.

I understand that my struggles are more with Three DataTextures and glsl shaders than with Pixpipe, but I figured I would ask: is there a more straight forward way to go about this using PixPipe? Any thoughts or advice for how to go about this?

I'm happy to contribute an example back to pixpipe once I've got this sorted.

Thanks in advance, and congrats on what seems to be your first GitHub issue from a user!

performance.now

Replace it by a node compliant thing. Until then, in your node scope:

global.performance = {
  now: function(){}
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.