Skip to content

Commit

Permalink
.
Browse files Browse the repository at this point in the history
  • Loading branch information
@goldbuick
goldbuick committed May 22, 2024
1 parent 491bfb2 commit c8be897
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 80 deletions.
135 changes: 58 additions & 77 deletions zss/terminal/crt.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,7 @@ import {
EffectAttribute,
ColorChannel,
} from 'postprocessing'
import {
Texture,
Uniform,
UnsignedByteType,
WebGLRenderTarget,
WebGLRenderer,
} from 'three'
import { Texture, Uniform, UnsignedByteType } from 'three'
import { MAYBE, ispresent } from 'zss/mapping/types'

const CRTShapeVertShader = `
Expand All @@ -33,12 +27,7 @@ void mainSupport(const in vec2 uv) {
`

const CRTShapeFragShader = `
// #ifdef TEXTURE_PRECISION_HIGH
// uniform highp sampler2D splat;
// #else
// uniform mediump sampler2D splat;
// #endif
uniform float viewheight;
uniform sampler2D splat;
float rectdistance(vec2 uv) {
Expand Down Expand Up @@ -94,7 +83,20 @@ void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor)
outputColor = vec4(mix(vec3(0.0), outputColor.rgb, 0.5), inputColor.a);
}
// apply inner shade
// apply scanlines
if (doot < 1.0) {
float row = round(uv.y * viewheight * 0.5);
float alt = mod(row, 2.0);
float phase = time;
float slowband = abs(cos(uv.x + phase) * sin(uv.y + phase)) / 2.0;
float fastband = (cos(uv.y * 3.0 + time * 1.24) + 1.0) / 2.0;
float blankdmix = 0.2 - pow(slowband, viewheight * 0.125) ;//- pow(fastband, viewheight) * 0.1;
vec3 blankd = mix(outputColor.rgb, vec3(0.0), blankdmix);
vec3 scanline = mix(outputColor.rgb, blankd, alt);
outputColor = vec4(scanline, inputColor.a);
}
// apply inner shade && scanlines
if (doot >= 0.5 && doot < 1.0) {
float sh = clamp(0.0, 1.0, 1.0 - bx - 0.7);
vec3 shade = mix(outputColor.rgb, vec3(0.0), pow(sh, 4.0));
Expand All @@ -112,28 +114,32 @@ void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor)
`

type CRTShapeOpts = {
texture?: Texture
splat?: Texture
viewheight?: number
}

