Code Monkey home page Code Monkey logo

Comments (16)

vorg avatar vorg commented on June 16, 2024

There are many names people use Scene + Renderer, Engine, World.

from pex-renderer.

vorg avatar vorg commented on June 16, 2024

The most logical name would be defaultRenderer but wink wink it would actually consist of both systems and renderers so it is not accurate.

from pex-renderer.

vorg avatar vorg commented on June 16, 2024
const ecs = defaultSetup()

ctx.frame(() => {
  ecs.update(entities)
})
const app = defaultSetup()

ctx.frame(() => {
  app.update(entities)
})
const engine = defaultSetup()

ctx.frame(() => {
  engine.update(entities)
})

from pex-renderer.

vorg avatar vorg commented on June 16, 2024

Maybe it's just defaultSystems

const systems = defaultSystems()

ctx.frame(() => {
  systems.update(entities)
})

from pex-renderer.

vorg avatar vorg commented on June 16, 2024

To clarify this is what the "default setup" looks like

module.exports = (node, graph) => {
  const {
    systems,
    renderGraph: createRenderGraph,
    resourceCache: createResourceCache,
  } = require("pex-renderer");

  const triggerIn = node.triggerIn("in");
  const triggerOut = node.triggerOut("out");

  const ctx = graph.ctx;

  const renderGraph = createRenderGraph(ctx);
  const resourceCache = createResourceCache(ctx);

  const renderPipelineSystem = systems.renderPipeline({
    ctx: graph.ctx,
    outputEncoding: graph.ctx.Encoding.Gamma,
    resourceCache,
    renderGraph,
  });

  const standardRendererSystem = systems.renderer.standard({
    ctx,
    resourceCache,
    renderGraph,
  });
  const basicRendererSystem = systems.renderer.basic({
    ctx,
    resourceCache,
    renderGraph,
  });
  const lineRendererSystem = systems.renderer.line({
    ctx,
    resourceCache,
    renderGraph,
  });
  const helperRendererSys = systems.renderer.helper({ ctx });
  const skyboxRendererSys = systems.renderer.skybox({ ctx });

  triggerIn.onTrigger = (props) => {
    const { entities, renderWidth, renderHeight } = props;
    resourceCache.beginFrame();
    renderGraph.beginFrame();

    const cameraEntity = entities.find((e) => e.camera);

    const renderView = {
      camera: cameraEntity.camera,
      cameraEntity: cameraEntity,
      viewport: [0, 0, renderWidth, renderHeight],
    };

    node.comment = cameraEntity.camera.fov + "\n" + renderView.viewport;

    renderPipelineSystem.update(props.entities, {
      renderView,
      renderers: [
        standardRendererSystem,
        // basicRendererSystem,
        lineRendererSystem,
        skyboxRendererSys,
        // helperRendererSys,
      ],
    });

    renderGraph.endFrame();
    resourceCache.endFrame();

    // node.comment = props.entities.length;

    triggerOut.trigger(props);
  };
};

from pex-renderer.

vorg avatar vorg commented on June 16, 2024

So systems is already taken by internal pex-render namespace.

from pex-renderer.

dmnsgn avatar dmnsgn commented on June 16, 2024

Is it engine then?

const engine = defaultEngine()

ctx.frame(() => {
  engine.update(entities)
})

from pex-renderer.

dmnsgn avatar dmnsgn commented on June 16, 2024

Or SystemGroup. Which can be a system by itself, running a list of systems.

from pex-renderer.

vorg avatar vorg commented on June 16, 2024

SystemGroup would still need to contain logic about system order and renderers to provide each system. In this case we could return compositeSystem so system made out of systems aka object implementing update() method

OR

we just push renderers to one long systems array and do

const defaultSystems = defaultSetup()
defaultSystems.forEach((system) => {
   system.update(entities, defaultSystems)
})

assuming that renderer systems have empty update method and that renderPipeline can find renderer systems on it's own (by checking renderStage prop)

from pex-renderer.

vorg avatar vorg commented on June 16, 2024

@dmnsgn and would nodes have Scene and DefaultEngine in this case?

from pex-renderer.

dmnsgn avatar dmnsgn commented on June 16, 2024

@dmnsgn and would nodes have Scene and DefaultEngine in this case?

Scene and Engine


Am I missing a piece of the puzzle or would this work?

pex-renderer/systems/engine.js

