modulate and demodulate an ntsc video signal in a shader
npm install glsl-ntsc-videomodulate and demodulate an ntsc video signal in a shader
compile with [glslify][]
ntsc was a broadcast television standard used in north america, the caribbean, parts of south
america, and a few places in east asia and the pacific. ntsc was mostly discontinued in 2009 for
over-the-air use but lives on in legacy consumer electronics such as game consoles and vhs tapes
made for ntsc regions.
this module has not been tested against an actual ntsc signal, but it can decode its own signals
with some fidelity.
[glslify]: https://github.com/glslify/glslify
this example modulates and then demodulates a picture from an image file.
check the example directory for a demo that reads from a visual effect written to framebuffer and
then modulated and demodulated.
`` js
var glsl = require('glslify')
var regl = require('regl')()
var fbopts = [
{ color: regl.texture({ width: 720*2, height: 262 }) },
{ color: regl.texture({ width: 720*2, height: 263 }) }
]
var fbo = [
regl.framebuffer(fbopts[0]),
regl.framebuffer(fbopts[1])
]
require('resl')({
manifest: { picture: { type: 'image', src: 'smpte.png' } },
onDone: (assets) => {
var draw = {
modulate: regl({
frag: glsl
precision highp float;
#pragma glslify: modulate = require('glsl-ntsc-video/modulate')
varying vec2 vpos;
uniform float n_lines;
uniform sampler2D picture;
void main () {
float signal = modulate(vpos*0.5+0.5, n_lines, picture);
gl_FragColor = vec4(signal,0,0,1);
}
,
vert:
precision highp float;
attribute vec2 position;
varying vec2 vpos;
void main () {
vpos = position;
gl_Position = vec4(position,0,1);
}
,
attributes: { position: [-4,-4,-4,+4,+4,+0] },
elements: [0,1,2],
framebuffer: regl.prop('framebuffer'),
uniforms: {
n_lines: regl.prop('n_lines'),
picture: regl.texture({ data: assets.picture, flipY: true })
}
}),
demodulate: regl({
frag: glsl
precision highp float;
#pragma glslify: demodulate = require('glsl-ntsc-video/demodulate')
uniform sampler2D signal0, signal1;
varying vec2 vpos;
uniform float tick;
const float PI = ${Math.PI};
void main () {
vec2 v = vpos*0.5+0.5;
vec2 r = vec2(720,485);
vec3 rgb0 = demodulate(v, vec3(262.0,r), signal0);
vec3 rgb1 = demodulate(v, vec3(263.0,r), signal1);
vec3 rgb = mix(rgb0,rgb1,sin(v.yPI2.0242.5)0.5+0.5);
gl_FragColor = vec4(rgb,1);
}
,
vert:
precision highp float;
attribute vec2 position;
varying vec2 vpos;
void main () {
vpos = position;
gl_Position = vec4(position,0,1);
}
,`
attributes: { position: [-4,-4,-4,+4,+4,+0] },
elements: [0,1,2],
uniforms: {
signal0: regl.prop('signal0'),
signal1: regl.prop('signal1'),
tick: regl.context('tick')
}
})
}
var tick = 0
frame(); frame()
window.addEventListener('resize', () => { frame(); frame() })
function frame () {
regl.poll()
fbotick%2
draw.modulate({ framebuffer: fbo[tick%2], n_lines: tick%2 ? 263 : 262 })
regl.clear({ color: [0,0,0,1], depth: true })
draw.demodulate({ signal0: fbo[0], signal1: fbo[1] })
tick++
}
}
})
`
#pragma glslify: modulate = require('glsl-ntsc-video/modulate')
#pragma glslify: demodulate = require('glsl-ntsc-video/demodulate')
return the modulated floating point signal from 0.0 to +1.0 for uv in unit coordinates(0,0)
(values from 0 to 1, inclusive) where is the bottom-left. the picture texture should have(0,0)
its at the bottom-left too.
n_lines is the total number of lines (262 or 263).
decode a texture signal with its red channel set as modulated ntsc from 0.0 to +1.0 foruv in unit coordinates (values from 0 to 1, inclusive) where (0,0) is the bottom-left.
n_lines is the number of lines (262 or 263).
width and height are the decoded size of the resulting visual image (use 720,485).
For higher precision you can use a floating point texture for signal although in practice it
doesn't appear to make much of a difference.
bsd
`
npm install glsl-ntsc-video