[ { "Title": "EffectComposer", "htmlName": "effectcomposer", "Description": "The base component for managing Post Processing effects on a <model-viewer> element.", "Attributes": [ { "name": "renderMode", "htmlName": "renderMode", "description": "This property sets the EffectComposer frame-buffer type to either UnsignedByteType if set to 'performance', or HalfFloatType if set to 'quality'. By setting this to 'quality', the effects under this EffectComposer will have access to high-precision buffers that are not limited to regular sRGB buffers, which have values clamped to [0.0, 1.0]. This can lead to noticeable improvements in color accuracy when used with the <color-grade-effect>, and reduce banding in dark scenes, especially with the <bloom-effect>.", "links": [ "Related examples" ], "default": { "default": "performance", "options": "performance, quality" } }, { "name": "msaa", "htmlName": "msaa", "description": "This property controls the number of samples used for the default Multi-Sample Anti Aliasing. Set this to any factor of 2 to enable - it is set to 0 by default (disabled). This is best for effect workflows that don't use the WebGLRenderer's depth buffer, such as <color-grade-effect>, <glitch-effect>, etc.
This antialiasing solution may not work well with <selective-bloom-effect>, <ssao-effect>, <outline-effect>, where it may introduce visual artifacting. If you use these effects you may prefer to use the <smaa-effect>.", "links": [ "Related examples" ], "default": { "default": "0", "options": "Any factor of 2" } } ], "Properties": [ { "name": "modelViewerElement", "htmlName": "modelViewerElement", "description": "This property is read-only. It return a reference to the parent <model-viewer> element if defined, otherwise it will throw an error." }, { "name": "selection", "htmlName": "selection", "description": "This read-only property provides access to a selection Set of all 3D objects in the scene of the <model-viewer> element. Selective effects such as <outline-effect> and <selective-bloom-effect> use this as a default selection.", "links": [ "selection example" ] }, { "name": "normalBuffer", "htmlName": "normalBuffer", "description": "This read-only property provides access to the built-in normalPass texture provided by the <effect-composer> for you to use with a custom effect that requires a normal texture." }, { "name": "userPasses", "htmlName": "userPasses", "description": "This read-only property returns a list of custom Passes added using the addPass() method." } ], "Methods": [ { "name": "addPass(pass: Pass , requireNormals?: boolean, requireDirtyRender?: boolean)", "htmlName": "addPass", "description": "Add a custom Pass implemented according to the Postprocessing Wiki. This method automatically sets the mainScene and mainCamera of the pass, which will be prepended before all other web-component effects. If your Pass uses the normalBuffer anywhere in its code, you must specify so by enabling requireNormals. Enable requireDirtyRender if the effect requires a render every frame, such as the <glitch-effect> for example. Significant performance impact from enabling this.", "links": [ "addPass example" ] }, { "name": "removePass(pass: Pass, dispose: boolean = true)", "htmlName": "removePass", "description": "Removes and optionally disposes of a pass added with addPass(). dispose is set to true by default, if you would like to reuse the pass somewhere else disable this." }, { "name": "queueRender()", "htmlName": "queueRender", "description": "Request a render-frame manually. The <effect-composer> and <model-viewer> However if you change any properties in your custom Passes and Effects the result might not re-render until the model or camera is moved by the user, so you should call this after updating any custom pass.", "links": [ "queueRender example" ] } ], "Events": [ { "name": "update-selection", "htmlName": "update-selection", "description": "This event is triggered whenever a new model is loaded by the parent <model-viewer> element, and the selection is updated with the new model components. Use this event make sure your custom selection is updated if a model changes.", "links": [ "selection example" ] } ] }, { "Title": "BloomEffect", "htmlName": "bloom", "Description": "This effect creates a glowing light-bleed effect around bright objects.", "Attributes": [ { "name": "strength", "htmlName": "strength", "description": "The strength of the bloom effect.", "default": { "default": "1", "options": "Any positive number" } }, { "name": "threshold", "htmlName": "threshold", "description": "The pixel brightness threshold below which objects will not glow.", "default": { "default": "1.0", "options": "A number in the range [0.0, 1.0]" } }, { "name": "radius", "htmlName": "radius", "description": "How far the light bleed extends.", "default": { "default": "0.85", "options": "A number in the range [0.0, 1.0]" } }, { "name": "smoothing", "htmlName": "smoothing", "description": "The roll-off of the light-bleed.", "default": { "default": "0.025", "options": "A number in the range [0.0, 1.0]" } } ] }, { "Title": "SelectiveBloomEffect", "htmlName": "selectivebloom", "Description": "This selective effect creates a glowing light-bleed effect around selected bright objects.", "Attributes": [ { "name": "strength", "htmlName": "strength", "description": "The strength of the bloom effect.", "default": { "default": "1", "options": "Any positive number" } }, { "name": "threshold", "htmlName": "threshold", "description": "The pixel brightness threshold below which objects will not glow.", "default": { "default": "1.0", "options": "A number in the range [0.0, 1.0]" } }, { "name": "radius", "htmlName": "radius", "description": "How far the light bleed extends.", "default": { "default": "0.85", "options": "A number in the range [0.0, 1.0]" } }, { "name": "smoothing", "htmlName": "smoothing", "description": "The roll-off of the light-bleed.", "default": { "default": "0.025", "options": "A number in the range [0.0, 1.0]" } } ] }, { "Title": "PixelateEffect", "htmlName": "pixelate", "Description": "This effect pixelates the entire scene.", "Attributes": [ { "name": "granularity", "htmlName": "granularity", "description": "The pixel size; draw one pixel for every granularity pixels. Higher value = lower resolution.", "default": { "default": "10", "options": "Any positive number" } } ] }, { "Title": "ColorGradeEffect", "htmlName": "colorgrade", "Description": "This effect alters the look of the entire scene.", "Attributes": [ { "name": "tonemapping", "htmlName": "tonemapping", "description": "The tonemapping of the scene. Due to the fact that in-built tonemapping cannot not applied to <model-viewer-effects> postprocessing, it is recommended to always add the <color-grade-effect> at the end of your postprocess pipeline, which sets the same default tonemapping to Aces Filmic.
", "default": { "default": "aces_filmic", "options": "reinhard, reinhard2, reinhard2_adaptive, optimized_cineon, aces_filmic, none" } }, { "name": "brightness", "htmlName": "brightness", "description": "The brightness of the entire canvas. 0.0 is the original brightness, 1.0 is completely white, -1.0 is completely black.", "default": { "default": "0.0", "options": "A number in the range [0.0, 1.0]" } }, { "name": "contrast", "htmlName": "contrast", "description": "The contrast of the entire canvas. 0.0 is no change, 1.0 is only black or white pixels, -1.0 is only grey pixels.", "default": { "default": "0.0", "options": "A number in the range [-1.0, 1.0]" } }, { "name": "saturation", "htmlName": "saturation", "description": "The saturation of the entire canvas. 0.0 is no change, 1.0 means all pixels are 100% saturation, -1.0 means all pixels are 0% saturation.", "default": { "default": "0.0", "options": "A number in the range [-1.0, 1.0]" } }, { "name": "hue", "htmlName": "hue", "description": "The hue color shift in radians of the entire canvas. 0.0 is no change, any higher value is a shift along the color wheel of hue radians. This property is wrapping, meaning that if you set it above the max it resets to the minimum and vice-versa.", "default": { "default": "0.0", "options": "A number in the range [0.0, 2 * PI]" } } ] }, { "Title": "OutlineEffect", "htmlName": "outline", "Description": "This selective effect draws outlines around selected objects.", "Attributes": [ { "name": "strength", "htmlName": "strength", "description": "The edge thickness.", "default": { "default": "1.0", "options": "Any positive number" } }, { "name": "color", "htmlName": "color", "description": "The edge color.", "default": { "default": "white", "options": "Any String or RGB #-hexadecimal Color." } }, { "name": "smoothing", "htmlName": "smoothing", "description": "The edge blur and roll-off.", "default": { "default": "1", "options": "A number in the range [0, 6]" } } ] }, { "Title": "GlitchEffect", "htmlName": "glitch", "Description": "This effect causes chromatic abberation and screen tearing glitches on the scene.", "Attributes": [ { "name": "strength", "htmlName": "strength", "description": "The strength of the glitches. Higher value means more significant glitches.", "default": { "default": "0.5", "options": "A number in the range [0.0, 1.0]" } }, { "name": "mode", "htmlName": "mode", "description": "The rate of the glitches. Sporadic glitches occur once every 1.0-3.5 seconds, and last between 0.5-1.0 seconds. Constant glitches have no delay, and is best used with very low strength values", "default": { "default": "sporadic", "options": "sporadic, constant" } } ] }, { "Title": "SSAOEffect", "htmlName": "ssao", "Description": "This effect simulates soft shadows in between geometries in the scene.", "Attributes": [ { "name": "strength", "htmlName": "strength", "description": "The strength of the shadow occlusions. Higher value means darker shadows.", "default": { "default": "2.0", "options": "Any positive number" } } ] }, { "Title": "SMAAEffect", "htmlName": "smaa", "Description": "This effect runs Subpixel Morphological Antialiasing (SMAA) on the scene.", "Attributes": [ { "name": "quality", "htmlName": "quality", "description": "The quality of the anti-aliasing. Higher quality is less performant.", "default": { "default": "medium", "options": "low, medium, high, ultra" } } ] }, { "Title": "BlendMode", "htmlName": "blendmodemixin", "Description": "This mixin provides blending attributes for all built-in <model-viewer-effect> effects.", "Mixin": [ { "name": "Used By", "htmlName": "usedBy", "description": "Bloom Effect, Selective Bloom Effect, Pixelate Effect, Color Grade Effect, Outline Effect, Glitch Effect, SSAO Effect, SMAA Effect, FXAA Effect" } ], "Attributes": [ { "name": "blend-mode", "htmlName": "blend-mode", "description": "This attribute controls the function used to blend the effect with the base render. Note that unlike the wiki link below, setting this to skip actually does disable the effect completely.", "links": [ "blend-mode example" ], "default": { "default": "default", "options": "Any value from the Postprocessing Wiki, or default" } }, { "name": "opacity", "htmlName": "opacity", "description": "The opacity of the effect that will be blended with the base render.", "links": [ "opacity example" ], "default": { "default": "1.0", "options": "A number in the range [0.0, 1.0]" } } ] }, { "Title": "Selective", "htmlName": "selectivemixin", "Description": "This mixin provides selective capabilities, making effects affect only certain parts of a scene.", "Mixin": [ { "name": "Used By", "htmlName": "usedBy", "description": "Selective Bloom Effect, Outline Effect" } ], "Attributes": [ { "name": "selection", "htmlName": "selection", "description": "This attribute controls the selected objects to be affected. If no value is provided, the default selection is used.", "links": [ "selection example" ], "default": { "default": "selection", "options": "An array of loaded object names or references" } } ] } ]