# Optimized Rendering
# What is Optimized Rendering?
While games and other 3D applications can typically get away with rendering as many frames as possible when they're running on powerful devices with dedicated GPUs, applications built for the web quite often run on much less powerful decices – and brute-force rendering like that is a surefire way to quickly spin up their fans, drain their batteries, and frustrate their users.
It's good to be a bit smarter about this, and three-elements helps you with this through a feature called "Optimized Rendering".
Optimized Rendering is enabled by default and basically makes sure that new frames are only rendered when they have been requested.
For this, each element provided by three-elements provides a requestFrame
function that can be called to tell the game loop that a frame should be rendered on this tick. Typically, you will want to call when you've changed something in the scene. For example, let's say you have a mesh with an onclick
handler:
<three-mesh
onclick="this.object.rotateZ(0.4); this.requestFrame()"
></three-mesh>
If you were to omit the call to requestFrame
, the object would still be updated when the user clicks on it, but this change would not be rendered.
requestFrame
will also automatically be called for you when one of the attributes of an element has changed (as opposed to a Three.js object property having been mutated), assuming that this is an external change coming from your framework, and not the element's ticking or input handling code.
TIP
Calls to requestFrame
are idempotent; they don't immediately render a frame, but just tell the main loop that it should render one once it has finished executing all ticker callbacks. You can call it as many times as you want, and it will only ever result in a single frame being rendered.
# The frame-tick
ticker event
You've already met tick
and late-tick
, but there's a third ticker event called frame-tick
! It works just like the other events, with one important difference: it is only executed on ticks where a frame has been requested to render. This is useful for code that you only want to execute when you're rendering a new frame anyway; for example, you may only want to move the game's camera when the player character has also moved (triggering a call to requestFrame
.)
TIP
Just like with the other ticker events, you can configure callbacks through either the frame-tick
attribute or the frameTick
property.
# Disabling Optimized Rendering
Sometimes you may not care about Optimized Rendering, so three-element makes it easy to opt out of it. Simply set the autorender
attribute on the <three-game>
tag, like this:
<three-game autorender></three-game>
Your game will now render a new frame on every tick, and ignore all calles to requestFrame
.