Proper Video Player Documentation

Shader Effects

The optional demo content includes seven UGUI-compatible shaders in Demo/Shaders/. Assign their materials to the player's output RawImage, or use the shaders as implementation examples. The interactive demo exposes their main properties as controls.

Included shaders#

ShaderEffectMaterial properties
ProperVideoPlayer/Demo/WaveRippleAnimated two-axis wave distortion._Amplitude, _Frequency, _Speed
ProperVideoPlayer/Demo/BulgeCentered bulge or pinch distortion._Strength, _Radius
ProperVideoPlayer/Demo/CRTScreen curvature, scanlines, chromatic separation, and vignette._Curvature, _ScanlineIntensity, _Aberration
ProperVideoPlayer/Demo/GlitchAnimated row displacement and color-channel separation._Intensity, _Speed, _BlockSize
ProperVideoPlayer/Demo/LensCursor-controlled magnifying lens._Radius, _Magnification
ProperVideoPlayer/Demo/RippleTouchCursor response with up to three concurrent click ripples._Strength, _Speed, _RingWidth
ProperVideoPlayer/Demo/SpotlightCursor-controlled spotlight with a softened edge._Radius, _Softness, _Darkness

MouseFXDriver#

MouseFXDriver supplies input to Lens, RippleTouch, and Spotlight. Assign the active runtime material to TargetMaterial. Each frame, the driver converts the pointer position to the RawImage texture-coordinate space and sets _MouseUV and _Now. Clicks populate _Ripple0, _Ripple1, and _Ripple2 in round-robin order.

The conversion applies the RawImage.uvRect, including the vertical flip used by the WebGL backend.

Applying an effect#

Create a material instance before changing properties at runtime. Modifying the shared material asset changes every object that uses it.

private Material _effectMaterial;

private void Awake()
{
    _effectMaterial = new Material(crtMaterial);
    outputImage.material = _effectMaterial;
    _effectMaterial.SetFloat("_Curvature", 0.5f);
    _effectMaterial.SetFloat("_ScanlineIntensity", 0.4f);
}

private void OnDestroy()
{
    if (_effectMaterial != null)
        Destroy(_effectMaterial);
}

Custom UI shaders#

  • ProperVideoPlayer applies the required WebGL flip through RawImage.uvRect. RawImage includes that transform in its mesh UVs, so a material assigned to the image should not apply an additional vertical flip.
  • Distortion can move UV coordinates outside the 0–1 range. The video texture uses clamp addressing, so out-of-range samples repeat edge pixels. Clamp or mask coordinates when that behavior is not appropriate.
  • The included shaders support UGUI stencil masking, RectMask2D clipping, alpha clipping, and color masks. Retain the corresponding UI shader properties and variants when adapting them.