Skip to main content

Class: Program

着色器程序对象封装，主要功能如下：

  • 创建Program管线，编译顶点着色器和片段着色器源码；
  • 管理Attribute属性
  • 管理Uniform属性
  • 渲染状态的切换

示例代码：

Result
Loading...
Live Editor
function render(props) {
  const drawModelVertex = `
    attribute vec2 uv;
    attribute vec3 position;
    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;

    varying vec2 vUv;

    void main() {
        vUv = uv;

        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

        // gl_PointSize only applicable for gl.POINTS draw mode
        gl_PointSize = 5.0;
    }
    `;

  const drawModelFragment = `
    precision highp float;

    uniform float uTime;
    varying vec2 vUv;

    void main() {
        gl_FragColor.rgb = 0.5 + 0.3 * sin(vUv.yxx + uTime) + vec3(0.2, 0.0, 0.1);
        gl_FragColor.a = 1.0;
    }
    `;

  const refDom = useRef(null);

  const init = () => {
    const canvas = refDom.current;

    canvas.width = canvas.clientWidth;
    canvas.height = canvas.clientHeight;
    const renderer = new Renderer(canvas, {
      alpha: true,
    });

    const fov = 15;
    const nearZ = 0.1;

    const farZ = 100;
    const camera = new PerspectiveCamera(fov, canvas.width / canvas.height, nearZ, farZ);
    camera.position.z = 15;

    function resize(target) {
      const { width, height } = target.getBoundingClientRect();
      renderer.setSize(width, height);
      camera.aspect = width / height;
    }

    const scene = new Scene();

    const geometry = new Geometry(renderer, {
      position: {
        size: 3,
        data: new Float32Array([
          -0.5, 0.5, 0,
          -0.5, -0.5, 0,
          0.5, 0.5, 0,
          0.5, -0.5, 0
        ])
      },
      uv: {
        size: 2,
        data: new Float32Array([0, 1, 1, 1, 0, 0, 1, 0])
      },
      index: {
        data: new Uint16Array([0, 1, 2, 1, 3, 2])
      },
    });

    const program = new Program(renderer, {
      vertexShader: drawModelVertex,
      fragmentShader: drawModelFragment,
      uniforms: {
        uTime: { value: 0 },
      },
    });

    const points = new Mesh(renderer, { mode: renderer.gl.POINTS, geometry, program });
    points.setParent(scene);
    points.position.set(-1, 1, 0);

    const lineStrip = new Mesh(renderer, { mode: renderer.gl.LINES, geometry, program });
    lineStrip.setParent(scene);
    lineStrip.position.set(1, 1, 0);

    const lineLoop = new Mesh(renderer, { mode: renderer.gl.LINE_LOOP, geometry, program });
    lineLoop.setParent(scene);
    lineLoop.position.set(-1, -1, 0);

    const triangles = new Mesh(renderer, { mode: renderer.gl.TRIANGLES, geometry, program });
    triangles.setParent(scene);
    triangles.position.set(1, -1, 0);

    const raf = new Raf((t) => {
      program.setUniform('uTime', t);
      renderer.render({ scene, camera });
    });

    return {
      canvas,
      resize,
    }
  }

  useEffect(() => {
    const { canvas, resize } = init();

    observe(canvas, resize);

    return () => {
      unobserve(canvas, resize);
    };
  }, []);

  return (
    <div className="live-wrap">
      <canvas className="scene-canvas" ref={refDom}></canvas>
    </div>
  );
}

Hierarchy​

Table of contents​

Constructors​

Properties​

Accessors​

Methods​

Constructors​

constructor​

• new Program(renderer, options?): Program

Parameters​

NameType
rendererany
optionsPartial<ProgramOptions>

Returns​

Program

Overrides​

Resource.constructor

Defined in​

src/core/Program.ts:336

Properties​

renderer​

• renderer: Renderer

Inherited from​

Resource.renderer

Defined in​

src/core/Base.ts:7

attributeOrder​

• attributeOrder: string

Defined in​

src/core/Program.ts:322

uniforms​

• uniforms: any

Defined in​

src/core/Program.ts:324

id​

• id: string

Inherited from​

Resource.id

Defined in​

src/core/Resource.ts:21

