TypeScript painterState.getShade函數代碼示例

import { getShade, getSketch } from 'shared-utils/painterState'
import { repeat, stop } from 'shared-utils/scheduler'
import { canvas, gl, painter } from './context'
import { lineForm, pointsForm, updateGeometries } from './geometries'
import { updateNodes } from './nodes'
import lineFrag from './shaders/line.frag'
import lineVert from './shaders/line.vert'
import pointFrag from './shaders/point.frag'
import pointVert from './shaders/point.vert'

// ===== shaders =====

const pointsShade = getShade(painter, 'point').update({
	vert: pointVert,
	frag: pointFrag,
})

const linesShade = getShade(painter, 'line').update({
	vert: lineVert,
	frag: lineFrag,
})

// ===== objects =====

const points = getSketch(painter, 'point').update({
	form: pointsForm,
	shade: pointsShade,
	uniforms: { size: [canvas.width, canvas.height] },
})

const lines = getSketch(painter, 'lines').update({

import { getShade } from 'shared-utils/painterState'
import { painter } from './context'
import groundFrag from './glsl/ground-frag.glsl'
import groundVert from './glsl/ground-vert.glsl'
import objectFrag from './glsl/object-frag.glsl'
import objectVert from './glsl/object-vert.glsl'
import screenFrag from './glsl/screen-frag.glsl'
import screenVert from './glsl/screen-vert.glsl'

export const groundShade = getShade(painter, 'ground').update({
	vert: groundVert,
	frag: groundFrag,
})

export const objectShade = getShade(painter, 'object').update({
	vert: objectVert,
	frag: objectFrag,
})

export const screenShade = getShade(painter, 'screen').update({
	vert: screenVert,
	frag: screenFrag,
})

import {
	floorMirrorMatrix,
	floorMirrorView,
	floorTransform,
	wallsTransform,
} from './state'

// ===== Settings =====

painter.updateDrawSettings({
	enable: [gl.DEPTH_TEST],
})

// ===== Shaders =====

const wallsShade = getShade(painter, 'walls').update({
	vert: wallsVert,
	frag: wallsFrag,
})

const groundShade = getShade(painter, 'ground').update({
	vert: groundVert,
	frag: groundFrag,
})

// ===== objects =====

const wallsSketch = getSketch(painter, 'walls').update({
	form: wallsForm,
	shade: wallsShade,
	uniforms: {

import { TextureData } from 'tvs-painter'
import { makeClear } from 'tvs-painter/dist/utils/context'
import { plane } from 'tvs-painter/dist/utils/geometry/plane'
import { events, gl, painter, state, State } from './context'
import frag from './shaders/geo-frag.glsl'
import vert from './shaders/geo-vert.glsl'
import lightFrag from './shaders/light-frag.glsl'

// Forms

const geometry = plane(10, 10, 0, 0)
const planeForm = getForm(painter, 'plane').update(geometry)

// Shades

const geoShade = getShade(painter, 'geo').update({
	frag,
	vert,
})

// Textures

const texture = getFrame(painter, 'tex').update({ texture: {} })

const img = new Image()
img.onload = () => {
	texture.update({
		texture: {
			asset: img,
			minFilter: 'LINEAR_MIPMAP_LINEAR',
			magFilter: 'LINEAR',

		{
			flipY: true,
			wrap: 'REPEAT',
		},
	],
})

// ===== scene =====

const planMat = mat4.fromTranslation(mat4.create(), [0, 0, -3])
const rotation = 0.001
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'),