export default function engine(ctx) {
  const renderGraph = createRenderGraph(ctx);
  const resourceCache = createResourceCache(ctx);

  const renderPipelineSystem = systems.renderPipeline({
    ctx,
    outputEncoding: ctx.Encoding.Gamma,
    resourceCache,
    renderGraph,
  });

  const standardRendererSystem = systems.renderer.standard({
    ctx,
    resourceCache,
    renderGraph,
  });
  const lineRendererSystem = systems.renderer.line({
    ctx,
    resourceCache,
    renderGraph,
  });
  const helperRendererSys = systems.renderer.helper({ ctx });
  const skyboxRendererSys = systems.renderer.skybox({ ctx });

  const renderers = [
    standardRendererSystem,
    lineRendererSystem,
    skyboxRendererSys,
    helperRendererSys,
  ];

  return {
    renderers,
    update(entities, { viewport }) {
      resourceCache.beginFrame();
      renderGraph.beginFrame();

      const cameraEntity = entities.find((e) => e.camera);

      const renderView = {
        camera: cameraEntity.camera,
        cameraEntity: cameraEntity,
        viewport,
      };

      renderPipelineSystem.update(entities, { renderView, renderers });

      renderGraph.endFrame();
      resourceCache.endFrame();
    },
  };
}

app.js

import { engineSystem } from "pex-renderer";
const engine = engineSystem({ ctx });

const entities = []
// entities.push(entity);

ctx.frame(() => {
  engine.update(entities);
})

Or are you saying it is not clean to update a system (renderPipelineSystem) inside another system (engineSystem)?

from pex-renderer.

vorg avatar vorg commented on June 16, 2024

@dmnsgn you are not. It's exactly what i've implemented today
https://github.com/pex-gl/pex-renderer/blob/304-port-to-ecs/default-engine.js
https://github.com/pex-gl/pex-renderer/blob/304-port-to-ecs/examples/basic-engine.js

const engine = createDefaultEngine({ ctx });

ctx.frame(() => {
  const now = Date.now();
  const deltaTime = (now - prevTime) / 1000;
  prevTime = now;

  const cameraEntity = world.entities.find((e) => e.camera);

  engine.update(world.entities, deltaTime);
  engine.render(world.entities, cameraEntity);

  gui.draw();
});

It's just "engine" is not a word i've used in 10 years. And the package is not pex-engine but pex-renderer despite actually doing engine's work. So it feels like we are using concept that is bigger than the library itself.

I also quite like the look of helpers example (currently no longer running) but it implies that systems can setup themselves and find their dependencies (other systems and renderers)

world.addSystem(systems.geometry({ ctx }));
world.addSystem(systems.animation());
world.addSystem(systems.transform());
world.addSystem(systems.camera());
world.addSystem(systems.skybox({ ctx }));
world.addSystem(systems.reflectionProbe({ ctx }));
world.addSystem(systems.renderer({ ctx, outputEncoding: ctx.Encoding.Gamma }));
world.addSystem(systems.helper({ ctx }));

...

ctx.frame(() => {
  world.update();
  gui.draw();
});

from pex-renderer.

vorg avatar vorg commented on June 16, 2024

There is also a question of how much of a kitchen sink that "engine" thing should be and should it handle:

  • deltaTime calculation (overwrite-able for use in Nodes)
  • window resizing (again should be possible to disable for Nodes)
  • disposing of the resources

from pex-renderer.

vorg avatar vorg commented on June 16, 2024

To document thinking process especially in the context of Nodes

Screenshot 2022-09-22 at 11 59 40
DefaultEngine - pretends it to be a bit more than it is?

Screenshot 2022-09-22 at 11 59 21
DefaultSystems undersells it as it is also a renderer

Screenshot 2022-09-22 at 11 59 55
DefaultRenderer is not accurate as it has systems inside and multiple renderers (standard/pbr, lines, particles etc)

from pex-renderer.

vorg avatar vorg commented on June 16, 2024

So maybe it should be GraphicsEngine - not a game engine and not just a renderer either as geometrySystem, animationSystem etc are part of defining "graphics". Or even better RenderEngine.

from pex-renderer.

vorg avatar vorg commented on June 16, 2024

Implemented in https://github.com/pex-gl/pex-renderer/blob/304-port-to-ecs/render-engine.js

from pex-renderer.

Related Issues (20)

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.