Blur Sepia

Unity 6.3 introduced support for svg/vector assets and uss filters. Respective info: here and here .

This is a super quick tutorial on how to load svgs and apply uss filters in OneJS.

Loading SVGs

Because svg/vector assets are natively supported in Unity now, loading them is as easy as loading any other texture assets.


import { Resources } from "UnityEngine"
 
// Assuming you have a jellyfish-icon.svg inside a Resources folder
const jellyfishIcon = Resources.Load("jellyfish-icon")

Applying USS Filters

You can apply uss filters by using inline styles, static uss files, or runtime USS.


{/* inline styling */}
<div style={{ filter: "blur(20px)" }}>Blurred Content</div>


/* static uss file */
.blur {
    filter: blur(20px);
}


// runtime uss
document.addRuntimeUSS(`
    .blur {
        filter: blur(20px);
    }
`)

Full Example Code

index.tsx


import { h, render } from "preact"
import { Slider } from "onejs-comps"
import { Resources, Texture2D } from "UnityEngine"
import { useEffect, useRef, useState } from "onejs-preact/hooks"
 
// Included by the OneJS/Samples/Resources folder
const dracula = Resources.Load("OneJS/vampire-dracula") as Texture2D
const minecraft = Resources.Load("OneJS/minecraft") as Texture2D
 
const App = () => {
    const blurTargetRef = useRef<Element>()
    const sepiaTargetRef = useRef<Element>()
    const [blurAmount, setBlurAmount] = useState(0)
    const [sepiaPercent, setSepiaPercent] = useState(0)
 
    useEffect(() => {
        blurTargetRef.current!.style.filter = `blur(${blurAmount}px)`
    }, [blurAmount])
 
    useEffect(() => {
        sepiaTargetRef.current!.style.filter = `sepia(${sepiaPercent}%)`
    }, [sepiaPercent])
 
    return <div class="w-full h-full p-20">
        <div class="w-full h-full flex flex-row">
            <div class="w-[50%] h-full flex flex-col relative">
                <div ref={blurTargetRef} class="w-full h-full flex justify-center items-center absolute">
                    <div class="w-[400px] h-[400px]" style={{ backgroundImage: dracula }}></div>
                </div>
                <div class="w-full h-full px-32 flex flex-col justify-end pb-10">
                    <Slider class="w-full" onChange={setBlurAmount} value={blurAmount} min={0} max={50} />
                    <div class="text-white text-6xl items-center p-10">Blur</div>
                </div>
            </div>
            <div class="w-[50%] h-full flex flex-col relative">
                <div ref={sepiaTargetRef} class="w-full h-full flex justify-center items-center absolute sepia">
                    <div class="w-[400px] h-[400px] border-2 border-yellow-800" style={{ backgroundImage: minecraft, unityBackgroundScaleMode: "ScaleAndCrop" }}></div>
                </div>
                <div class="w-full h-full px-32 flex flex-col justify-end pb-10">
                    <Slider class="w-full" onChange={setSepiaPercent} value={sepiaPercent} min={0} max={100} />
                    <div class="text-white text-6xl items-center p-10">Sepia</div>
                </div>
            </div>
        </div>
    </div>
}
 
render(<App />, document.body)

Please keep in mind that these engine features are still experimental and have limitations or bugs. We are specfically hopeful for Unity to fix the scaling issue with uss filters and add convenience method(s) to parse/load svgs at runtime. For now, enjoy playing around with these new features in OneJS!