Draw Japan Flag Using TSL - Threejs Shading language

Learn More about the japanese Flag → https://en.wikipedia.org/wiki/Flag_of_Japan

import "./style.css"
import * as THREE from 'three/webgpu';
import { abs, color, convertColorSpace, float, Fn, If, positionLocal, texture, rotateUV, time, vec2, fract, vec3, mix } from "three/tsl";
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'


const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  10
)
camera.position.z = 1

const renderer = new THREE.WebGPURenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.setAnimationLoop(animate);


window.addEventListener('resize', function () {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
})

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true

const material = new THREE.NodeMaterial();


const shaderMain = Fn(() => {
  const p = positionLocal.toVar(); // we do this to create a variable of positionLocal which is immutable
  const mask = p.length().step(0.5);

  const red = vec3(0.737, 0.0, 0.176)

  const white = vec3(1);

  return mix(red, white, mask);
})

material.fragmentNode = convertColorSpace(
  shaderMain(),
  THREE.SRGBColorSpace,
  THREE.LinearSRGBColorSpace,
)

material.side = THREE.DoubleSide;



const mesh = new THREE.Mesh(new THREE.PlaneGeometry(3, 2), material);



scene.add(mesh);

renderer.debug.getShaderAsync(scene, camera, mesh).then((e) => {
  console.log(e.vertexShader)
  console.log(e.fragmentShader)
})


function animate() {
  controls.update()
  renderer.render(scene, camera);
}

Result →

###