multi_render_blender/src/renderer/scripts/RenderSettings.js

const RenderSettings = {
    obj_settings: null,

    init: () => {
        RenderSettings.obj_settings = {
            str_engine: "CYCLES",
            nb_samples: 128,
            str_device: "GPU",
            is_denoise: true,
            is_film_transparent: false,
            nb_resolution_percentage: 100,
        };
    },

    set_from_blend: (obj_render) => {
        if (!obj_render) {
            return;
        }

        let obj_s = RenderSettings.obj_settings;
        obj_s.str_engine = obj_render.str_engine || "CYCLES";
        obj_s.nb_resolution_percentage = obj_render.nb_resolution_percentage || 100;
        obj_s.is_film_transparent = !!obj_render.is_film_transparent;

        if (obj_render.str_cycles_device) {
            obj_s.str_device = obj_render.str_cycles_device;
        }
        if (obj_render.is_cycles_denoise !== undefined) {
            obj_s.is_denoise = obj_render.is_cycles_denoise;
        }

        if (obj_render.nb_cycles_samples !== undefined) {
            obj_s.nb_samples = obj_render.nb_cycles_samples;
        } else if (obj_render.nb_eevee_samples !== undefined) {
            obj_s.nb_samples = obj_render.nb_eevee_samples;
        }

        RenderSettings.render();
    },

    set_from_config: (obj_config) => {
        if (!obj_config || !obj_config.obj_render_settings) {
            return;
        }

        let obj_src = obj_config.obj_render_settings;
        let obj_s = RenderSettings.obj_settings;
        if (obj_src.str_engine !== undefined) { obj_s.str_engine = obj_src.str_engine; }
        if (obj_src.nb_samples !== undefined) { obj_s.nb_samples = obj_src.nb_samples; }
        if (obj_src.str_device !== undefined) { obj_s.str_device = obj_src.str_device; }
        if (obj_src.is_denoise !== undefined) { obj_s.is_denoise = obj_src.is_denoise; }
        if (obj_src.is_film_transparent !== undefined) { obj_s.is_film_transparent = obj_src.is_film_transparent; }
        if (obj_src.nb_resolution_percentage !== undefined) { obj_s.nb_resolution_percentage = obj_src.nb_resolution_percentage; }

        RenderSettings.render();
    },

    get_settings: () => {
        return Object.assign({}, RenderSettings.obj_settings);
    },

    render: () => {
        let obj_container = document.getElementById("container_render_settings");
        if (!obj_container) {
            return;
        }

        let obj_s = RenderSettings.obj_settings;
        let is_cycles = obj_s.str_engine === "CYCLES";

        let str_html = '<div class="row g-2">'
            + '  <div class="col-12">'
            + '    <label class="form-label form-label-sm">Moteur de rendu</label>'
            + '    <select class="form-select form-select-sm bg-dark text-light border-secondary" id="select_engine">'
            + '      <option value="CYCLES"' + (obj_s.str_engine === "CYCLES" ? " selected" : "") + ">Cycles</option>"
            + '      <option value="BLENDER_EEVEE_NEXT"' + (obj_s.str_engine === "BLENDER_EEVEE_NEXT" ? " selected" : "") + ">EEVEE</option>"
            + '      <option value="BLENDER_EEVEE"' + (obj_s.str_engine === "BLENDER_EEVEE" ? " selected" : "") + ">EEVEE (Legacy)</option>"
            + '      <option value="BLENDER_WORKBENCH"' + (obj_s.str_engine === "BLENDER_WORKBENCH" ? " selected" : "") + ">Workbench</option>"
            + "    </select>"
            + "  </div>"
            + '  <div class="col-6">'
            + '    <label class="form-label form-label-sm">Samples</label>'
            + '    <input type="number" class="form-control form-control-sm bg-dark text-light border-secondary" id="input_samples" value="' + obj_s.nb_samples + '" min="1">'
            + "  </div>"
            + '  <div class="col-6">'
            + '    <label class="form-label form-label-sm">Resolution %</label>'
            + '    <input type="number" class="form-control form-control-sm bg-dark text-light border-secondary" id="input_res_percent" value="' + obj_s.nb_resolution_percentage + '" min="1" max="1000">'
            + "  </div>"
            + '  <div class="col-12' + (is_cycles ? "" : " d-none") + '" id="container_device">'
            + '    <label class="form-label form-label-sm">Device</label>'
            + '    <select class="form-select form-select-sm bg-dark text-light border-secondary" id="select_device">'
            + '      <option value="GPU"' + (obj_s.str_device === "GPU" ? " selected" : "") + ">GPU</option>"
            + '      <option value="CPU"' + (obj_s.str_device === "CPU" ? " selected" : "") + ">CPU</option>"
            + "    </select>"
            + "  </div>"
            + '  <div class="col-6">'
            + '    <div class="form-check form-check-sm mt-1">'
            + '      <input class="form-check-input" type="checkbox" id="check_denoise"' + (obj_s.is_denoise ? " checked" : "") + ">"
            + '      <label class="form-check-label" for="check_denoise">Denoising</label>'
            + "    </div>"
            + "  </div>"
            + '  <div class="col-6">'
            + '    <div class="form-check form-check-sm mt-1">'
            + '      <input class="form-check-input" type="checkbox" id="check_film_transparent"' + (obj_s.is_film_transparent ? " checked" : "") + ">"
            + '      <label class="form-check-label" for="check_film_transparent">Transparent</label>'
            + "    </div>"
            + "  </div>"
            + "</div>";

        obj_container.innerHTML = str_html;
        RenderSettings._bind_events();
    },

    _bind_events: () => {
        let obj_select_engine = document.getElementById("select_engine");
        let obj_input_samples = document.getElementById("input_samples");
        let obj_input_res_percent = document.getElementById("input_res_percent");
        let obj_select_device = document.getElementById("select_device");
        let obj_check_denoise = document.getElementById("check_denoise");
        let obj_check_transparent = document.getElementById("check_film_transparent");

        obj_select_engine.addEventListener("change", () => {
            RenderSettings.obj_settings.str_engine = obj_select_engine.value;
            let obj_device_container = document.getElementById("container_device");
            if (obj_select_engine.value === "CYCLES") {
                obj_device_container.classList.remove("d-none");
            } else {
                obj_device_container.classList.add("d-none");
            }
        });

        obj_input_samples.addEventListener("change", () => {
            RenderSettings.obj_settings.nb_samples = parseInt(obj_input_samples.value, 10) || 128;
        });

        obj_input_res_percent.addEventListener("change", () => {
            RenderSettings.obj_settings.nb_resolution_percentage = parseInt(obj_input_res_percent.value, 10) || 100;
        });

        obj_select_device.addEventListener("change", () => {
            RenderSettings.obj_settings.str_device = obj_select_device.value;
        });

        obj_check_denoise.addEventListener("change", () => {
            RenderSettings.obj_settings.is_denoise = obj_check_denoise.checked;
        });

        obj_check_transparent.addEventListener("change", () => {
            RenderSettings.obj_settings.is_film_transparent = obj_check_transparent.checked;
        });
    },
};