3d in wick?

ever since i made 2d physics in wick, ive wondered if it was possible to do other things with other libraries. would it be possible to use three.js in wick to make something 3d? like a 3d game? that would be really cool, and open up new possibilities for game dev.

1 Like

It might be possible.
From what i remember
someone (pumpkinhead) made a 3D Engine using wick.

Well, it depends on how you do it. For something simple, like doing your own projecting and showing it as PaperJS paths, it can work, but full-on ThreeJS would be very difficult.

For an example, you could do some sort of ‘3D depth’ system which allows for some sort of 3D scene to be projected into 2D paths.

class Point
{
    constructor(x = 0, y = x)
    {
        this.x = x;
        this.y = y;
    }

    add(other)
    {
        this.x += other.x;
        this.y += other.y;
    }

    get inversed()
    {
        return new Point(-this.x, -this.y);
    }

    sub(other)
    {
        this.add(other.inversed);
    }

    get array()
    {
        return [this.x, this.y]
    }
}

class Model
{
    constructor()
    {
        this.points = [];
        this.faces = [];
    }
    
    toPath(camera)
    {
        var p = new paper.CompoundPath;

        for(var face of this.faces)
        {
            var f = new Path;
            
            for(var point of face)
            {
                f.add(camera.to2D(point).array);
            }

            p.addChild(f);
        }

        return f;
    }
}

class Camera
{
    constructor()
    {
        this.pos = new Point;
        this.rotation = new Point;
    }

    to2D(point)
    {
        // TODO: Implement
        return new Point;
    }
}

class Renderer
{
    constructor(cam = new Camera, models = [], origin = new Wick.Clip)
    {
        this.models = models;
        this.camera = cam;
        this.origin = field;
        this.frame = this.origin.parentFrame || new Wick.Frame;
    }

    render()
    {
        var paths = this.models.map(m => m.toPath(this.camera));

        paths.forEach(path => {
            this.frame.addPath(
                new Wick.Path({path})
            );
        })
    }
}

wait, so what does this do? i copy pasted it into wick, and it doesn’t do anything. when i check the code, it says “missing () invoking constructor”

Oh, it isn’t actual ready code, I was just sending an example of what it might look like. Pkhead’s engine works just like this, but it actually works.

ohhhh ok. hey, if the candlestick devs decided to add a 3d library or something, and then make it easier to use (y`know, like the reference on the left of the code editor) wouldn’t that be awesome? making 3d games in wick right now seems to be limited to very experienced programmers. just a sillly idea

Wick can’t really add 3D in the sense of ThreeJS or some other library, this would require modularizing the rendering system in Wick (which is stuck on Paper.js), which is very difficult to do. (Paths would need to be re-done completely, potentially breaking every single wick project ever)

converting the editor into 3d is extremely involved and would require an immense amount of work. keeping in mind that the editor also has to support animation in the same environment, a 3d editor would basically be a browser-based combination of unity and blender. this would also take away the simplicity of the editor, so this is probably a task for an entirely different project.

He didn’t ask for a 3D editor, but just adding a ‘proper’ 3D renderer onto Wick is way too complex.

interesting. is it hard to create a wick fork? like, could i, a mediocre programmer, make one?

It depends… Wick itself is split into two projects. The Editor project is a React 16 webapp which (in candlestick) can be launched using modern Node. The engine is really the good part, it’s written in plain, class-based JS, which should be ‘simple enough’ to understand.

You will notice how hacky scripting is implemented, we basically use Esprima to find syntax errors, and then new Function() to run the actual code.

Most of the functionality of the engine which you’d want to touch with is in three places:

  1. The Global API: engine/src/GlobalAPI.js
  2. The Clip: engine/src/base/Clip.js
  3. The Path: engine/src/base/Path.js
1 Like