2e:["$","title",null,{"children":"Apple II NTSC Emulation | Zellyn Hunter | Observable"}] 33:Ta37,class Vector { constructor(n) { this.data = new Float32Array(n); } // Normalize the vector. normalize() { const vec = this.data; let sum = 0; for (const item of vec) { sum += item; } const gain = 1/sum; for (const i in vec) { vec[i] *= gain; } return this; } // Multiply this Vector by another, or by a number. mul(other) { const w = new Vector(0); if ((typeof other != "number") && (this.data.length != other.data.length)) { return w; } w.data = new Float32Array(this.data); for (let i = 0; i < w.data.length; i++) { if (typeof other == "number") { w.data[i] *= other; } else { w.data[i] *= other.data[i]; } } return w; } realIDFT() { const size = this.data.length; const w = new Vector(size); for (let i = 0; i < size; i++) { const omega = 2 * Math.PI * i / size; for (let j = 0; j < size; j++) { w.data[i] += this.data[j] * Math.cos(j * omega); } } for (let i = 0; i < size; i++) { w.data[i] /= size; } return w; } resize(n) { const newData = new Float32Array(n); for (let i=0; i < Math.min(newData.length, this.data.length); i++) { newData[i] = this.data[i]; } this.data = newData; return this; } // Chebyshev Window // // Based on ideas at: // http://www.dsprelated.com/showarticle/42.php // static chebyshevWindow(n, sidelobeDb) { const m = n - 1; let w = new Vector(m); const alpha = Math.cosh(Math.acosh(Math.pow(10, sidelobeDb / 20)) / m); for (let i = 0; i < m; i++) { const a = Math.abs(alpha * Math.cos(Math.PI * i / m)); if (a > 1) w.data[i] = Math.pow(-1, i) * Math.cosh(m * Math.acosh(a)); else w.data[i] = Math.pow(-1, i) * Math.cos(m * Math.acos(a)); } w = w.realIDFT(); w.resize(n); w.data[0] /= 2; w.data[n-1] = w.data[0]; const max = w.data.reduce((prev, cur) => Math.max(prev, Math.abs(cur))); for (const i in w.data) { w.data[i] /= max; } return w; } // Lanczos Window static lanczosWindow(n, fc) { let v = new Vector(n); fc = Math.min(fc, 0.5); const halfN = Math.floor(n / 2); for (let i = 0; i < n; i++) { const x = 2 * Math.PI * fc * (i - halfN); v.data[i] = (x == 0.0) ? 1.0 : Math.sin(x) / x; } return v; } }34:T482,COMPOSITE_SHADER = ` precision mediump float; varying vec2 v_texCoord; uniform sampler2D texture; uniform vec2 textureSize; uniform float subcarrier; uniform sampler2D phaseInfo; uniform vec3 c0, c1, c2, c3, c4, c5, c6, c7, c8; uniform mat3 decoderMatrix; uniform vec3 decoderOffset; float PI = 3.14159265358979323846264; vec3 pixel(in vec2 q) { vec3 c = texture2D(texture, q).rgb; vec2 p = texture2D(phaseInfo, vec2(0, q.y)).rg; float phase = 2.0 * PI * (subcarrier * textureSize.x * q.x + p.x); return c * vec3(1.0, sin(phase), (1.0 - 2.0 * p.y) * cos(phase)); } vec3 pixels(vec2 q, float i) { return pixel(vec2(q.x + i, q.y)) + pixel(vec2(q.x - i, q.y)); } void main(void) { vec2 q = v_texCoord; vec3 c = pixel(q) * c0; c += pixels(q, 1.0 / textureSize.x) * c1; c += pixels(q, 2.0 / textureSize.x) * c2; c += pixels(q, 3.0 / textureSize.x) * c3; c += pixels(q, 4.0 / textureSize.x) * c4; c += pixels(q, 5.0 / textureSize.x) * c5; c += pixels(q, 6.0 / textureSize.x) * c6; c += pixels(q, 7.0 / textureSize.x) * c7; c += pixels(q, 8.0 / textureSize.x) * c8; gl_FragColor = vec4(decoderMatrix * c + decoderOffset, 1.0); }`35:T4cb,DISPLAY_SHADER = ` precision mediump float; varying vec2 v_texCoord; varying vec2 v_texCoord2; uniform sampler2D texture; uniform vec2 textureSize; uniform float barrel; uniform vec2 barrelSize; uniform float scanlineLevel; uniform sampler2D shadowMask; uniform vec2 shadowMaskSize; uniform float shadowMaskLevel; uniform float centerLighting; uniform sampler2D persistence; uniform vec2 persistenceSize; uniform vec2 persistenceOrigin; uniform float persistenceLevel; uniform float luminanceGain; float PI = 3.14159265358979323846264; void main(void) { vec2 qc = (v_texCoord2 - vec2(0.5, 0.5)) * barrelSize; vec2 qb = barrel * qc * dot(qc, qc); vec2 q = v_texCoord + qb; vec3 c = texture2D(texture, q).rgb; float scanline = sin(PI * textureSize.y * q.y); c *= mix(1.0, scanline * scanline, scanlineLevel); vec3 mask = texture2D(shadowMask, (v_texCoord2 + qb) * shadowMaskSize).rgb; c *= mix(vec3(1.0, 1.0, 1.0), mask, shadowMaskLevel); vec2 lighting = qc * centerLighting; c *= exp(-dot(lighting, lighting)); c *= luminanceGain; vec2 qp = v_texCoord2 * persistenceSize + persistenceOrigin; c = max(c, texture2D(persistence, qp).rgb * persistenceLevel - 0.5 / 256.0); gl_FragColor = vec4(c, 1.0); }`36:T5e0,function buildTiming(clockFrequency, displayRect, visibleRect, vertTotal, fsc) { const vertStart = displayRect.y; // Total number of CPU cycles per frame: 17030 for NTSC. const frameCycleNum = HORIZ_TOTAL * vertTotal; // first displayed column. const horizStart = Math.floor(displayRect.x); // imageSize is [14 * visible rect width in cells, visible lines] const imageSize = new Size(Math.floor(CELL_WIDTH * visibleRect.width), Math.floor(visibleRect.height)); // imageLeft is # of pixels from first visible point to first displayed point. const imageLeft = Math.floor((horizStart-visibleRect.x) * CELL_WIDTH); const colorBurst = [2 * Math.PI * (-33/360 + (imageLeft % 4) / 4)]; const cycleNum = frameCycleNum + 16; // First pixel that OpenEmulator draws when painting normally. const topLeft = new Point(imageLeft, vertStart - visibleRect.y); // First pixel that OpenEmulator draws when painting 80-column mode. const topLeft80Col = new Point(imageLeft - CELL_WIDTH/2, vertStart - visibleRect.y); return { fsc: fsc, clockFrequency: clockFrequency, displayRect: displayRect, visibleRect: visibleRect, vertStart: vertStart, vertTotal: vertTotal, frameCycleNum: frameCycleNum, horizStart: horizStart, imageSize: imageSize, imageLeft: imageLeft, colorBurst: colorBurst, cycleNum: cycleNum, topLeft: topLeft, topLeft80Col: topLeft80Col, }; } 37:T404,// Given an image that's 560x192, render it into the larger space // required for NTSC or PAL. // image: a 560x192 image, from the same domain (hence readable). // details: NTSC_DETAILS, or PAL_DETAILS // returns: a canvas screenData = (image, details, dhgr=true) => { if ((image.naturalWidth != 560) || (image.naturalHeight != 192)) { throw new Error('screenData expects an image 560x192;' + ` got ${image.naturalWidth}x${image.naturalHeight}`); } const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); const width = details.imageSize.width; const height = details.imageSize.height; canvas.width = width; canvas.height = height; context.fillStyle = 'rgba(0,0,0,1)'; context.fillRect(0, 0, width, height); const topLeft = dhgr ? details.topLeft80Col : details.topLeft; context.drawImage(image, topLeft.x, topLeft.y); const imageData = context.getImageData(0, 0, width, height); return [canvas, imageData]; }38:T6d45,ScreenView = class { constructor(canvas) { const gl = canvas.getContext("webgl"); const float_texture_ext = gl.getExtension('OES_texture_float'); if (float_texture_ext == null) { throw new Error("WebGL extension 'OES_texture_float' unavailable"); } this.canvas = canvas; this.gl = gl; this.textures = {}; this.shaders = {}; this.buffers = []; this.image = null; this.display = null; this.imageSampleRate = null; this.imageBlackLevel = null; this.imageWhiteLevel = null; this.imageSubcarrier = null; this.viewportSize = new Size(0, 0); this.persistenceTexRect = new Rect(0, 0, 0, 0); this.configurationChanged = true; this.imageChanged = true; } get image() { return this._image; } set image(image) { this._image = image; this.imageChanged = true; } set displayConfiguration(displayConfiguration) { this.display = displayConfiguration; this.configurationChanged = true; } async initOpenGL() { const gl = this.gl; gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); this.textures = {}; for (let name of TEXTURE_NAMES) { this.textures[name] = new TextureInfo(0, 0, gl.createTexture()); } for (let i = 0; i < BUFFER_COUNT; i++) { this.buffers.push(gl.createBuffer()); } await this.loadTextures(); gl.pixelStorei(gl.PACK_ALIGNMENT, 1); gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1); this.loadShaders(); } freeOpenGL() { const gl = this.gl; for (let name of TEXTURE_NAMES) { gl.deleteTexture(this.textures[name].glTexture); } for (let buffer of this.buffers) { gl.deleteBuffer(buffer); } this.deleteShaders(); } loadTextures() { return Promise.all([ this.loadTexture("Shadow Mask Triad.png", true, "SHADOWMASK_TRIAD"), this.loadTexture("Shadow Mask Inline.png", true, "SHADOWMASK_INLINE"), this.loadTexture("Shadow Mask Aperture.png", true, "SHADOWMASK_APERTURE"), this.loadTexture("Shadow Mask LCD.png", true, "SHADOWMASK_LCD"), this.loadTexture("Shadow Mask Bayer.png", true, "SHADOWMASK_BAYER") ]); } async loadTexture(path, isMipMap, name) { const gl = this.gl; const texInfo = this.textures[name]; const image = await loadImage(path); gl.bindTexture(gl.TEXTURE_2D, texInfo.glTexture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); if (isMipMap) { gl.generateMipmap(gl.TEXTURE_2D); } texInfo.width = image.naturalWidth; texInfo.height = image.naturalHeight; } loadShaders() { this.loadShader("COMPOSITE", COMPOSITE_SHADER, VERTEX_RENDER_SHADER); this.loadShader("RGB", RGB_SHADER, VERTEX_RENDER_SHADER); this.loadShader("DISPLAY", DISPLAY_SHADER, VERTEX_DISPLAY_SHADER); } loadShader(name, fragmentSource, vertexSource) { const glVertexShader = createShader( this.gl, name, this.gl.VERTEX_SHADER, vertexSource ); const glFragmentShader = createShader( this.gl, name, this.gl.FRAGMENT_SHADER, fragmentSource ); const glProgram = createProgram( this.gl, name, glVertexShader, glFragmentShader ); this.gl.deleteShader(glVertexShader); this.gl.deleteShader(glFragmentShader); this.shaders[name] = glProgram; } deleteShaders() { for (let name of SHADER_NAMES) { if (this.shaders[name]) { this.gl.deleteProgram(this.shaders[name]); this.shaders[name] = false; } } } vsync() { const gl = this.gl; resizeCanvas(this.canvas); const canvasWidth = this.canvas.width; const canvasHeight = this.canvas.height; // if viewport size has changed: if ( this.viewportSize.width != canvasWidth || this.viewportSize.height != this.canvasHeight ) { this.viewportSize = new Size(canvasWidth, canvasHeight); gl.viewport(0, 0, canvasWidth, canvasHeight); this.configurationChanged = true; } if (this.imageChanged) { this.uploadImage(); } if (this.configurationChanged) { this.configureShaders(); } if (this.imageChanged || this.configurationChanged) { this.renderImage(); } if ( this.imageChanged || this.configurationChanged || this.image.displayPersistence != 0 ) { this.drawDisplayCanvas(); } } uploadImage() { const gl = this.gl; const image = this.image; this.resizeTexture("IMAGE_IN", image.width, image.height, true); const texInfoImage = this.textures["IMAGE_IN"]; gl.bindTexture(gl.TEXTURE_2D, texInfoImage.glTexture); const format = gl.LUMINANCE; const type = gl.UNSIGNED_BYTE; const luminance = luminanceData(image.data); gl.texSubImage2D( gl.TEXTURE_2D, 0, 0, 0, // xoffset, yoffset image.data.width, image.data.height, format, type, luminance ); // Update configuration if ( image.sampleRate != this.imageSampleRate || image.blackLevel != this.imageBlackLevel || image.whiteLevel != this.imageWhiteLevel || image.subCarrier != this.imageSubcarrier ) { this.imageSampleRate = image.sampleRate; this.imageBlackLevel = image.blackLevel; this.imageWhiteLevel = image.whiteLevel; this.imageSubcarrier = image.subCarrier; this.configurationChanged = true; } // Upload phase info const texHeight = 2 ** Math.ceil(Math.log2(image.height)); const colorBurst = image.colorBurst; const phaseAlternation = image.phaseAlternation; const phaseInfo = new Float32Array(3 * texHeight); for (let x = 0; x < image.height; x++) { const c = colorBurst[x % colorBurst.length] / 2 / Math.PI; phaseInfo[3 * x + 0] = c - Math.floor(c); phaseInfo[3 * x + 1] = phaseAlternation[x % phaseAlternation.length]; } const texInfoPhase = this.textures["IMAGE_PHASEINFO"]; gl.bindTexture(gl.TEXTURE_2D, texInfoPhase.glTexture); gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGB, 1, texHeight, 0, gl.RGB, gl.FLOAT, phaseInfo ); } getRenderShader() { switch (this.display.videoDecoder) { case "CANVAS_RGB": case "CANVAS_MONOCHROME": return [this.shaders["RGB"], "RGB"]; case "CANVAS_YUV": case "CANVAS_YIQ": case "CANVAS_CXA2025AS": return [this.shaders["COMPOSITE"], "COMPOSITE"]; } const decoder = this.display.videoDecoder; throw new Error(`unknown displayConfiguration.videoDecoder: ${decoder}`); } configureShaders() { const gl = this.gl; const [renderShader, renderShaderName] = this.getRenderShader(); const displayShader = this.shaders["DISPLAY"]; const isCompositeDecoder = renderShaderName == "COMPOSITE"; // Render shader gl.useProgram(renderShader); // Subcarrier if (isCompositeDecoder) { gl.uniform1f( gl.getUniformLocation(renderShader, "subcarrier"), this.imageSubcarrier / this.imageSampleRate ); } // Filters const w = Vector.chebyshevWindow(17, 50).normalize(); let wy, wu, wv; const bandwidth = this.display.videoBandwidth / this.imageSampleRate; if (isCompositeDecoder) { let yBandwidth = this.display.videoLumaBandwidth / this.imageSampleRate; let uBandwidth = this.display.videoChromaBandwidth / this.imageSampleRate; let vBandwidth = uBandwidth; if (this.display.videoDecoder == "CANVAS_YIQ") uBandwidth = uBandwidth + NTSC_IQ_DELTA / this.imageSampleRate; // Switch to video bandwidth when no subcarrier if (this.imageSubcarrier == 0.0 || this.display.videoWhiteOnly) { yBandwidth = bandwidth; uBandwidth = bandwidth; vBandwidth = bandwidth; } wy = w.mul(Vector.lanczosWindow(17, yBandwidth)); wy = wy.normalize(); wu = w.mul(Vector.lanczosWindow(17, uBandwidth)); wu = wu.normalize().mul(2); wv = w.mul(Vector.lanczosWindow(17, vBandwidth)); wv = wv.normalize().mul(2); } else { wy = w.mul(Vector.lanczosWindow(17, bandwidth)); wu = wv = wy = wy.normalize(); } gl.uniform3f( gl.getUniformLocation(renderShader, "c0"), wy.data[8], wu.data[8], wv.data[8] ); gl.uniform3f( gl.getUniformLocation(renderShader, "c1"), wy.data[7], wu.data[7], wv.data[7] ); gl.uniform3f( gl.getUniformLocation(renderShader, "c2"), wy.data[6], wu.data[6], wv.data[6] ); gl.uniform3f( gl.getUniformLocation(renderShader, "c3"), wy.data[5], wu.data[5], wv.data[5] ); gl.uniform3f( gl.getUniformLocation(renderShader, "c4"), wy.data[4], wu.data[4], wv.data[4] ); gl.uniform3f( gl.getUniformLocation(renderShader, "c5"), wy.data[3], wu.data[3], wv.data[3] ); gl.uniform3f( gl.getUniformLocation(renderShader, "c6"), wy.data[2], wu.data[2], wv.data[2] ); gl.uniform3f( gl.getUniformLocation(renderShader, "c7"), wy.data[1], wu.data[1], wv.data[1] ); gl.uniform3f( gl.getUniformLocation(renderShader, "c8"), wy.data[0], wu.data[0], wv.data[0] ); // Decoder matrix let decoderMatrix = new Matrix3(1, 0, 0, 0, 1, 0, 0, 0, 1); // Encode if (!isCompositeDecoder) { // Y'PbPr encoding matrix decoderMatrix = new Matrix3( 0.299, -0.168736, 0.5, 0.587, -0.331264, -0.418688, 0.114, 0.5, -0.081312 ).mul(decoderMatrix); } // Set hue if (this.display.videoDecoder == "CANVAS_MONOCHROME") decoderMatrix = new Matrix3(1, 0.5, 0, 0, 0, 0, 0, 0, 0).mul( decoderMatrix ); // Disable color decoding when no subcarrier if (isCompositeDecoder) { if (this.imageSubcarrier == 0.0 || this.display.videoWhiteOnly) { decoderMatrix = new Matrix3(1, 0, 0, 0, 0, 0, 0, 0, 0).mul( decoderMatrix ); } } // Saturation decoderMatrix = new Matrix3( 1, 0, 0, 0, this.display.videoSaturation, 0, 0, 0, this.display.videoSaturation ).mul(decoderMatrix); // Hue let hue = 2 * Math.PI * this.display.videoHue; decoderMatrix = new Matrix3( 1, 0, 0, 0, Math.cos(hue), -Math.sin(hue), 0, Math.sin(hue), Math.cos(hue) ).mul(decoderMatrix); // Decode switch (this.display.videoDecoder) { case "CANVAS_RGB": case "CANVAS_MONOCHROME": // Y'PbPr decoder matrix decoderMatrix = new Matrix3( 1, 1, 1, 0, -0.344136, 1.772, 1.402, -0.714136, 0 ).mul(decoderMatrix); break; case "CANVAS_YUV": case "CANVAS_YIQ": // Y'UV decoder matrix decoderMatrix = new Matrix3( 1, 1, 1, 0, -0.394642, 2.032062, 1.139883, -0.580622, 0 ).mul(decoderMatrix); break; case "CANVAS_CXA2025AS": // Exchange I and Q decoderMatrix = new Matrix3(1, 0, 0, 0, 0, 1, 0, 1, 0).mul( decoderMatrix ); // Rotate 33 degrees hue = (-Math.PI * 33) / 180; decoderMatrix = new Matrix3( 1, 0, 0, 0, Math.cos(hue), -Math.sin(hue), 0, Math.sin(hue), Math.cos(hue) ).mul(decoderMatrix); // CXA2025AS decoder matrix decoderMatrix = new Matrix3( 1, 1, 1, 1.630, -0.378, -1.089, 0.317, -0.466, 1.677 ).mul(decoderMatrix); break; default: throw new Error(`unknown videoDecoder: ${this.display.videoDecoder}`); } // Brightness const brightness = this.display.videoBrightness - this.imageBlackLevel; let decoderOffset; if (isCompositeDecoder) decoderOffset = decoderMatrix.mul( new Matrix3(brightness, 0, 0, 0, 0, 0, 0, 0, 0) ); else decoderOffset = decoderMatrix.mul( new Matrix3(brightness, 0, 0, brightness, 0, 0, brightness, 0, 0) ); gl.uniform3f( gl.getUniformLocation(renderShader, "decoderOffset"), decoderOffset.at(0, 0), decoderOffset.at(0, 1), decoderOffset.at(0, 2) ); // Contrast let contrast = this.display.videoContrast; const videoLevel = this.imageWhiteLevel - this.imageBlackLevel; if (videoLevel > 0) contrast /= videoLevel; else contrast = 0; if (contrast < 0) contrast = 0; decoderMatrix = decoderMatrix.mul(contrast); gl.uniformMatrix3fv( gl.getUniformLocation(renderShader, "decoderMatrix"), false, decoderMatrix.data ); // Display shader gl.useProgram(displayShader); // Barrel gl.uniform1f( gl.getUniformLocation(displayShader, "barrel"), this.display.displayBarrel ); // Shadow mask gl.uniform1i(gl.getUniformLocation(displayShader, "shadowMask"), 1); gl.uniform1f( gl.getUniformLocation(displayShader, "shadowMaskLevel"), this.display.displayShadowMaskLevel ); // Persistence const frameRate = 60; gl.uniform1f( gl.getUniformLocation(displayShader, "persistenceLevel"), this.display.displayPersistence / (1.0 / frameRate + this.display.displayPersistence) ); if (this.display.displayPersistence == 0) this.resizeTexture("IMAGE_PERSISTENCE", 0, 0); // Center lighting let centerLighting = this.display.displayCenterLighting; if (Math.abs(centerLighting) < 0.001) centerLighting = 0.001; gl.uniform1f( gl.getUniformLocation(displayShader, "centerLighting"), 1.0 / centerLighting - 1 ); // Luminance gain gl.uniform1f( gl.getUniformLocation(displayShader, "luminanceGain"), this.display.displayLuminanceGain ); } renderImage() { const gl = this.gl; const [renderShader, renderShaderName] = this.getRenderShader(); const isCompositeDecoder = renderShaderName == "COMPOSITE"; gl.useProgram(renderShader); const texSize = this.textures["IMAGE_IN"].size; this.resizeTexture("IMAGE_DECODED", texSize.width, texSize.height); gl.uniform1i(gl.getUniformLocation(renderShader, "texture"), 0); gl.uniform2f( gl.getUniformLocation(renderShader, "textureSize"), texSize.width, texSize.height ); if (isCompositeDecoder) { gl.uniform1i(gl.getUniformLocation(renderShader, "phaseInfo"), 1); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, this.textures["IMAGE_PHASEINFO"].glTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.activeTexture(gl.TEXTURE0); } // Render to the back buffer, to avoid using FBOs // (support for vanilla OpenGL 2.0 cards) // I think webgl is rendering to the back buffer anyway, until // we stop executing javascript statements and give control // back, at which point it flips. So we might not need // this. Although truly, I'm not certain what it's doing. If we // *do* end up needing it, we'll have to go full webgl2. // glReadBuffer(GL_BACK); const imageSize = this.image.size; for (let y = 0; y < this.image.height; y += this.viewportSize.height) { for (let x = 0; x < this.image.width; x += this.viewportSize.width) { // Calculate rects const clipSize = new Size( this.viewportSize.width, this.viewportSize.height ); if (x + clipSize.width > imageSize.width) clipSize.width = imageSize.width - x; if (y + clipSize.height > imageSize.height) clipSize.height = imageSize.height - y; const textureRect = new Rect( x / texSize.width, y / texSize.height, clipSize.width / texSize.width, clipSize.height / texSize.height ); const canvasRect = new Rect( -1, -1, (2 * clipSize.width) / this.viewportSize.width, (2 * clipSize.height) / this.viewportSize.height ); // Render gl.bindTexture(gl.TEXTURE_2D, this.textures["IMAGE_IN"].glTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); // What is this, some ancient fixed pipeline nonsense? No way. // glLoadIdentity(); this.drawRectangle(renderShader, canvasRect, textureRect); // Copy framebuffer gl.bindTexture(gl.TEXTURE_2D, this.textures["IMAGE_DECODED"].glTexture); gl.copyTexSubImage2D( gl.TEXTURE_2D, 0, x, y, 0, 0, clipSize.width, clipSize.height ); } } } drawRectangle(shader, posRect, texRect, texRect2) { const gl = this.gl; gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); const positionLocation = gl.getAttribLocation(shader, "a_position"); const texcoordLocations = [gl.getAttribLocation(shader, "a_texCoord")]; const texRects = [texRect]; if (texRect2) { texcoordLocations.push(gl.getAttribLocation(shader, "a_texCoord2")); texRects.push(texRect2); } const positionBuffer = this.buffers[0]; gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); const p_x1 = posRect.l; const p_x2 = posRect.r; const p_y1 = posRect.t; const p_y2 = posRect.b; gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([ p_x1, p_y1, p_x2, p_y1, p_x1, p_y2, p_x1, p_y2, p_x2, p_y1, p_x2, p_y2 ]), gl.STATIC_DRAW ); gl.enableVertexAttribArray(positionLocation); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0); for (let i = 0; i < texRects.length; i++) { const texcoordBuffer = this.buffers[i + 1]; gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer); const t_x1 = texRects[i].l; const t_x2 = texRects[i].r; const t_y1 = texRects[i].t; const t_y2 = texRects[i].b; gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([ t_x1, t_y1, t_x2, t_y1, t_x1, t_y2, t_x1, t_y2, t_x2, t_y1, t_x2, t_y2 ]), gl.STATIC_DRAW ); gl.enableVertexAttribArray(texcoordLocations[i]); gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer); gl.vertexAttribPointer(texcoordLocations[i], 2, gl.FLOAT, false, 0, 0); } gl.drawArrays(gl.TRIANGLES, 0, 6); } drawDisplayCanvas() { const gl = this.gl; const displayShader = this.shaders["DISPLAY"]; // Clear // (Moved inside drawRectangle) // gl.clearColor(0, 0, 0, 1); // gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); if (this.image.width == 0 || this.image.height == 0) { this.resizeTexture("IMAGE_PERSISTENCE", 0, 0); return; } // Grab common variables const displayResolution = this.display.displayResolution; // Vertex rect const vertexRect = new Rect(-1, -1, 2, 2); const viewportAspectRatio = this.viewportSize.ratio; const displayAspectRatio = displayResolution.ratio; const ratio = viewportAspectRatio / displayAspectRatio; if (ratio > 1) { vertexRect.origin.x /= ratio; vertexRect.size.width /= ratio; } else { vertexRect.origin.y *= ratio; vertexRect.size.height *= ratio; } // Base texture rect const baseTexRect = new Rect(0, 0, 1, 1); // Canvas texture rect const interlaceShift = this.image.interlace / this.image.height; const canvasTexLowerLeft = this.getDisplayCanvasTexPoint( new Point(-1, -1 + 2 * interlaceShift) ); const canvasTexUpperRight = this.getDisplayCanvasTexPoint( new Point(1, 1 + 2 * interlaceShift) ); const canvasTexRect = new Rect( canvasTexLowerLeft.x, canvasTexLowerLeft.y, canvasTexUpperRight.x - canvasTexLowerLeft.x, canvasTexUpperRight.y - canvasTexLowerLeft.y ); const canvasSize = new Size( 0.5 * this.viewportSize.width * vertexRect.size.width, 0.5 * this.viewportSize.height * vertexRect.size.height ); const canvasVideoSize = new Size( canvasSize.width * this.display.videoSize.width, canvasSize.height * this.display.videoSize.height ); let barrelTexRect; // Render const texture = this.textures["IMAGE_DECODED"]; // Set uniforms gl.useProgram(displayShader); // Texture const texSize = texture.size; gl.uniform1i(gl.getUniformLocation(displayShader, "texture"), 0); gl.uniform2f( gl.getUniformLocation(displayShader, "textureSize"), texSize.width, texSize.height ); // Barrel barrelTexRect = new Rect( -0.5, -0.5 / displayAspectRatio, 1.0, 1.0 / displayAspectRatio ); gl.uniform2f( gl.getUniformLocation(displayShader, "barrelSize"), 1, 1.0 / displayAspectRatio ); // Scanlines const scanlineHeight = canvasVideoSize.height / this.image.height; let scanlineLevel = this.display.displayScanlineLevel; scanlineLevel = scanlineHeight > 2.5 ? scanlineLevel : scanlineHeight < 2 ? 0 : ((scanlineHeight - 2) / (2.5 - 2)) * scanlineLevel; gl.uniform1f( gl.getUniformLocation(displayShader, "scanlineLevel"), scanlineLevel ); // Shadow mask let shadowMaskTexture; let shadowMaskAspectRatio; switch (this.display.displayShadowMask) { case "SHADOWMASK_TRIAD": shadowMaskTexture = this.textures["SHADOWMASK_TRIAD"]; shadowMaskAspectRatio = 2 / (274.0 / 240.0); break; case "SHADOWMASK_INLINE": shadowMaskTexture = this.textures["SHADOWMASK_INLINE"]; shadowMaskAspectRatio = 2; break; case "SHADOWMASK_APERTURE": shadowMaskTexture = this.textures["SHADOWMASK_APERTURE"]; shadowMaskAspectRatio = 2; break; case "SHADOWMASK_LCD": shadowMaskTexture = this.textures["SHADOWMASK_LCD"]; shadowMaskAspectRatio = 2; break; case "SHADOWMASK_BAYER": shadowMaskTexture = this.textures["SHADOWMASK_BAYER"]; shadowMaskAspectRatio = 2; break; } let shadowMaskDotPitch = this.display.displayShadowMaskDotPitch; if (shadowMaskDotPitch <= 0.001) shadowMaskDotPitch = 0.001; const shadowMaskElemX = ((displayResolution.width / this.display.displayPixelDensity) * 25.4 * 0.5) / shadowMaskDotPitch; const shadowMaskSize = new Size( shadowMaskElemX, (shadowMaskElemX * shadowMaskAspectRatio) / displayAspectRatio ); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, shadowMaskTexture.glTexture); gl.uniform2f( gl.getUniformLocation(displayShader, "shadowMaskSize"), shadowMaskSize.width, shadowMaskSize.height ); // Persistence gl.activeTexture(gl.TEXTURE2); gl.bindTexture(gl.TEXTURE_2D, this.textures["IMAGE_PERSISTENCE"].glTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.activeTexture(gl.TEXTURE0); gl.uniform1i(gl.getUniformLocation(displayShader, "persistence"), 2); gl.uniform2f( gl.getUniformLocation(displayShader, "persistenceOrigin"), this.persistenceTexRect.x, this.persistenceTexRect.y ); gl.uniform2f( gl.getUniformLocation(displayShader, "persistenceSize"), this.persistenceTexRect.width, this.persistenceTexRect.height ); // Old fixed pipeline stuff. // gl.loadIdentity(); // gl.rotatef(180, 1, 0, 0); gl.bindTexture(gl.TEXTURE_2D, texture.glTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); // Render this.drawRectangle(displayShader, vertexRect, canvasTexRect, baseTexRect); // TODO(zellyn): implement /* if (displayConfiguration.displayPersistence != 0.0) { updateTextureSize(OPENGLCANVAS_IMAGE_PERSISTENCE, viewportSize); gl.bindTexture(gl.TEXTURE_2D, texture[OPENGLCANVAS_IMAGE_PERSISTENCE]); gl.readBuffer(gl.BACK); gl.copyTexSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 0, 0, viewportSize.width, viewportSize.height); OESize persistenceTexSize = OEMakeSize(viewportSize.width / textureSize[OPENGLCANVAS_IMAGE_PERSISTENCE].width, viewportSize.height / textureSize[OPENGLCANVAS_IMAGE_PERSISTENCE].height); persistenceTexRect = OEMakeRect((vertexRect.origin.x + 1) * 0.5F * persistenceTexSize.width, (vertexRect.origin.y + 1) * 0.5F * persistenceTexSize.height, vertexRect.size.width * 0.5F * persistenceTexSize.width, vertexRect.size.height * 0.5F * persistenceTexSize.height); persistenceTexRect.origin.y += persistenceTexRect.size.height; persistenceTexRect.size.height = -persistenceTexRect.size.height; } */ } getDisplayCanvasTexPoint(p) { const videoCenter = this.display.videoCenter; const videoSize = this.display.videoSize; p = new Point( (p.x - 2 * videoCenter.x) / videoSize.width, (p.y - 2 * videoCenter.y) / videoSize.height ); const imageSize = this.image.size; const texSize = this.textures["IMAGE_IN"].size; p.x = ((p.x + 1) * 0.5 * imageSize.width) / texSize.width; p.y = ((p.y + 1) * 0.5 * imageSize.height) / texSize.height; return p; } // Resize the texture with the given name to the next // highest power of two width and height. Wouldn't be // necessary with webgl2. resizeTexture(name, width, height, luminance = false) { const gl = this.gl; const texInfo = this.textures[name]; if (!texInfo) { throw new Error(`Cannot find texture named ${name}`); } if (width < 4) width = 4; if (height < 4) height = 4; width = 2 ** Math.ceil(Math.log2(width)); height = 2 ** Math.ceil(Math.log2(height)); if (texInfo.width != width || texInfo.height != height) { texInfo.width = width; texInfo.height = height; gl.bindTexture(gl.TEXTURE_2D, texInfo.glTexture); const length = width * height * (luminance ? 1 : 4); const dummy = new Uint8Array(length); const type = luminance ? gl.LUMINANCE : gl.RGBA; gl.texImage2D( gl.TEXTURE_2D, 0, type, width, height, 0, type, gl.UNSIGNED_BYTE, dummy ); } } }39:[{"id":"5387cd38c0fb82e696dbd03ec03efe758ba671083d5cbd42cc30e7f5c3d55463ca8fd17c68f7922fd9f9801dca7e59e1c8fb2d029a9e9347f877fb8b61ac6912","href":"https://static.observableusercontent.com/files/5387cd38c0fb82e696dbd03ec03efe758ba671083d5cbd42cc30e7f5c3d55463ca8fd17c68f7922fd9f9801dca7e59e1c8fb2d029a9e9347f877fb8b61ac6912","name":"rescue-raiders-words.png","type":"image/png","lastModified":1618775832519.815,"size":4320},{"id":"6730b092bb5a9a29da31952fe5489bd32240530b1486d8c9238d7c8f8ede8f38b30a78dde336c3774f627f7f949dab1177d27e845f430c20857c3f2e3bd6ac10","href":"https://static.observableusercontent.com/files/6730b092bb5a9a29da31952fe5489bd32240530b1486d8c9238d7c8f8ede8f38b30a78dde336c3774f627f7f949dab1177d27e845f430c20857c3f2e3bd6ac10","name":"Shadow Mask Inline.png","type":"image/png","lastModified":1619036649902.834,"size":885},{"id":"16fee409962280a37dad81016f3af8d5302e0b14913a9aa9168d0ecb74a23b6dcdf3aae39652b819bb816fe3ea2df78966c00114ce0e0c7b87be34a7e6476fbe","href":"https://static.observableusercontent.com/files/16fee409962280a37dad81016f3af8d5302e0b14913a9aa9168d0ecb74a23b6dcdf3aae39652b819bb816fe3ea2df78966c00114ce0e0c7b87be34a7e6476fbe","name":"Shadow Mask LCD.png","type":"image/png","lastModified":1619036647565.461,"size":581},{"id":"011c8d3218f6b583f054f177f040df9921cf4b4d9bd0b6ef3a90564a578d617d156688204c6b765dacd4806e2ad57c0697b5b2ded3fbcf64a7ff6daa104b518e","href":"https://static.observableusercontent.com/files/011c8d3218f6b583f054f177f040df9921cf4b4d9bd0b6ef3a90564a578d617d156688204c6b765dacd4806e2ad57c0697b5b2ded3fbcf64a7ff6daa104b518e","name":"Shadow Mask Triad.png","type":"image/png","lastModified":1619036647571.979,"size":2038},{"id":"f2272dc5f20f6038f56583bf69d47fb08744d7fa3398979d0c8cc84e9b197c68651f0ff0d281310e05144f7a9dd7dd61ac62d1f9de0071ff27fab9b6da74a8c1","href":"https://static.observableusercontent.com/files/f2272dc5f20f6038f56583bf69d47fb08744d7fa3398979d0c8cc84e9b197c68651f0ff0d281310e05144f7a9dd7dd61ac62d1f9de0071ff27fab9b6da74a8c1","name":"Shadow Mask Bayer.png","type":"image/png","lastModified":1619036647552.626,"size":2385},{"id":"fc1962e7ca497b5ea83366f443f7b97adeb592146c7b325cd836129129948824b5d5cf708bf4370021f0e57f4fd2ccb9c2a9a1b90c7504c46560df8a2c4fa481","href":"https://static.observableusercontent.com/files/fc1962e7ca497b5ea83366f443f7b97adeb592146c7b325cd836129129948824b5d5cf708bf4370021f0e57f4fd2ccb9c2a9a1b90c7504c46560df8a2c4fa481","name":"Shadow Mask Aperture.png","type":"image/png","lastModified":1619036647484.329,"size":253}] 31:{"id":"f54dabc95e6c56e8","slug":"apple-ii-ntsc-emulation-gpu","title":"Apple II NTSC Emulation","thumbnail":"64330fd592b2b0695c49fff181b738e481850624329ee0416c43414cb5902a8b","access_level":"public","create_time":"$D2021-04-18T19:55:43.108Z","update_time":"$D2021-04-27T13:09:57.978Z","view_time":null,"first_public_time":"$D2021-04-22T12:49:49.787Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d796a03c5877d3c8","login":"zellyn","name":"Zellyn Hunter","avatar_url":"https://avatars-next.observableusercontent.com/350abf8f2766fa17f37644f22ed99fb3aa7c6c5fd47a606cf3678752e007124a","tier":"starter_2024"},"version":523,"publish_version":523,"role":null,"authored":false,"authors":[{"type":"individual","id":"12133cdd10fe21a6","login":"zellyn","name":"Zellyn Hunter","avatar_url":"https://avatars-next.observableusercontent.com/350abf8f2766fa17f37644f22ed99fb3aa7c6c5fd47a606cf3678752e007124a","tier":null}],"members":[{"type":"individual","id":"12133cdd10fe21a6","login":"zellyn","name":"Zellyn Hunter","avatar_url":"https://avatars-next.observableusercontent.com/350abf8f2766fa17f37644f22ed99fb3aa7c6c5fd47a606cf3678752e007124a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Apple II NTSC Emulation","cells":[{"id":0,"value":"md`# Apple II NTSC Emulation\n\nWe're going to be taking a tour of different NTSC emulation techniques for Apple II emulators.\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`## Example image\n\nFirst, we need an example image. We load it in at 560x192 rather than 280x192, which allows us to capture the half-pixel shift caused by setting the high bit in HIRES mode.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"FileAttachment(\"rescue-raiders-words.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"w = Vector.chebyshevWindow(17, 50).normalize()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"data = Array.from(w.data).map((d, i) => ({'name': i, 'value': d}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\")\n .attr(\"fill\", color)\n .selectAll(\"rect\")\n .data(data)\n .join(\"rect\")\n .attr(\"x\", (d, i) => x(i))\n .attr(\"y\", d => y(d.value))\n .attr(\"height\", d => y(0) - y(d.value))\n .attr(\"width\", x.bandwidth());\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"x = d3.scaleBand()\n .domain(d3.range(data.length))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickFormat(i => data[i].name).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, data.format))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(data.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"color = \"steelBlue\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"margin = ({top: 30, right: 0, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"class Matrix3 {\n constructor(c00, c01, c02,\n c10, c11, c12,\n c20, c21, c22) {\n this.data = new Float32Array([c00, c01, c02, c10, c11, c12, c20, c21, c22]);\n }\n\n at(i, j) {\n return this.data[3 * i + j];\n }\n\n mul(val) {\n const m = new Matrix3(0,0,0,0,0,0,0,0,0);\n if (typeof val == \"number\") {\n m.data = this.data.map(x => x * val);\n } else {\n for (let i = 0; i < 3; i++) {\n for (let j = 0; j < 3; j++) {\n for (let k = 0; k < 3; k++) {\n m.data[i * 3 + j] += val.data[i * 3 + k] * this.data[k * 3 + j];\n }\n }\n }\n }\n return m;\n }\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"Point = class {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n }\n }\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"Size = class {\n constructor(width, height) {\n this.width = width;\n this.height = height;\n }\n\n // copy() {\n // return new Size(this.width, this.height);\n // }\n\n get ratio() {\n return this.width / this.height;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"Rect = class {\n constructor(x, y, width, height) {\n this.origin = new Point(x, y);\n this.size = new Size(width, height);\n }\n\n get x() {\n return this.origin.x;\n }\n\n get y() {\n return this.origin.y;\n }\n\n get width() {\n return this.size.width;\n }\n\n get height() {\n return this.size.height;\n }\n\n get l() {\n return this.origin.x;\n }\n\n get r() {\n return this.origin.x + this.size.width;\n }\n\n get t() {\n return this.origin.y;\n }\n\n get b() {\n return this.origin.y + this.size.height;\n }\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"md`### Constants from AppleIIVideo.cpp`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"HORIZ_START = 16","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"HORIZ_BLANK = (9 + HORIZ_START)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"HORIZ_DISPLAY = 40;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"HORIZ_TOTAL = (HORIZ_BLANK + HORIZ_DISPLAY)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"CELL_WIDTH = 14","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"CELL_HEIGHT = 8","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"VERT_NTSC_START = 38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"VERT_PAL_START = 48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"VERT_DISPLAY = 192","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"BLOCK_WIDTH = HORIZ_DISPLAY","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"BLOCK_HEIGHT = VERT_DISPLAY / CELL_HEIGHT","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"md`### Constants from CanvasInterface.h`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"NTSC_FSC = 315/88 * 1e6 // 3579545 = 3.5 Mhz: Color Subcarrier","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"NTSC_4FSC = 4 * NTSC_FSC // 14318180 = 14.3 Mhz","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"NTSC_HTOTAL = (63+5/9) * 1e-6 ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"NTSC_HLENGTH = (52+8/9) * 1e-6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"NTSC_HHALF = (35+2/3) * 1e-6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"NTSC_HSTART = NTSC_HHALF - NTSC_HLENGTH/2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"NTSC_HEND = NTSC_HHALF + NTSC_HLENGTH/2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"NTSC_VTOTAL = 262","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"NTSC_VLENGTH = 240","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"NTSC_VSTART = 19","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"NTSC_VEND = NTSC_VSTART + NTSC_VLENGTH;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"PAL_FSC = 4433618.75; // Color subcarrier","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"PAL_4FSC = 4 * PAL_FSC","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"PAL_HTOTAL = 64e-6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"PAL_HLENGTH = 52e-6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"PAL_HHALF = (37+10/27) * 1e-6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"PAL_HSTART = PAL_HHALF - PAL_HLENGTH / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"PAL_HEND = PAL_HHALF + PAL_HLENGTH / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"PAL_VTOTAL = 312","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"PAL_VLENGTH = 288","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"PAL_VSTART = 21","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"PAL_VEND = PAL_VSTART + PAL_VLENGTH","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"md`### Constants from OpenGLCanvas.cpp`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"NTSC_I_CUTOFF = 1300000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"NTSC_Q_CUTOFF = 600000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"NTSC_IQ_DELTA = NTSC_I_CUTOFF - NTSC_Q_CUTOFF","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"md`### Constants from AppleIIVideo::updateTiming`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"ntscClockFrequency = NTSC_4FSC * HORIZ_TOTAL / 912","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"ntscVisibleRect = new Rect(ntscClockFrequency * NTSC_HSTART, NTSC_VSTART, ntscClockFrequency * NTSC_HLENGTH, NTSC_VLENGTH)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"ntscDisplayRect = new Rect(HORIZ_START, VERT_NTSC_START, HORIZ_DISPLAY, VERT_DISPLAY)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"ntscVertTotal = NTSC_VTOTAL","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"palClockFrequency = 14250450.0 * HORIZ_TOTAL / 912","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"palVisibleRect = new Rect(palClockFrequency * PAL_HSTART, PAL_VSTART, palClockFrequency * PAL_HLENGTH, PAL_VLENGTH)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"palDisplayRect = new Rect(HORIZ_START, VERT_PAL_START, HORIZ_DISPLAY, VERT_DISPLAY)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"palVertTotal = PAL_VTOTAL","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"md`## Source for Shaders`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"VERTEX_RENDER_SHADER =`\n// an attribute will receive data from a buffer\nattribute vec4 a_position;\nattribute vec2 a_texCoord;\nvarying vec2 v_texCoord;\n// all shaders have a main function\nvoid main() {\n gl_Position = a_position;\n v_texCoord = a_texCoord;\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"VERTEX_DISPLAY_SHADER =`\n// an attribute will receive data from a buffer\nattribute vec4 a_position;\nattribute vec2 a_texCoord;\nattribute vec2 a_texCoord2;\nvarying vec2 v_texCoord;\nvarying vec2 v_texCoord2;\n// all shaders have a main function\nvoid main() {\n gl_Position = vec4(a_position.x, -a_position.y, a_position.z, a_position.w);\n v_texCoord = a_texCoord;\n v_texCoord2 = a_texCoord2;\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"RGB_SHADER = `\nprecision mediump float;\nvarying vec2 v_texCoord;\nuniform sampler2D texture;\nuniform vec2 textureSize;\nuniform vec3 c0, c1, c2, c3, c4, c5, c6, c7, c8;\nuniform mat3 decoderMatrix;\nuniform vec3 decoderOffset;\nvec3 pixel(vec2 q)\n{\n return texture2D(texture, q).rgb;\n}\nvec3 pixels(in vec2 q, in float i)\n{\n return pixel(vec2(q.x + i, q.y)) + pixel(vec2(q.x - i, q.y));\n}\nvoid main(void)\n{\n vec2 q = v_texCoord;\n vec3 c = pixel(q) * c0;\n c += pixels(q, 1.0 / textureSize.x) * c1;\n c += pixels(q, 2.0 / textureSize.x) * c2;\n c += pixels(q, 3.0 / textureSize.x) * c3;\n c += pixels(q, 4.0 / textureSize.x) * c4;\n c += pixels(q, 5.0 / textureSize.x) * c5;\n c += pixels(q, 6.0 / textureSize.x) * c6;\n c += pixels(q, 7.0 / textureSize.x) * c7;\n c += pixels(q, 8.0 / textureSize.x) * c8;\n gl_FragColor = vec4(decoderMatrix * c + decoderOffset, 1.0);\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"NTSC_DETAILS = buildTiming(ntscClockFrequency, ntscDisplayRect,\n ntscVisibleRect, ntscVertTotal, NTSC_FSC)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"PAL_DETAILS = buildTiming(palClockFrequency, palDisplayRect,\n\t\t\t\t palVisibleRect, palVertTotal, PAL_FSC)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"// Given an ImageData (RGBA), convert to luminance by taking the max\n// of (R,G,B) for each pixel. Return a Uint8Array.\nluminanceData = (imageData) => {\n const width = imageData.width;\n const height = imageData.height;\n const data = imageData.data;\n const size = width * height;\n const ary = new Uint8Array(size);\n for (let i = 0; i < size; i++) {\n ary[i] = Math.max(data[i*4], data[i*4+1], data[i*4+2]);\n }\n return ary;\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"TEXTURE_NAMES = [\n \"SHADOWMASK_TRIAD\",\n \"SHADOWMASK_INLINE\",\n \"SHADOWMASK_APERTURE\",\n \"SHADOWMASK_LCD\",\n \"SHADOWMASK_BAYER\",\n \"IMAGE_PHASEINFO\",\n \"IMAGE_IN\",\n \"IMAGE_DECODED\",\n \"IMAGE_PERSISTENCE\",\n ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"BUFFER_COUNT = 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"SHADER_NAMES = [\n \"COMPOSITE\",\n \"DISPLAY\",\n \"RGB\",\n ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"resizeCanvas = (canvas) => {\n // Lookup the size the browser is displaying the canvas.\n const displayWidth = canvas.clientWidth;\n const displayHeight = canvas.clientHeight;\n\n // Check if the canvas is not the same size.\n if (canvas.width != displayWidth ||\n canvas.height != displayHeight) {\n canvas.width = displayWidth;\n canvas.height = displayHeight;\n }\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"// Code from:\n// https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html\ncreateShader = (gl, name, type, source) => {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);\n if (success) {\n return shader;\n }\n\n const log = gl.getShaderInfoLog(shader);\n gl.deleteShader(shader);\n throw new Error(`unable to compile shader ${name}: \\n${log}`);\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"// Code from:\n// https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html\ncreateProgram = (gl, name, ...shaders) => {\n const program = gl.createProgram();\n for (let shader of shaders) {\n gl.attachShader(program, shader);\n }\n gl.linkProgram(program);\n const success = gl.getProgramParameter(program, gl.LINK_STATUS);\n if (success) {\n return program;\n }\n const log = gl.getProgramInfoLog(program);\n gl.deleteProgram(program);\n throw new Error(`unable to compile program ${name}: \\n${log}`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"TextureInfo = class {\n constructor(width, height, glTexture) {\n this.width = width;\n this.height = height;\n this.glTexture = glTexture;\n }\n\n get size() {\n return new Size(this.width, this.height);\n }\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"DisplayConfiguration = class {\n constructor() {\n this.videoDecoder = \"CANVAS_YUV\";\n this.videoBrightness = 0;\n this.videoContrast = 1;\n this.videoSaturation = 1;\n this.videoHue = 0;\n this.videoCenter = new Point(0, 0);\n this.videoSize = new Size(1.05, 1.05);\n this.videoBandwidth = 6000000; // 14318180;\n this.videoLumaBandwidth = 2000000; // 600000;\n this.videoChromaBandwidth = 600000; // 2000000;\n this.videoWhiteOnly = false;\n\n this.displayResolution = new Size(640, 480);\n this.displayPixelDensity = 72;\n this.displayBarrel = 0.05; // 0;\n this.displayScanlineLevel = 0.05; // 0;\n this.displayShadowMaskLevel = 0.05; // 0;\n this.displayShadowMaskDotPitch = 0.5; // 1;\n this.displayShadowMask = \"SHADOWMASK_TRIAD\";\n this.displayPersistence = 0;\n this.displayCenterLighting = 1;\n this.displayLuminanceGain = 1;\n }\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"// Corresponds to OEImage. Contains the data on an NTSC/PAL/whatever\n// image. The `data` field is an ImageData object with the actual\n// image data.\nImageInfo = class {\n constructor(data) {\n if (typeof data != \"object\") {\n throw new Error(`want typeof data == 'object'; got '${typeof data}'`);\n }\n if (!(data instanceof ImageData)) {\n throw new Error(`want data instanceof ImageData; got '${data.constructor.name}'`);\n }\n\n this.sampleRate = NTSC_4FSC;\n this.blackLevel = 0;\n this.whiteLevel = 1;\n this.interlace = 0;\n this.subCarrier = NTSC_FSC;\n this.colorBurst = NTSC_DETAILS.colorBurst;\n this.phaseAlternation = [false];\n this.data = data;\n }\n\n get width() {\n return this.data.width;\n }\n\n get height() {\n return this.data.height;\n }\n\n get size() {\n return new Size(this.data.width, this.data.height);\n }\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"// https://codereview.stackexchange.com/a/128619\nloadImage = path => TEXTURE_IMAGES[path]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"TEXTURE_IMAGES = ({\n \"Shadow Mask Triad.png\": FileAttachment(\"Shadow Mask Triad.png\").image(),\n \"Shadow Mask Inline.png\": FileAttachment(\"Shadow Mask Inline.png\").image(),\n \"Shadow Mask Aperture.png\": FileAttachment(\"Shadow Mask Aperture.png\").image(),\n \"Shadow Mask LCD.png\": FileAttachment(\"Shadow Mask LCD.png\").image(),\n \"Shadow Mask Bayer.png\": FileAttachment(\"Shadow Mask Bayer.png\").image(),\n \"rescue-raiders-words.png\": FileAttachment(\"rescue-raiders-words.png\").image(),\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"{\n const canvas = DOM.canvas(768, 576);\n let sv = new ScreenView(canvas);\n await sv.initOpenGL();\n\n let displayConfig = new DisplayConfiguration();\n displayConfig.displayResolution = new Size(canvas.width, canvas.height);\n sv.displayConfiguration = displayConfig;\n let image = await FileAttachment(\"rescue-raiders-words.png\").image();\n const [imageCanvas, imageData] = screenData(image,\n NTSC_DETAILS,\n false);\n let imageInfo = new ImageInfo(imageData);\n sv.image = imageInfo;\n // Uncomment this to completely hose Firefox, completely lock up the tab in safari,\n // sv.vsync();\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body" 2d:E{"digest":"NEXT_REDIRECT;replace;/@zellyn/apple-ii-ntsc-emulation-gpu;307;"}