Render OpenJSCAD model using three.js about csg.js HOT 19 CLOSED

csg.js in threejs

import { Geometry, Line, Vector3, Face3, BufferGeometry, Mesh, MeshNormalMaterial } from "three";

import { CAG, CSG, Polygon, Vector3 as CSGVector3, Vertex } from "@jscad/csg";

//test data
//  [[0, 0], [300, 0], [375.9389610013392, -14.582936414933044], [453.2638469065549, -15.082788583363026], [529.3849910170495, -1.4828160924247413], [601.7530408228974, 25.761508082405157], [667.9443376735787, 65.7377516987068], [725.7420868698896, 117.10708126689616], [773.2105997315898, 178.14910055806564], [808.7601212199124, 246.81946792563002], [831.2000719906828, 320.8183627947449], [839.7789217629447, 397.6675083269489], [834.2093586149617, 474.79317071493455], [814.6779112695531, 549.6123554006721], [781.8387021114304, 619.6193134428119], [736.7915401525237, 682.4694608721775], [681.0450876278392, 736.0579005150521], [616.4663337993476, 778.5899165312719], [545.2180681269847, 808.6410807537338], [469.68644687577034, 825.2049578242734], [392.4010790060723, 827.7268114461983], [315.95030772872303, 816.1221829065472], [600, 1200], [300, 1200], [276.4622712816465, 1199.0752001199385], [253.06966048793075, 1196.3065021785412], [229.9663908432284, 1191.7109761193028], [207.2949016875158, 1185.316954888546], [185.19497029047307, 1177.163859753386], [163.80285007813595, 1167.3019572565104], [143.25043058521544, 1155.7920493062277], [123.66442431225806, 1142.705098312484], [105.16558550094499, 1128.1217896800092], [87.86796564403573, 1112.1320343559642], [71.87821031999079, 1094.8344144990551], [57.29490168751582, 1076.335575687742], [44.207950693772375, 1056.7495694147847], [32.69804274348968, 1036.1971499218641], [22.83614024661398, 1014.8050297095269], [14.683045111453907, 992.7050983124841], [8.289023880697016, 970.0336091567717], [3.6934978214586636, 946.9303395120693], [0.9247998800615278, 923.5377287183535], [-5.684341886080802e-14, 900]]
//  [[597.7122651988514, 788.0205128205126], [422.15384615384596, 788.0205128205126], [422.15384615384596, 402.05131282051263], [600, 402.0513128205126], [599.9999999999998, 786.9320348416215], [599.8857685565437, 786.9867843836937], [599.7715207044286, 787.0414996769697], [599.6572564539231, 787.096180716532], [599.5429758152972, 787.1508274974658], [599.428678798822, 787.2054400148595], [599.3143654147708, 787.2600182638048], [599.2000356734176, 787.3145622393961], [599.0856895850384, 787.3690719367311], [598.9713271599103, 787.4235473509104], [598.8569484083123, 787.477988477038], [598.7425533405243, 787.5323953102209], [598.6281419668283, 787.5867678455688], [598.5137142975071, 787.641106078195], [598.3992703428457, 787.6954100032154], [598.2848101131299, 787.7496796157495], [598.1703336186474, 787.8039149109195], [598.055840869687, 787.8581158838508], [597.9413318765394, 787.9122825296718], [597.8268066494963, 787.9664148435143]]

export class Test
{
    async exec()
    {
        let cag1 = CAG.fromPointsNoCheck([
            [0, 0],
            [100, 0],
            [100, 100],
            [0, 100],
        ]);

        let csg1 = cag1.extrude({ offset: [0, 0, 5] });

        csg1 = csg1.reTesselated();

        csg1 = csg1.canonicalized();

        let csg2 = CAG.fromPointsNoCheck([
            [0, 0], [10, 0], [10, 10], [0, 10]
        ]).extrude({ offset: [0, 0, 5] });

        csg1 = csg1.subtract(csg2);


        // csg1.polygons.forEach(DrawPolygon);

        DrawCSG(csg1);
    }
}

function converVector3(v: CSGVector3)
{
    return new Vector3(v.x, v.y, v.z);
}


function DrawPolygon(polygon: Polygon)
{
    let geo = new Geometry();

    for (let v of polygon.vertices)
        geo.vertices.push(converVector3(v.pos));
    geo.vertices.push(geo.vertices[0]);

    let l = new Line(geo, ColorMaterial.GetLineMaterial(1));
    Scene.add(l);
}

function DrawCSG(csg: CSG)
{
    let geo = new Geometry;

    const pointAdd = (v: Vertex) =>
    {
        if (v.index === undefined)
        {
            v.index = geo.vertices.length;
            geo.vertices.push(converVector3(v.pos));
        }
    }

    for (let triangle of csg.toTriangles())
    {

        let [v1, v2, v3] = triangle.vertices;
        triangle.vertices.forEach(pointAdd);

        let f = new Face3(v1.index, v2.index, v3.index, converVector3(triangle.plane.normal));
        geo.faces.push(f);
    }

    Scene.add(new Mesh(geo, new MeshNormalMaterial({ wireframe: false })));
}

//TODO: Generate UV.

from csg.js.

I would like to support the suggestion that using CSG.js output in ThreeJS/LightGL/WebGL was documented in the README or the linked docs.

