NCQuan-CSDN博客

原创 Three Sprite Shader

总结：点精灵其实就是一个平面，渲染时忽略模型和视图矩阵中的旋转信息，只按照固定的旋转角度呈现，平面始终面向相机。

2022-11-29 09:46:06 203 1

WebGL空间变换局部坐标系——》世界坐标系——》相机坐标系——》剪裁坐标系——》规范化设备坐标系——》屏幕坐标系模型变换：world.xyzw = modelMatrix * position.xyzw;视图变换:：eye.xyzw = viewMaterix * world.xyzw;投影变换：clip.xyzw = projectMatrix * eye.xyzw;透视除法(w归1化)：ndc.xyzw = clip.xyzw / clip.w;视口变换：screen.xy = (nd

2021-12-16 14:48:20 1129

原创 threejs-剖切

1.剖切整体，直接设置渲染器的全局剖切面，空间中与该平面点积为负的点将被切掉。const globalPlane = new THREE.Plane( new THREE.Vector3( - 1, 0, 0 ), 0.1 );renderer.clippingPlanes = [globalPlane];2.剖切某个对象，设置该对象的材质的剖切面，并设置渲染器开启对象级剖切。const localPlane = new THREE.Plane( new THREE.Vector3( 0, - 1

2021-04-21 17:06:18 2414 3

原创 threejs-绘制剖切面

以圆柱体为例，通过改变material.side绘制同一物体所显示的效果是不同的，见下图。圆柱体_前圆柱体_后若剖切面正好是圆柱体的顶面所在面，那么圆柱体_后与圆柱体_前的差值部分正好就是剖切面，所以借助模板测试便可实现剖切面的绘制。先看一下圆柱体_后、圆柱体_前、剖切面的材质参数设置。圆柱体_后和圆柱体_前都需要关闭深度检测、深度写入、颜色写入，因为他们的主要目的是使模板缓冲区中最终记录插值部分即剖切面。模板缓冲区初始值都是0，圆柱体_后的模板测试行为是总是通过且通过后值+1，圆柱体_前的模板

2021-04-21 14:22:36 2614

原创 threejs-热力图(shader)

相比于通过改变imageData的方式，本次将透明度阶梯图和温度调色板图传入着色器，在着色器中进行纹理采样最终生成热力图。着色器代码很简单，先对透明度阶梯图采样，再根据采样值对温度调色板图采样得到最终片元颜色。<script type="x-shader/x-vertex" id="vertexshader"> varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * mod

2021-04-21 10:55:17 1256

原创 threejs-热力图

1.绘制温度调色板let createPalette = () => { //颜色条的颜色分布 let colorStops = { 1.0: "#f00", 0.8: "#e2fa00", 0.6: "#33f900", 0.3: "#0349df", 0.0: "#fff" } //颜色条的大小 let width = 256, height = 10 // 创建c

2021-04-21 10:26:50 1994

原创 Threejs-绘制可设置宽度的线

1.设备朝向控制器(DeviceOrientationControls)该控制器可以使得摄像机依据设备的朝向(手机陀螺仪)来进行调整。let controls = new THREE.DeviceOrientationControls( camera );function animate() { controls.update(); }2.飞行控制器(FlyControls)飞行模拟控...

2019-10-14 18:25:12 5414

原创模型描边（一）—— three.js后期处理实现

3D开发—模型描边欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计，...

2019-08-26 12:28:40 3969 5

原创模型描边（二）—— three.js着色器法线延伸

描边效果是游戏里面非常常用的一种效果，一般是为了凸显游戏中的某个对象，会给对象增加一个描边效果。例如最常见的LOL中的防御塔，我们把鼠标移动到塔上，就会有很明显的描边效果：简单的描边效果原理：我们的描边效果，肯定就是要让模型更“胖”一点，能够把我们原来的大小包裹住；微观一点来看，一个面，如果我们让它向外拓展，而我们指的外，也就是这个面的法线所指向的方向，那么就让这个面朝着法线的方向平移一点...

2019-08-26 12:28:18 1171

NCQuan