Embed API

You can embed shaders (that are hosted on shadered.org) into your own website.

Add an iframe with src set to shadered.org/embed?id=ENTER_ID_HERE to your website.

There are some additional parameters that you can set in the url:

Name Description
rotate set to 1 if you want your camera to rotate around the origin
ui_controls set to 0 if you want to hide bottom bar (which contains various controls)
ui_title set to 0 if you want to hide top bar (which contains project’s title)
ui_variables set to 0 if you want to hide the menu that contains variables
pin_ui_controls set to 1 if you want the bottom bar to be always visible
paused set to 1 if you want the preview to be paused on startup
mouse set to 0 if you want to disable mouse controls

Javascript functions

You can also call these Javascript functions:


Pauses the preview.


Resumes the preview.

Returns:true if the preview is paused
Return type:bool
setVariable(name, array)

Change the value of a pinned variable.

  • name (string) – Name of the variable whose value we want to change
  • array (array) – either a int or float array - a new value

Get list of all pinned variables.

Returns:list containing variable names
Return type:StringVector

Get the type of the variable

pushShader(pass, stage, glslesSource)

Update the GLSL ES source code of a shader pass

getShader(pass, stage)

Get shader code.


Get list of all shader passes

Returns:list containing shader pass names
Return type:StringVector

Increase the time by t.


Set elapsed time to 0.0


Get elapsed time


Get current FPS


Get preview width


Get preview height


Get vertex shader’s entry function name


Get pixel shader’s entry function name

The iframe will also send a ‘onprojectinit’ message once the .sprj has been fully loaded.

Website pinned variables