qq_45487080的博客

【代码】webgl着色器利用相关函数编写各种类型图案。

fragment.glslvertex.glsl

/ 从当前绑定的缓冲区中读取顶点数据(index, size, type, normalized是否顶点数据归一, stride相邻两个顶点间的字节数, offset从缓冲区的什么位置开始存储变量)// 一秒钟后，向顶点数据中再添加的一个顶点，修改缓冲区数据，然后清理画布，绘制顶点。// 声明顶点着色器 attribute 变量。// 两秒钟后，清理画布，绘制顶点，绘制线条。2.一秒钟后，在左下角画一个点。// 开启顶点数据的批处理功能。// 获取到顶点着色器中变量。// 创建着色器程序。

/ 片元着色器变量 uniform, precision mediump float是片元着色器的规范。// 存点的位置，如果异步执行drawArrays会导致颜色缓冲区重置，所以在这里我们需要同步执行。// 获取cavans坐标宽高，距离视口尺寸的距离。// 在范围内的片元颜色进行渲染，超出的部分废弃。// 鼠标基于webgl坐标的中心位置。// 获取鼠标距离视口尺寸的距离。// 鼠标在canvas中的位置。// canvas画布的中心位置。// 解决坐标基底的差异。// 解决y方向的差异。

/gl.drawArrays(gl.TRIANGLES, 0, 1) // 三角形。// x, y, z, w齐次坐标(x/w, y/w, z/w)// 着色器： 通过程序代替固定的渲染管线，来处理图像的渲。//gl.drawArrays(gl.LINES, 0, 1) // 线。// 必须要存在 main 函数 (浮点数)// 片元着色器：像素（颜色，纹理）// 要绘制的点的坐标。// 顶点着色器：顶点理解为坐标。// 顶点着色器源码。// 片元着色器源码。

WebGL利用缓冲区绘制三角形

<template></template><script setup>import * as THREE from 'three'import gsap from 'gsap'//导入轨道控制器import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'// 导入 dat.guiimport { GUI } from 'three/addons/libs/lil-gu

<template> <div class="page page0"> <h1>Three.js</h1> <h3>投射光线实现三维物体交互</h3> </div> <div class="page page1"> <h1>Three.js</h1> <h3>炫酷三角形</h3> </div> &lt

/ 将webgel渲染的canvas内容添加到body。// 使用渲染器，通过相机将场景渲染进来。// 设置控制器的阻尼 更真实 惯性。// 设置相机位置 x y z。// 监听画面变化，更新渲染画面。// 鼠标的二维坐标，相机坐标。// 导入 dat.gui。// 更新摄像机的投影矩阵。// 把相机添加到场景中。// 设置渲染的尺寸大小。// 设置渲染器的像素比。// 1000个立方体。// 创建投射光线对象。// 添加坐标轴辅助器。// 鼠标的位置对象。// 监听鼠标的位置。// 创建轨道控制器。

【代码】Three.js点与材质（Points）

/ 2、设置渲染器开启阴影的计算 renderer.shadowMap.enabled = true。// 3、设置光照投射阴影 directionalLight.castShadow = true。// 5、设置物体接收阴影 plane.receiveShadow = true。// 4、设置物体投射阴影 sphere.castShadow = true。//设置three.js渲染区域的尺寸(像素px)// 1、材质要满足能够对光照有反应。// 相机围绕目标进行轨道运动。// 目标：灯光与阴影。

/ texture.wrapS = THREE.MirroredRepeatWrapping // 水平贴图，镜像重复。// texture.wrapT = THREE.RepeatWrapping // 垂直贴图，纹理重复到无穷大。// texture.minFilter = THREE.NearestFilter // 取最接近的。// texture.rotation = Math.PI / 4 // 旋转45°。// texture.offset.x = 0.5 // 向左偏移，负为反。

基于物理渲染，传统渲染是模仿灯光的外观，PBR是模仿光的实际行为，使图形看起来更真实。PBR更加注重对光线物理行为的模拟和计算。传统渲染技术可能无法准确模拟光线在不同材质表面的反射、折射和散射等现象，也无法准确表现光线在空间中的传播和衰减过程。而PBR则通过引入更加精确的光照模型和材质模型，解决了这些问题，从而实现了更加真实的渲染效果。

Three.js中文网18-21入门案例

Three.js中文网1-17入门案例