name​

• name: WithUndef<string>

Inherited from​

Resource.name

Defined in​

src/core/Resource.ts:23

userData​

• userData: any

Inherited from​

Resource.userData

Defined in​

src/core/Resource.ts:25

byteLength​

• byteLength: number

Inherited from​

Resource.byteLength

Defined in​

src/core/Resource.ts:28

options​

• options: Partial<ProgramOptions>

Inherited from​

Resource.options

Defined in​

src/core/Resource.ts:30

Accessors​

gl​

• get gl(): WebGLRenderingContext | WebGL2RenderingContext

获取 webgl 实例

Returns​

WebGLRenderingContext | WebGL2RenderingContext

Inherited from​

Resource.gl

Defined in​

src/core/Base.ts:16

rendererState​

• get rendererState(): State

获取渲染状态

Returns​

State

Inherited from​

Resource.rendererState

Defined in​

src/core/Base.ts:23

uniformLocations​

• get uniformLocations(): Map<any, any>

Returns​

Map<any, any>

Defined in​

src/core/Program.ts:419

attributeLocations​

• get attributeLocations(): Map<any, any>

Returns​

Map<any, any>

Defined in​

src/core/Program.ts:423

vertexShader​

• get vertexShader(): VertexShader

获取 VertexShader 对象

Returns​

VertexShader

Defined in​

src/core/Program.ts:430

fragmentShader​

• get fragmentShader(): FragmentShader

获取 FragmentShader 对象

Returns​

FragmentShader

Defined in​

src/core/Program.ts:437

handle​

• get handle(): any

Returns​

any

Inherited from​

Resource.handle

Defined in​

src/core/Resource.ts:47

Methods​

use​

▸ use(): void

Returns​

void

Defined in​

src/core/Program.ts:444

setStates​

▸ setStates(states, merge?): void

设置 Program 的 render state

Parameters​

NameTypeDefault valueDescription
statesPartial<ProgramRenderState>undefined
mergebooleantrue是否使用合并模式，如果为 false 则直接替换

Returns​

void

Defined in​

src/core/Program.ts:503

applyState​

▸ applyState(): void

Returns​

void

Defined in​

src/core/Program.ts:526

setUniform​

▸ setUniform(key, value): void

设置对应的 Uniform 值

Parameters​

NameType
keyany
valueany

Returns​

void

Defined in​

src/core/Program.ts:535

bind​

▸ bind(): void

使用此 Program

Returns​

void

Overrides​

Resource.bind

Defined in​

src/core/Program.ts:544

unbind​

▸ unbind(): void

取消使用此 Program

Returns​

void

Overrides​

Resource.unbind

Defined in​

src/core/Program.ts:551

createHandle​

▸ createHandle(): null | WebGLProgram

Returns​

null | WebGLProgram

Overrides​

Resource.createHandle

Defined in​

src/core/Program.ts:555

deleteHandle​

▸ deleteHandle(): void

Returns​

void

Overrides​

Resource.deleteHandle

Defined in​

src/core/Program.ts:559

destroy​

▸ destroy(): void

销毁此Program

Returns​

void

Overrides​

Resource.destroy

Defined in​

src/core/Program.ts:609

swapHandle​

▸ swapHandle(handle): void

交换为新的 handle（一般我们会用在虚拟 webgl 环境中）

Parameters​

NameType
handleany

Returns​

void

Inherited from​

Resource.swapHandle

Defined in​

src/core/Resource.ts:55

restoreHandle​

▸ restoreHandle(): void

恢复为原有 handle

Returns​

void

Inherited from​

Resource.restoreHandle

Defined in​

src/core/Resource.ts:63

delete​

▸ delete(«destructured»?): Program

Parameters​

NameTypeDefault value
«destructured»Object{}
› deleteChildrenundefined | booleanfalse

Returns​

Program

Inherited from​

Resource.delete

Defined in​

src/core/Resource.ts:74

removeStats​

▸ removeStats(): void

Returns​

void

Inherited from​

Resource.removeStats

Defined in​

src/core/Resource.ts:99

toString​

▸ toString(): string

Returns​

string

Inherited from​

Resource.toString

Defined in​

src/core/Resource.ts:111