ripe-tech / ripe-sdk

The public Javascript SDK for RIPE Core
https://www.platforme.com
Apache License 2.0
8 stars 4 forks source link

#429 [CSR] [WIP] Support multiple initials #432

Closed NFSS10 closed 1 year ago

NFSS10 commented 1 year ago
- -
Issue https://github.com/ripe-tech/ripe-sdk/issues/429
Dependencies https://github.com/ripe-tech/ripe-sdk/pull/427
Decisions Support multiple CSR initials

Test config used for testing this feature (just adds it to the start of _onPostConfig():

const assets = {
    meshes: {
        high_poly: {
            file: "cube.glb",
            format: "glb",
            url: "https://www.dl.dropboxusercontent.com/s/19dejw4whxyliid/dummyCube.glb"
        }
    },
    scenes: [
        {
            name: "mayaScene",
            file: "mayaScene.fbx",
            format: "fbx",
            url: "https://www.dl.dropboxusercontent.com/s/etyt4mo4j4mlggi/dummyCube_scene.fbx"
        },
        {
            name: "customScene1",
            file: "customScene1.json",
            format: "json",
            url: "https://www.dl.dropboxusercontent.com/s/o539exljg64u18a/mayaScene.json"
        }
    ],
    environments: [
        {
            name: "studio2",
            file: "studio2.hdr",
            format: "hdr",
            url: "https://www.dl.dropboxusercontent.com/s/o0v07nn5egjrjl5/studio2.hdr"
        }
    ],
    textures: {
        personalization: [
            {
                name: "left",
                textures: {
                    base: {
                        high_quality: {
                            file: "base.png",
                            format: "png",
                            size: 1024,
                            url: "https://www.dl.dropboxusercontent.com/s/ycrvwenyfqyo2j9/pattern.jpg"
                        },
                        low_quality: {
                            file: "base.png",
                            format: "png",
                            size: 128,
                            url: "..."
                        }
                    },
                    displacement: {
                        high_quality: {
                            file: "displacement.jpg",
                            format: "jpg",
                            size: 1024,
                            url: "https://www.dl.dropboxusercontent.com/s/wf8d1nzuizku3dm/height_map_test.jpg"
                        }
                    }
                }
            },
            {
                name: "right",
                textures: {
                    base: {
                        high_quality: {
                            file: "floral.jpg",
                            format: "jpg",
                            size: 1024,
                            url: "https://www.dl.dropboxusercontent.com/s/8lymsw99w8strpd/floral.jpg"
                        }
                    }
                }
            }
        ]
    }
};

const scene = {
    name: "mayaScene",
    environment: "studio2",
    camera: {},
    cameraLookAt: {},
    zoom: {}
    // ...
};

const csr = {
    renderer: {
        outputEncoding: null
    },
    useDracoLoader: true,
    dracoLoaderDecoderPath: "",
    dracoLoaderDecoderFallbackPath: "",
    personalization: [
        {
            name: "left",
            enabled: true,
            material: {
                wireframe: true,
                color: "#ff0000"
            },
            position: { x: -10, y: -7, z: 0 }
        },
        {
            name: "right",
            enabled: true,
            material: {
                color: "#0000ff"
            },
            position: { x: 10, y: -10, z: 0 }
        }
    ]
};

config.assets = assets;
config.scene = scene;
config.csr = csr;

imagem

Initials example:

https://user-images.githubusercontent.com/22588915/194825640-09fc31ff-3805-4075-b29c-98e194d07346.mp4

Debug Tools:

https://user-images.githubusercontent.com/22588915/194886822-29ea78e3-10b0-43e7-ac28-ad21bfca960b.mp4