OpenSCAD is awesome for prototyping, but I want to use CSG in my own app as a library to programatically create a 3D model to display and interact with in the app so the desired end result is not just the model, but an app which allows the user to interact with it.

I'm sure more people will want to use CSG in such cases and having documentation for how to do that will be super helpful!

I am going to try and adjust @FishOrBear's example to pure WebGL in the coming weeks because that's what I am using in my project. If I'm successful and do not forget, I will post my results here as well.

from csg.js.

Hello @kaosat-dev and @z3dev, I'm going forwad to continue my project, if you have some examples to convert/import csg solids to lightGL geometry, this will help me a lot.

Thank you.

from csg.js.

@roipoussiere if you just want to convert the csg solids to three.js geometry it is very trivial, I'll post a simple explanation later today

from csg.js.

Yup. Those vertices from tesselateCube() look a lot like V2 polygon.vertices, which is an array of vertices. And each vertex is an array of values.

So... I suggest the you start looking further into V2 branch, specifically the src/geometry classes.

What kind of operations do you expect to perform on those buffers? Just display them?

from csg.js.

@roipoussiere did you get an answer to your original questions? if so then please close this issue. if not then let's discussion via an issue at OpenJSCAD.org, as this repository is DEPRECATED.

from csg.js.

@roipoussiere ... and If anybody else will be interested in three.js integration check this topic for updates,
I am close to publishing something useful. I have tested almost all of the example scripts that do not import stuff and it works fine

https://openjscad.nodebb.com/topic/235/threejs-integration

I am actually a bit proud that "color cubes" example renders much faster in my version due to geometry reuse.

from csg.js.

There are many 3D rendering libraries, like Three.js. OpenJSCAD uses LightGL (web) and REGL (app).

OpenJSCAD adds additional layers above these libraries, allowing users (like you) to create 3D models. Please try using OpenJSCAD. If you cannot achieve your goals then let us know.

There are many users of OpenJSCAD, so please start a discussion there as well.

from csg.js.

OpenJSCAD uses LightGL (web) and REGL (app)

Oh ok I though that you use three.js. I didn't know LightGL, this lib seems very interesting.

If you cannot achieve your goals then let us know.

I am working on an artistic project which is big structure who projects calculated shadows on the ground. To achieve this, before to build the structure I want to create a simple web interface simulating the sun trajectory around the model, to verify that it works correctly. So the only webGL features I need is: light, shadows and static animation.

@kaosat-dev Thank you a lot! :)

Now I'm also interested to convert csg solids to LightGL geometry as well (because LightGL is light and enough for my purpose!). :D If you can share a small code sample it will be very helpful.

from csg.js.

Hi again,

I note that csg.js is installed as an npm package, and lightGL as a single js file.

I'm not used to npm, but if I want to render my piece in the browser with lightGL, this means that I need to bundle csg.js with for example webpack.js or there is other solutions?

from csg.js.

@kaosat-dev if you just want to convert the csg solids to three.js geometry it is very trivial, I'll post a simple explanation later today

I would have a similar request. A trivial explanation would be delightful :)
cheers

from csg.js.

@kaosat-dev Hello, I am waiting for your example

from csg.js.

@FishOrBear, thanks for the code snippet.
I think we need to consider the case of a defined vertex index and still push the vertex to the geometry.
const pointAdd = (v: Vertex) =>
{
if (v.index === undefined)
{
v.index = geo.vertices.length;
}
geo.vertices.push(converVector3(v.pos));
}

from csg.js.

pure WebGL

Hmm.. pure WebGL.. can you expand this point?

FYI, we are adopting glmatrix as the underlying data structure for geometries in V2. So, it would be good to compare your vision with V2. Do you have any specific plans?

from csg.js.

I specifically am looking to use CSG in a personal project I am working on. I am looking to model a particular kind of a synth and use WebMIDI to connect the real physical version of that synth to the computer and depress keys on the model as they get depressed by me playing the physical version.

I am writing this in plain JavaScript and WebGL with no external libraries, but I think tesselating the synth would be too hard to do manually so I figured I could use CSG to model it and make an exception on the 3rd party library restriction. But I still want to render it using WebGL with no wrappers which means I need to get the WebGL buffers somehow. I think I will be able to construct them by pulling out the tris from CSG.js with the help of the example code above, but I am thinking if CSG could output that for me to plug into the WebGL context by itself that would be handy.

from csg.js.

Here's an example of what I am doing right now, manually constructing WebGL vertex and index buffers:
https://github.com/TomasHubelbauer/webgl-op-1/blob/master/cube-recessed/tesselateCube.js
This code results in a cube with a portion cut out by what appears to be another cube.
https://tomashubelbauer.github.io/webgl-op-1/?cube-recessed
Something like this is an obvious thing to use CSG for, so my suggestion above was alluding to this: the ability to design a mesh using CSG but have it output as WebGL vertex and index buffers.

from csg.js.

What kind of operations do you expect to perform on those buffers? Just display them?

I think so, but this project is really just an excuse to learn the WebGL API which could take me anywhere. For now the goal is to model the synth and hook up the MIDI gimmick described above.

from csg.js.

@TomasHubelbauer Thanks

@kaosat-dev and I would really appreciate any feed back from your adventures. We are hoping that the new data structures just bolt into WebGL. But it’s still a little early to know for sure.

from csg.js.

Ok I close this and will open the issue in OpenJSCAD.org if necessary, thank you for your answers.

from csg.js.