Comments (16)
There are many names people use Scene + Renderer, Engine, World.
from pex-renderer.
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.
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.
Maybe it's just defaultSystems
const systems = defaultSystems()
ctx.frame(() => {
systems.update(entities)
})
from pex-renderer.
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.
So systems
is already taken by internal pex-render namespace.
from pex-renderer.
Is it engine
then?
const engine = defaultEngine()
ctx.frame(() => {
engine.update(entities)
})
from pex-renderer.
Or SystemGroup
. Which can be a system by itself, running a list of systems.
from pex-renderer.
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.
@dmnsgn and would nodes have Scene
and DefaultEngine
in this case?
from pex-renderer.
@dmnsgn and would nodes have
Scene
andDefaultEngine
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.
@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.
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.
To document thinking process especially in the context of Nodes
DefaultEngine
- pretends it to be a bit more than it is?
DefaultSystems
undersells it as it is also a renderer
DefaultRenderer
is not accurate as it has systems inside and multiple renderers (standard/pbr, lines, particles etc)
from pex-renderer.
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.
Implemented in https://github.com/pex-gl/pex-renderer/blob/304-port-to-ecs/render-engine.js
from pex-renderer.
Related Issues (20)
- material.id is missing and leads to cache issues HOT 4
- Improve reflection probes seams HOT 3
- Move shaders back to pex-shaders
- MSAA Antialiasing
- Layer system
- Reflection map prefiltering improvements HOT 5
- Provide default values when creating light components HOT 1
- Add support for attribute.dirty HOT 2
- Allow shadow map size customisation HOT 1
- Prevent camera helper rendering when rendering from the same entity camera component
- Renderer crashes on directional lights that don't cast shadows HOT 1
- Something is broken
- Directional light entity helper should not grow with light intensity HOT 9
- Maximum call stack size exceeded HOT 3
- Add basic render engine example
- Default skybox sunPosition HOT 1
- PostProcessing cleanup HOT 1
- Add custom attributeMap
- Camera clear color should be in linear space HOT 1
- [v4] material receiveShadows is not used
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pex-renderer.