TypeScript painterState.addSystem函數代碼示例

import { addSystem } from 'shared-utils/painterState'
import { events, paint } from './context'

const ctx = paint.getContext('2d')
if (!ctx) throw Error('unable to initialize 2d context')

const data = ctx.getImageData(0, 0, paint.width, paint.height)

for (let i = 0; i < data.data.length; i += 4) {
	data.data[i] = Math.random() > 0.5 ? 255 : 0
	data.data[i + 3] = 255
}

ctx.putImageData(data, 0, 0)

addSystem('paint', (e, s) => {
	if (e === events.CLEANUP_PAINT) {
		ctx.fillStyle = 'black'
		ctx.fillRect(0, 0, paint.width, paint.height)
	}

	const d = s.device
	if (e === events.PROCESS_PAINT && d.mouse.dragging && d.mouse.drag.event) {
		const { clientX, clientY } = d.mouse.drag.event
		const x = Math.floor((clientX / window.innerWidth) * paint.width)
		const y = Math.floor((clientY / window.innerHeight) * paint.height)
		ctx.fillStyle = 'white'
		ctx.fillRect(x, y, 1, 1)
	}
})

export const floorTransform = mat4.create()

export const floorMirrorView = mat4.create()

const planeEquation = geo.planeFromNormalAndCoplanarPoint(
	[0, 1, 0],
	[0, groundHeight, 0]
)
export const floorMirrorMatrix = geo.mirrorMatrixFromPlane(planeEquation)

addSystem('state', (e, s) => {
	if (e === events.FRAME) {
		time += s.device.tpf

		quat.fromEuler(
			rotation,
			Math.sin(0.0007 * time) * 1.1,
			time * 0.001,
			Math.sin(0.0008 * time) * 1.1
		)

		mat4.fromRotationTranslationScaleOrigin(
			wallsTransform,
			rotation,
			[0, 0, 0],
			[1, 1, 1],
			[0, 100, 0]
		)
	}
})

	bufferStructure: [bufferSpec, bufferSpec, bufferSpec, bufferSpec],
})

const lightLayer = getEffect(painter, 'light').update({
	frag: lightFrag,
	uniforms: {
		eyePosition: () => state.viewPort.camera.position,
		lightMat: () => state.scene.lightTransforms[0],
		view: () => state.viewPort.camera.viewMat,
		tex: () => texture.image(),
		positions: scene.image(0),
		normals: scene.image(1),
		uvs: scene.image(2),
		colors: scene.image(3),
	},
	drawSettings: {
		enable: [gl.BLEND],
		clearBits: makeClear(gl, 'color'),
	},
})

export const light = getFrame(painter, 'light').update({
	layers: lightLayer,
})

addSystem<State>('renderer', e => {
	if (e === events.RESIZE) {
		scene.update()
	}
})

const projection = mat4.perspective(mat4.create(), 45, 1, 0.01, 10)

const form = getForm(painter, 'plane').update(plane(2, 2))

const shade = getShade(painter, 'plane').update({
	vert: planeVert,
	frag: planeFrag,
})

export const sketch = getSketch(painter, 'plane').update({
	form,
	shade,
	uniforms: {
		projection,
		transform: () => mat4.rotateY(planMat, planMat, rotation),
		tex: () => automaton.image(),
	},
	drawSettings: {
		clearColor: [0.0, 1.0, 0.0, 1.0],
		clearBits: makeClear(gl, 'color'),
	},
})

// ===== state =====

addSystem('renderer', e => {
	if (e === events.FRAME) {
		paintFrame.update({ texture: { asset: paint } })
	}
})

import './state/tiles'
import './viewport'

import { addSystem, dispatch } from 'shared-utils/painterState'
import { repeat } from 'shared-utils/scheduler'
import { events, painter, State } from './context'
import { tiles } from './renderer'

// state.device.sizeMultiplier = window.devicePixelRatio

addSystem<State>('start', (e, s) => {
	if (e === events.ON_IMAGES_LOADED) {
		repeat(tpf => {
			s.device.tpf = tpf
			dispatch(events.FRAME)
			painter.draw(tiles)
		}, 'loop')
	}
})

dispatch(events.INIT)

const blurEffect = getBlurByAlphaEffect(painter, 'blur', {
	strength: 4,
	strengthOffset: 0.3,
	blurRatioVertical: 3,
	size: [256, 256],
})

export const mirrorScene = getFrame(painter, 'mirror').update({
	layers: [mirrorSceneLayer, blurEffect],
	width: 256,
	height: 256,
	bufferStructure: [
		{
			magFilter: 'LINEAR',
			minFilter: 'LINEAR',
		},
	],
})

export const scene = getFrame(painter, 'scene').update({
	layers: sceneLayer,
})

addSystem<State>('renderer', e => {
	switch (e) {
		case events.RESIZE:
			scene.update()
	}
})

addSystem<State>('render', (e, s) => {
	switch (e) {
		case events.ON_IMAGES_LOADED:
			each((img, key) => {
				textures[key] = getFrame(painter, key).update({
					texture: {
						minFilter: 'LINEAR_MIPMAP_LINEAR',
						magFilter: 'LINEAR',
						asset: img,
					},
				})
			}, s.tiles.images)
			return

		case events.NEW_ACTIVE_TILES:
			tiles.update({
				form,
				shade,
				uniforms: s.tiles.activeTiles.map(tile => ({
					view: () => state.viewPort.camera.viewMat,
					projection: () => state.viewPort.camera.projectionMat,
					transform: tile.transform,
					image: textures[tile.tileSpecId] && textures[tile.tileSpecId].image(),
					color: tile.color,
					connections: tile.connections,
				})),
			})
	}
})