<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>three.js &#8211; Deep Core Labs</title>
	<atom:link href="https://deepcorelabs.com/category/three-js/feed/" rel="self" type="application/rss+xml" />
	<link>https://deepcorelabs.com</link>
	<description>Building Extraordinary Brands</description>
	<lastBuildDate>Mon, 03 Aug 2026 19:41:06 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://deepcorelabs.com/wp-content/uploads/2015/09/deep-core-labs-logo-small-50x50.png</url>
	<title>three.js &#8211; Deep Core Labs</title>
	<link>https://deepcorelabs.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Normal Map Rotation Tool (V4 is here)</title>
		<link>https://deepcorelabs.com/normal-map-rotation-tool-v4-is-here/</link>
					<comments>https://deepcorelabs.com/normal-map-rotation-tool-v4-is-here/#respond</comments>
		
		<dc:creator><![CDATA[Miro Hristov]]></dc:creator>
		<pubDate>Mon, 03 Aug 2026 19:32:30 +0000</pubDate>
				<category><![CDATA[3D]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[three.js]]></category>
		<guid isPermaLink="false">https://deepcorelabs.com/?p=5275</guid>

					<description><![CDATA[Back in 2021 I wrote about the problem that started this whole thing: rotate a normal map in Photoshop, GIMP, or any regular image editor, and you don&#8217;t get a...]]></description>
										<content:encoded><![CDATA[<a class="nectar-button n-sc-button large accent-color regular-button"  href="https://deepcorelabs.com/tools/normal-map-rotation/" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff"><span>Launch Normal Map Rotator Tool V4 (Online)</span></a>
<p>Back in 2021 I wrote about the problem that started this whole thing: rotate a normal map in Photoshop, GIMP, or any regular image editor, and you don&#8217;t get a rotated normal map — you get a <em>broken</em> one. Regular rotation just spins pixels around; it has no idea that the R/G/B channels in a normal map actually encode a direction in 3D space. The result is lighting that looks subtly (or not so subtly) inverted.</p>
<p>The <a href="https://deepcorelabs.com/tools/normal-map-rotation/v1/">original tool</a> solved that by rotating the <em>vectors</em>, not just the pixels. That core idea hasn&#8217;t changed since — what you&#8217;re reading about now is V4, the latest step in a line that&#8217;s been quietly improving through V1, V2, and V3. Each old version stays live if you need it (<code>/v1</code>, <code>/v2</code>, <code>/v3</code>); the main link always redirects to whatever&#8217;s newest, which is <a href="https://deepcorelabs.com/tools/normal-map-rotation/v">V4</a> as of this post.</p>
<h2>The short version</h2>
<ul>
<li>Way more file formats: <strong>TGA, TIFF, and PSD</strong> now open directly, no conversion needed first</li>
<li>The tool now warns you if what you dropped in <strong>doesn&#8217;t actually look like a normal map</strong></li>
<li>Full <strong>OpenGL / DirectX</strong> standard support, with auto-detection and a reference table for 20+ engines</li>
<li>New <strong>blue channel modes</strong> for working with RG/BC5-style maps</li>
<li>Rotation is now pixel-accurate — no more jagged edges, no more scaling drift on export</li>
<li>A redesigned dark UI with a proper rotation dial, flip controls, angle snapping, and paste-to-load</li>
</ul>
<p>Here&#8217;s the full breakdown.</p>
<h2>Bring in almost anything</h2>
<p>Previously you could only load formats the browser natively understands (PNG, JPG, WebP&#8230;). V4 decodes several more right on your machine:</p>
<ul>
<li><strong>TGA</strong> and <strong>TIFF</strong> — decoded client-side, nothing uploaded to a converter first</li>
<li><strong>PSD</strong> — open the flattened composite, or pick specific layers to merge, with options to select all/visible/none and trim to opaque pixels only</li>
</ul>
<p>On load, the tool also runs a quick sanity check on the image and gives you a heads-up if it looks like an RG/BC5 map with no blue data, a regular photo, grayscale art, or otherwise doesn&#8217;t look like a normal map at all — before you spend time rotating the wrong thing.</p>
<h2>Getting the math right</h2>
<p>This is still the heart of the tool, and it got more capable:</p>
<ul>
<li><strong>OpenGL (+Y) vs. DirectX (-Y)</strong> — pick your target engine&#8217;s convention and rotation is computed with the correct handedness. A built-in reference table covers Unreal, Unity, Blender, Maya, Substance Painter, Marmoset, and a dozen more, so you don&#8217;t have to remember which is which.</li>
<li><strong>Auto-detection</strong> — the tool scans uploaded files for authoring-tool fingerprints (like DirectXTex) and switches the standard for you when it can tell.</li>
<li><strong>Blue channel modes</strong> — &#8220;As stored,&#8221; &#8220;RG → RGB&#8221; (reconstructs Z for BC5-style maps that don&#8217;t store blue), and &#8220;RGB → RG&#8221; (blanks blue back out). Handy if you&#8217;re moving textures between pipelines that disagree on this.</li>
<li><strong>No more jaggies</strong> — rotation now handles alpha correctly, so edges rotate smoothly instead of fringing.</li>
<li><strong>Pixel-exact exports</strong> — downloaded PNGs now match your source resolution exactly; they used to get inflated by display scaling.</li>
</ul>
<h2>A dial that actually feels like one</h2>
<p>The whole interface got a pass:</p>
<ul>
<li>Dark theme throughout, with a rotation knob whose background stays still while just the indicator spins — much easier to track your angle at a glance</li>
<li>Click the angle readout to type an exact value instead of dragging</li>
<li>Angle snapping (0°, 1°, 5°, 15°, 45°, 90°) plus horizontal/vertical flip</li>
<li>A vector-strength slider for dialing intensity up or down, with a reset that only shows up when you&#8217;ve actually changed it</li>
<li>Drop, browse, or <strong>paste</strong> an image straight from your clipboard</li>
<li>Toast notifications instead of blocking alert popups</li>
</ul>
<h2>Try it</h2>
<p>The tool is free and runs entirely in your browser: <a class="nectar-button n-sc-button large accent-color regular-button"  href="https://deepcorelabs.com/tools/normal-map-rotation/" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff"><span>Normal Map Rotator Tool V4 (Online)</span></a>
<h2><a href="https://deepcorelabs.com/normal-map-rotation-tool-online/"><img fetchpriority="high" decoding="async" class="alignnone size-full wp-image-5276" src="https://deepcorelabs.com/wp-content/uploads/2026/08/normal-map-rotation-tool-online-v4.jpg" alt="" width="1400" height="1217" srcset="https://deepcorelabs.com/wp-content/uploads/2026/08/normal-map-rotation-tool-online-v4.jpg 1400w, https://deepcorelabs.com/wp-content/uploads/2026/08/normal-map-rotation-tool-online-v4-300x261.jpg 300w, https://deepcorelabs.com/wp-content/uploads/2026/08/normal-map-rotation-tool-online-v4-1024x890.jpg 1024w, https://deepcorelabs.com/wp-content/uploads/2026/08/normal-map-rotation-tool-online-v4-768x668.jpg 768w" sizes="(max-width: 1400px) 100vw, 1400px" /></a></h2>
<p>As always — if you hit a format it doesn&#8217;t handle or a standard it gets wrong, let me know.</p>
<p>If the tool saves you some time and you&#8217;d like to support development, consider buying me a &#8220;coffee&#8221;</p>
<p>Special thanks to the one person who donated! You are the best! Cheers! <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f37b.png" alt="🍻" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f64f-1f3fb.png" alt="🙏🏻" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
<p><script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script><br />
<script>
  kofiWidgetOverlay.draw('mirohristov', {
    'type': 'floating-chat',
    'floating-chat.donateButton.text': '"Coffee"',
    'floating-chat.donateButton.background-color': '#ff5f5f',
    'floating-chat.donateButton.text-color': '#fff'
  });
</script></p>
]]></content:encoded>
					
					<wfw:commentRss>https://deepcorelabs.com/normal-map-rotation-tool-v4-is-here/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Green Difference Studio — Free Online Green Screen &#038; Chroma Key Tool in Your Browser</title>
		<link>https://deepcorelabs.com/green-difference-studio-free-online-green-screen-chroma-key-tool-in-your-browser/</link>
					<comments>https://deepcorelabs.com/green-difference-studio-free-online-green-screen-chroma-key-tool-in-your-browser/#respond</comments>
		
		<dc:creator><![CDATA[Miro Hristov]]></dc:creator>
		<pubDate>Mon, 16 Mar 2026 01:37:40 +0000</pubDate>
				<category><![CDATA[AI]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[three.js]]></category>
		<category><![CDATA[Video]]></category>
		<guid isPermaLink="false">https://deepcorelabs.com/?p=5239</guid>

					<description><![CDATA[]]></description>
										<content:encoded><![CDATA[
		<div id="fws_6a74f7bf335b4"  data-column-margin="default" data-midnight="dark"  class="wpb_row vc_row-fluid vc_row top-level"  style="padding-top: 0px; padding-bottom: 0px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer" ><div class="row-bg viewport-desktop"  style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
	<div  class="vc_col-sm-12 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone "  data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-animation="" data-delay="0" >
		<div class="vc_column-inner" >
			<div class="wpb_wrapper">
				
	<div class="wpb_video_widget wpb_content_element vc_clearfix   vc_video-aspect-ratio-169 vc_video-el-width-100 vc_video-align-left" >
		<div class="wpb_wrapper">
			
			<div class="wpb_video_wrapper"><iframe title="Green Difference Studio — Free Open-Source Chroma Key Tool in the Browser" width="1080" height="608" src="https://www.youtube.com/embed/FnODFxK4WuE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
		</div>
	</div>

			</div> 
		</div>
	</div> 
</div></div>
		<div id="fws_6a74f7bf344df"  data-column-margin="default" data-midnight="dark"  class="wpb_row vc_row-fluid vc_row"  style="padding-top: 0px; padding-bottom: 0px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer" ><div class="row-bg viewport-desktop"  style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
	<div  class="vc_col-sm-12 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone "  data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-animation="" data-delay="0" >
		<div class="vc_column-inner" >
			<div class="wpb_wrapper">
				<a class="nectar-button jumbo regular extra-color-gradient-2"  style="color: #ffffff; background-color: #00d195;" target="_blank" href="https://deepcorelabs.com/tools/green-difference-studio/" data-color-override="#00d195" data-hover-color-override="false" data-hover-text-color-override="#fff"><span class="start loading">Open Green Difference Studio - Remove Green Screen Online</span><span class="hover">Open Green Difference Studio - Remove Green Screen Online</span></a>
			</div> 
		</div>
	</div> 
</div></div>
		<div id="fws_6a74f7bf3511c"  data-column-margin="default" data-midnight="dark"  class="wpb_row vc_row-fluid vc_row"  style="padding-top: 0px; padding-bottom: 0px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer" ><div class="row-bg viewport-desktop"  style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
	<div  class="vc_col-sm-12 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone "  data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-animation="" data-delay="0" >
		<div class="vc_column-inner" >
			<div class="wpb_wrapper">
				
<div class="wpb_text_column wpb_content_element " >
	<div class="wpb_wrapper">
		<p><a href="https://deepcorelabs.com/tools/green-difference-studio/"><strong>Open Demo Online</strong></a> | <a href="https://github.com/deepcorelabs/green-difference-studio"><strong>Source on GitHub</strong></a></p>
<hr />
<p>So a couple weeks ago Corridor Crew dropped their video about CorridorKey — an open-source, AI-powered chroma keyer that uses a transformer network to solve the green screen &#8220;unmixing problem.&#8221; The thing is genuinely impressive. It takes a raw green screen frame and a rough alpha hint, then predicts true foreground color and a clean linear alpha for every pixel, including all the nightmare stuff like motion blur, hair, and out-of-focus edges. They trained it on procedurally generated 3D renders with mathematically perfect alpha data. It outputs 16-bit and 32-bit EXR files for Nuke and DaVinci. Serious tool for serious work.</p>
<p>I actually installed a quanted version <a href="https://github.com/edenaion/EZ-CorridorKey">EZ-CorridorKey</a> on my 4080 Super workstation and it does work. The keying results are legitimately great — better than anything traditional can do on difficult footage. But the premask step is a pain. You need to feed it a decent black-and-white outline of your subject, and getting that right is its own little project. For clean studio footage it&#8217;s fine, but the workflow isn&#8217;t exactly &#8220;drop a file and go&#8221;. The included GVM AUTO / SAM2 / MatAnyone2/ VideoMaMa etc. produced very underwhelming results for me and the tool crashed quite a bit.</p>
<p>That got me thinking. What if you just want to pull a quick key on a talking-head video and export it with alpha? What if you don&#8217;t want to install anything at all? What if you&#8217;re on a laptop with no dedicated GPU?</p>
<p>That&#8217;s how Green Difference Studio happened.</p>
<h2 id="standing-on-shoulders">Standing on shoulders</h2>
<p>I should give credit where it&#8217;s due. The original chroma key shader that got this project started came from <a href="https://www.urbanpixellab.com/realtime-greenscreen-keyer/">Urban Pixel Lab&#8217;s Realtime Greenscreen Keyer</a> (<a href="https://github.com/urbanpixellab/greenscreen-shader">GitHub</a>). Their WebGL shader was the foundation — the hue-based keying approach, the basic spill suppression logic, the general structure of doing chroma math in a fragment shader. From there it got extended pretty heavily with sampled key colors, curve-based threshold falloff, despill depth, choke/feather morphology, and all the other controls, but it wouldn&#8217;t exist without that starting point.</p>
<h2 id="the-whole-thing-was-vibe-coded">The whole thing was vibe-coded</h2>
<p>I&#8217;m not going to pretend this was some carefully architected project with a Jira board and sprint planning. I opened Claude Code, described what I wanted, and started iterating. Every feature in the app was built through conversation — me describing what I needed, sometimes yelling at the screen when the mute button wouldn&#8217;t toggle (SVG <code>hidden</code> attribute, never again), and watching the code take shape in real time.</p>
<p>The shader pipeline, the tracker system, the background frame cache, the export pipeline — all of it came from back-and-forth with an AI pair programmer. Some sessions were smooth. Others involved me typing in all caps because the video was blasting audio during frame extraction for the third time. That&#8217;s vibe coding. You ride the wave and sometimes the wave rides you.</p>
<p>No Figma mockups. No PRD. No architecture diagram. Just &#8220;I want this thing to exist&#8221; and then making it exist, one conversation at a time.</p>
<h2 id="what-it-actually-does">What it actually does</h2>
<p>Green Difference Studio runs entirely in your browser. You drop a video in, and it keys out the green screen in real time using a WebGL fragment shader powered by Three.js. No server, no upload, no waiting for a cloud GPU. Everything stays on your machine.</p>
<p>The keying controls are what you&#8217;d expect from a decent compositor — hue range, saturation floor, light range, edge feather. There&#8217;s spill suppression with despill lift to recover natural skin tones. You can preview the alpha channel to check your matte quality, and use choke/feather to clean up edges.</p>
<p>But the part I&#8217;m most happy with is the tracker system. You can place tween trackers (static points you drag per frame) or mouse trackers (hold mouse on the subject while the video plays, release to stop tracking). Each tracker can be set to Keep or Discard mode with flood-fill-based alpha masking. There&#8217;s an &#8220;auto invert remaining&#8221; toggle that makes everything outside the tracked region transparent (or opaque, depending on mode). It&#8217;s not automatic motion tracking — that&#8217;s on the roadmap — but it&#8217;s surprisingly usable for isolating subjects in tricky shots.</p>
<p>Export gives you WebM with embedded alpha channel, a standalone grayscale matte, or PNG for single frames. The frame cache builds progressively in the background after upload, so you&#8217;re never staring at a loading bar. You see the first frame immediately and start working while thumbnails populate the timeline behind the scenes.</p>
<h2 id="why-browser-based-matters">Why browser-based matters</h2>
<p>CorridorKey requires a minimum 24GB VRAM GPU. That&#8217;s a $1,500+ graphics card. It outputs EXR sequences meant for professional compositing software that costs hundreds or thousands of dollars a year. Even with EZ-CorridorKey making the install easier, you&#8217;re still dealing with Python environments, model downloads, and the premask workflow.</p>
<p>Green Difference Studio requires Chrome. That&#8217;s it.</p>
<p>It won&#8217;t give you the same quality on difficult shots — ML-based unmixing is fundamentally more capable than traditional threshold-based keying for things like hair detail and translucent materials. But for the vast majority of green screen footage — talking heads, product shots, simple VFX work — a well-tuned traditional keyer running at GPU speed in a browser tab gets the job done. And it gets it done right now, on whatever laptop you happen to have.</p>
<h2 id="the-tech-under-the-hood">The tech under the hood</h2>
<p>The rendering pipeline is a Three.js fragment shader that does all the chroma math on the GPU. Spill suppression, edge feathering, alpha generation — it&#8217;s all happening in GLSL. The tracker flood fill runs on the CPU (Web Worker offloading is on the TODO list), and export uses the WebCodecs API for hardware-accelerated encoding with a MediaRecorder fallback for alpha-channel WebM.</p>
<p>Timeline thumbnails are built from a canvas-based frame cache that populates asynchronously using a separate hidden video element — this was one of the trickier problems to solve, because you can&#8217;t seek two different positions on the same video element simultaneously without the browser fighting you.</p>
<p>Other dependencies: GSAP for smooth tracker animations, iro.js for the color picker, noUiSlider for the range controls, and webm-muxer for standalone matte export.</p>
<h2 id="what-s-next">What&#8217;s next</h2>
<p>The README has a proper roadmap, but the highlights:</p>
<ul>
<li><strong>Mask tools</strong> — brush, shape, polygon, and lasso masks for garbage mattes</li>
<li><strong>Automatic motion tracking</strong> — Lucas-Kanade or correlation-based point tracking</li>
<li><strong>Image sequence export</strong> — PNG+Alpha and JPG matte sequences</li>
<li><strong>Better despill</strong> — edge-aware spill suppression for hair and translucent materials</li>
<li><strong>Undo/redo</strong> — full history stack</li>
<li><strong>Web Worker flood fill</strong> — the CPU-heavy tracker math should be off the main thread</li>
</ul>
<p>And the dream entry at the bottom of the list: CorridorKey in the browser. A transformer model running in WebGPU doing neural green screen removal with no install. Probably not happening tomorrow. But WebGPU is maturing fast, and ONNX runtime for web is getting better every month. One day, maybe.</p>
	</div>
</div>




	<div class="wpb_raw_code wpb_content_element wpb_raw_html" >
		<div class="wpb_wrapper">
			<div id="gds-demo">
  <style>
    #gds-demo {
      width: 100%;
      max-width: 900px;
      margin: 2em auto;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    #gds-demo .gds-video-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      border-radius: 8px;
      border: 1px solid #333;
    }
    #gds-demo .gds-video-wrap video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    #gds-demo .gds-checker-dark {
      background-image:
        linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
        linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #1a1a1a 75%),
        linear-gradient(-45deg, transparent 75%, #1a1a1a 75%);
      background-size: 20px 20px;
      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
      background-color: #111;
    }
    #gds-demo .gds-checker-light {
      background-image:
        linear-gradient(45deg, #ccc 25%, transparent 25%),
        linear-gradient(-45deg, #ccc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ccc 75%),
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
      background-size: 20px 20px;
      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
      background-color: #e8e8e8;
    }
    #gds-demo .gds-solid {
      background-image: none;
    }
    #gds-demo .gds-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
      flex-wrap: wrap;
    }
    #gds-demo .gds-label {
      font-size: 13px;
      color: #555;
      margin-right: 2px;
      font-weight: 600;
    }
    #gds-demo .gds-swatch {
      width: 28px;
      height: 28px;
      border-radius: 5px;
      border: 2px solid #ddd;
      cursor: pointer;
      transition: border-color 0.15s, box-shadow 0.15s;
      flex-shrink: 0;
    }
    #gds-demo .gds-swatch:hover {
      border-color: #888;
    }
    #gds-demo .gds-swatch.gds-active {
      border-color: #333;
      box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
    }
    #gds-demo .gds-swatch-checker-dark {
      background-image:
        linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
        linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #1a1a1a 75%),
        linear-gradient(-45deg, transparent 75%, #1a1a1a 75%);
      background-size: 10px 10px;
      background-position: 0 0, 0 5px, 5px -5px, -5px 0;
      background-color: #111;
    }
    #gds-demo .gds-swatch-checker-light {
      background-image:
        linear-gradient(45deg, #ccc 25%, transparent 25%),
        linear-gradient(-45deg, #ccc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ccc 75%),
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
      background-size: 10px 10px;
      background-position: 0 0, 0 5px, 5px -5px, -5px 0;
      background-color: #e8e8e8;
    }
    #gds-demo .gds-tip {
      margin-top: 16px;
      font-size: 15px;
      line-height: 1.7;
      color: #333;
    }
    #gds-demo .gds-tip strong {
      color: #111;
    }
  </style>

  <div class="gds-video-wrap gds-checker-light" id="gds-video-bg">
    <video autoplay loop muted playsinline controls src="https://deepcorelabs.com/tools/green-difference-studio/grok-video-0c16267b-ecf0-4cb2-846b-ba012b2b2713.webm?v=0.1"></video>
  </div>

  <div class="gds-controls">
    <span class="gds-label">Background:</span>
    <div class="gds-swatch gds-swatch-checker-light gds-active" onclick="gdsBg(this,'checker-light')" title="Light checkerboard"></div>
    <div class="gds-swatch gds-swatch-checker-dark" onclick="gdsBg(this,'checker-dark')" title="Dark checkerboard"></div>
    <div class="gds-swatch gds-solid" style="background:#1a1a1a;" onclick="gdsBg(this,'#1a1a1a')" title="Dark gray"></div>
    <div class="gds-swatch gds-solid" style="background:#ccc;" onclick="gdsBg(this,'#ccc')" title="Light gray"></div>
    <div class="gds-swatch gds-solid" style="background:#3d2b2b;" onclick="gdsBg(this,'#3d2b2b')" title="Muted brown"></div>
    <div class="gds-swatch gds-solid" style="background:#2e2640;" onclick="gdsBg(this,'#2e2640')" title="Muted purple"></div>
  </div>

  <p class="gds-tip">
    This transparent WebM was generated with an AI text-to-video model prompted to render on a green screen, then keyed with <strong>Green Difference Studio</strong> — completely free, right in the browser. Works great with <strong>any text-to-video or image-to-video tool</strong> if you prompt it to shoot on a green screen. Free transparent videos, no need to wait for the big guys to support alpha channel. <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f609.png" alt="😉" class="wp-smiley" style="height: 1em; max-height: 1em;" />
  </p>

  <script>
    function gdsBg(el, val) {
      var wrap = document.getElementById('gds-video-bg');
      var swatches = document.querySelectorAll('#gds-demo .gds-swatch');

      for (var i = 0; i < swatches.length; i++) {
        swatches[i].classList.remove('gds-active');
      }

      el.classList.add('gds-active');

      if (val === 'checker-light') {
        wrap.className = 'gds-video-wrap gds-checker-light';
        wrap.style.backgroundColor = '';
      } else if (val === 'checker-dark') {
        wrap.className = 'gds-video-wrap gds-checker-dark';
        wrap.style.backgroundColor = '';
      } else {
        wrap.className = 'gds-video-wrap gds-solid';
        wrap.style.backgroundColor = val;
      }
    }
  </script>