class CRTShapeEffect extends Effect {
constructor({ texture }: CRTShapeOpts = {}) {
constructor({ splat, viewheight }: CRTShapeOpts = {}) {
super('CRTShapeEffect', CRTShapeFragShader, {
blendFunction: BlendFunction.NORMAL,
attributes: EffectAttribute.CONVOLUTION,
defines: new Map([
['TEXEL', 'texel'],
['TEXTURE_PRECISION_HIGH', '1'],
]),
uniforms: new Map<string, Uniform>([['splat', new Uniform(texture)]]),
uniforms: new Map<string, Uniform>([
['splat', new Uniform(splat)],
['viewheight', new Uniform(viewheight ?? 128)],
]),
})
}

get texture(): MAYBE<Texture> {
get splat(): MAYBE<Texture> {
return this.uniforms.get('splat')?.value
}

set texture(value: Texture) {
const { texture: prevTexture, uniforms, defines } = this
set splat(value: Texture) {
const { splat: prevTexture, uniforms, defines } = this
const uniformmap = uniforms.get('splat')
const uniformuvTransform = uniforms.get('uvTransform')

Expand Down Expand Up @@ -167,11 +173,11 @@ class CRTShapeEffect extends Effect {
}

getTexture() {
return this.texture
return this.splat
}

setTexture(value: Texture) {
this.texture = value
this.splat = value
}

get aspectCorrection() {
Expand All @@ -191,15 +197,15 @@ class CRTShapeEffect extends Effect {
}

get uvTransform() {
const texture = this.texture
return !!texture?.matrixAutoUpdate
const splat = this.splat
return !!splat?.matrixAutoUpdate
}

set uvTransform(value: boolean) {
const texture = this.texture
const splat = this.splat

if (ispresent(texture)) {
texture.matrixAutoUpdate = value
if (ispresent(splat)) {
splat.matrixAutoUpdate = value
}
}

Expand All @@ -221,65 +227,40 @@ class CRTShapeEffect extends Effect {
}

update(): void {
if (this.texture?.matrixAutoUpdate) {
this.texture.updateMatrix()
if (this.splat?.matrixAutoUpdate) {
this.splat.updateMatrix()
}
}
}

export type CRTShapeProps = EffectProps<typeof CRTShapeEffect>
export const CRTShape = wrapEffect(CRTShapeEffect)

const CRTLinesFragShader = `
uniform float viewheight;
// const CRTLinesFragShader = `
// uniform float viewheight;

void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
float rate1 = 0.002;
float stab1 = 1.5;
float fuzz1 = 1.35;
float cycle1 = (uv.y + time * rate1) * viewheight * fuzz1;
float signal1 = sin(cycle1) + stab1;
float rate2 = 0.2;
float scale2 = 0.01;
float stab2 = 1.99;
float cycle2 = (uv.y * viewheight * scale2) - time * rate2;
float signal2 = sin(cycle2) + stab2;
float shade = smoothstep(0.0, 1.0, signal1);
float light = 1.0 - (smoothstep(0.0, 1.0, pow(signal2, 128.0)));
vec3 c = mix(vec3(0.0), vec3(1.0), smoothstep(0.0, 1.0, shade + light * 0.25));
outputColor = vec4(c, inputColor.a);
}
`
// void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
// float row = round(uv.y * viewheight);
// float alt = mod(row, 2.0);
// outputColor = vec4(vec3(alt), inputColor.a);

type CRTLinesOpts = {
viewheight?: number
}
// // float rate1 = 0.002;
// // float stab1 = 1.5;
// // float fuzz1 = 1.35;
// // float cycle1 = (uv.y + time * rate1) * viewheight * fuzz1;
// // float signal1 = sin(cycle1) + stab1;

class CRTLinesEffect extends Effect {
// eslint-disable-next-line no-empty-pattern
constructor({ viewheight }: CRTLinesOpts = {}) {
super('CRTLinesEffect', CRTLinesFragShader, {
blendFunction: BlendFunction.MULTIPLY,
uniforms: new Map<string, Uniform>([
['viewheight', new Uniform(viewheight ?? 128)],
]),
})
}
// // float rate2 = 0.2;
// // float scale2 = 0.01;
// // float stab2 = 1.99;
// // float cycle2 = (uv.y * viewheight * scale2) - time * rate2;
// // float signal2 = sin(cycle2) + stab2;

// update(
// _renderer: WebGLRenderer,
// inputBuffer: WebGLRenderTarget<Texture>,
// ): void {
// const viewheight = this.uniforms.get('viewheight')
// if (viewheight) {
// viewheight.value = inputBuffer.height
// }
// }
}
// // float shade = smoothstep(0.0, 1.0, signal1);
// // float light = 1.0 - (smoothstep(0.0, 1.0, pow(signal2, 128.0)));

// // vec3 c = mix(vec3(0.0), vec3(1.0), smoothstep(0.0, 1.0, shade + light * 0.25));

export type CRTLinesProps = EffectProps<typeof CRTLinesEffect>
export const CRTLines = wrapEffect(CRTLinesEffect)
// // outputColor = vec4(c, inputColor.a);
// }
// `
5 changes: 2 additions & 3 deletions zss/terminal/terminal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { NearestFilter, Vector2 } from 'three'
import { STATS_DEV } from 'zss/config'
import { createplatform } from 'zss/platform'

import { CRTShape, CRTLines } from './crt'
import { CRTShape } from './crt'
import { Framing } from './framing'
import { Gadget } from './gadget'
import decoimageurl from './scratches.jpg'
Expand Down Expand Up @@ -78,8 +78,7 @@ export function Terminal() {
radialModulation
modulationOffset={0.5}
/>
<CRTLines viewheight={viewheight} />
<CRTShape texture={splat} />
<CRTShape splat={splat} viewheight={viewheight} />
</EffectComposer>
</Suspense>
</>
Expand Down

0 comments on commit c8be897

Please sign in to comment.