three WebGLProgram WebGLProgram 有七个属性三个方法参数说明： renderer (W

在WebGL中，WebGLProgram 是用来表示着色器程序的对象，包含了顶点着色器和片段着色器。构造器的作用是创建一个新的 WebGLProgram 实例。

WebGLProgram 有七个属性三个方法

    // WebGLProgram( renderer : WebGLRenderer, cacheKey : String, parameters : Object )

    <template>
    <div id="parkingLot" ref="parkingLot">
    </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as THREE from 'three';
import { WebGLProgram } from 'three/src/renderers/webgl/WebGLProgram.js';
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { XREstimatedLight } from 'three/addons/webxr/XREstimatedLight.js';
const parkingLot = ref();
onMounted(async () => {
    const DOMEl = parkingLot.value;
    // 获取 DOMEl 的宽度和高度，以设置渲染器的大小。
    const width = DOMEl.clientWidth;
    const height = DOMEl.clientHeight;
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize( width, height );
    DOMEl.appendChild( renderer.domElement );
    // 创建一个基本的 Three.js 场景
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    camera.position.z = 5;
    // 一个简单的平面几何体
    const geometry = new THREE.PlaneGeometry(1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const plane = new THREE.Mesh(geometry, material);
    scene.add(plane);
    // 手动创建一个 WebGLProgram
    renderer.compile(scene, camera); // 提前编译场景，确保必要的资源已加载
    const parameters = {
    // 这是一个包含着色器定义的对象，通常用于控制着色器的编译选项（比如启用某些功能或者宏定义）。例如，你可以使用它来启用阴影映射、环境贴图等功能。
        defines: {
            SHADOW_MAP: true,
            ENV_MAP: true
        },
        // 这两个属性指定了顶点着色器和片段着色器的源码
        vertexShader: `
            attribute vec4 a_position;
            uniform mat4 u_modelViewMatrix;
            uniform mat4 u_projectionMatrix;
            void main() {
                gl_Position = u_projectionMatrix * u_modelViewMatrix * a_position;
            }
        `,
        fragmentShader: `
            precision mediump float;
            void main() {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
            }
        `,
        isRawShaderMaterial: true
    };
    const cacheKey = "customShaderKey";
    // 创建一个 WebGLProgram 实例
    const program = new WebGLProgram(renderer, cacheKey, parameters);
    // 使用 WebGLProgram 的相关方法
    console.log(program);
    renderer.render(scene, camera);
});
</script>
<style lang="scss" scoped="scoped">
    #parkingLot {
        width: 940px;
        height: 940px;
        border: 1px solid #ccc;
        margin: 30px auto;
    }
</style>

参数说明：
- renderer (WebGLRenderer):
  - 这是渲染器实例，用来执行渲染操作。它提供了 WebGL 渲染的上下文。

- cacheKey (String):

    - 一个唯一的缓存键，用来标识该着色器程序。如果有多个程序共享相同的着色器代码，它们可以通过此 cacheKey 来避免重复创建。
- parameters (Object):
    - 在 `WebGLProgram` 的构造函数中，第三个参数是一个对象（`parameters`），该对象通常包含一些与着色器程序（`WebGLProgram`）的生成和编译相关的设置。这个参数的目的是让你可以传递一些定制的配置，比如用于优化、处理不同的渲染模式、以及与材质和渲染器的交互。

属性

name : String 相应着色器程序的名称。
id : String 该实例的 id 标识。
cacheKey : String 启用这个 key 之后，能够实现单个 WebGLProgram 不同材料的可重用性。
usedTimes : Integer 此实例用于渲染渲染项的次数。
program : Object 实际的着色器程序。
vertexShader : WebGLShader 顶点着色器。
fragmentShader : WebGLShader 片元着色器。

方法

getUniforms () : Object 返回所有活动态的变量(uniform)位置的name-value映射
getAttributes () : Object 返回所有活动态的顶点属性位置的name-value映射
destroy () : undefined 销毁 WebGLProgram 的实例。

three WebGLProgram

WebGLProgram 有七个属性 三个方法

- cacheKey (String):

WebGLProgram 有七个属性三个方法