</div>
		</div>
	</div>

<div class="wpb_text_column wpb_content_element " >
	<div class="wpb_wrapper">
		<p>About the dream entry at the bottom of the list: CorridorKey in the browser. A transformer model running in WebGPU doing neural green screen removal with no install. Probably not happening tomorrow. But WebGPU is maturing fast, and ONNX runtime for web is getting better every month. One day, maybe.</p>
<p>And if Corridor Crew ever reads this — thanks for the inspiration. CorridorKey is genuinely amazing work and I hope it keeps pushing the industry forward. This little browser tool exists because you made me want to build something.</p>
	</div>
</div>




			</div> 
		</div>
	</div> 
</div></div>
]]></content:encoded>
					
					<wfw:commentRss>https://deepcorelabs.com/green-difference-studio-free-online-green-screen-chroma-key-tool-in-your-browser/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Normal Map Rotation Tool (Online)</title>
		<link>https://deepcorelabs.com/normal-map-rotation-tool-online/</link>
					<comments>https://deepcorelabs.com/normal-map-rotation-tool-online/#comments</comments>
		
		<dc:creator><![CDATA[Miro Hristov]]></dc:creator>
		<pubDate>Mon, 18 Oct 2021 06:38:54 +0000</pubDate>
				<category><![CDATA[3D]]></category>
		<category><![CDATA[three.js]]></category>
		<guid isPermaLink="false">http://deepcorelabs.com/?p=3552</guid>

					<description><![CDATA[ISSUE: A challenge that arises when attempting to rotate a normal map in Photoshop is that the software does not consider the direction of the map&#8217;s vectors from the RGB...]]></description>
										<content:encoded><![CDATA[<a class="nectar-button n-sc-button large accent-color has-icon regular-button" target="_blank" href="https://deepcorelabs.com/tools/normal-map-rotation/" data-color-override="#ff4629" data-hover-color-override="false" data-hover-text-color-override="#fff"><span>Try Normal Map Rotator V4</span><i class="icon-button-arrow"></i></a>
<hr />
<h2>ISSUE:</h2>
<p>A challenge that arises when attempting to rotate a normal map in Photoshop is that the software does not consider the direction of the map&#8217;s vectors from the RGB channels. As a result, rotating a normal map by 180 degrees in any image processing program will result in an inversion of the normal strength &#8211; elements that should protrude will appear recessed and vice versa.</p>
<h2>SOLUTION:</h2>
<p>After exploring various options, I developed a tool of my own. By utilizing three.js, I am able to apply the original normal map to a plane, rotate the plane, render the plane using a Normal material texture, and the final output takes into account the rotation of the normal map.</p>
<p><video id="video-3552-1_html5" class="wp-video-shortcode" style="visibility: visible; width: 1100px; height: 618.75px;" src="https://deepcorelabs.com/wp-content/uploads/2021/10/2021-10-18-02-25-43.mp4?_=1" preload="metadata" autoplay="autoplay" loop="loop" muted="1" controls="controls" width="1080" height="608"><source type="video/mp4" src="https://deepcorelabs.com/wp-content/uploads/2021/10/2021-10-18-02-25-43.mp4?_=1" /><a href="https://deepcorelabs.com/wp-content/uploads/2021/10/2021-10-18-02-25-43.mp4">https://deepcorelabs.com/wp-content/uploads/2021/10/2021-10-18-02-25-43.mp4</a></video></p>
<h2>Try it for yourself (Updated V4)</h2>
<p><iframe style="border: 4px solid #00AAFF;" src="//deepcorelabs.com/tools/normal-map-rotation" width="100%" height="960px"></iframe></p>
<a class="nectar-button n-sc-button large accent-color has-icon regular-button" target="_blank" href="//deepcorelabs.com/tools/normal-map-rotation/" data-color-override="#ff4629" data-hover-color-override="false" data-hover-text-color-override="#fff"><span>Try Normal Map Rotator V4</span><i class="icon-button-arrow"></i></a>
<h2>Todo</h2>
<ul>
<li><del>Flip Horizontal and Vertical</del></li>
<li>Normal Map Strength</li>
<li>&#8230;let me know!</li>
</ul>
<p>&nbsp;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://deepcorelabs.com/normal-map-rotation-tool-online/feed/</wfw:commentRss>
			<slash:comments>9</slash:comments>
		
		<enclosure url="https://deepcorelabs.com/wp-content/uploads/2021/10/2021-10-18-02-25-43.mp4?_=1" length="24109613" type="video/mp4" />

			</item>
	</channel>
</rss>
