qq_22849251的博客

【模型矩阵】matrix是某个节点的本地坐标下的模型矩阵matrixWorld是这个节点的世界坐标下的模型矩阵因此需要一次相乘如scene根节点，在render的时候执行scene. updateMatrixWorldthis.matrixWorld.multiplyMatrices( this.parent.matrixWorld, this.matrix );遍历执行计算子节点 孙节点的updatematrix计算得到matrix本地矩阵和updatematrixworld计算得到matri

首先glsl中矩阵存储/向量存储是列优先，就是《pvm*position》的形式，从three的shader里面看出gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );解析 modelViewMatrix = object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );// camera.matr

cameraPosition 世界坐标系中相机位置 vec3normalMatrix ==》normalize(normalMatrix * normal) 得到相机坐标系中顶点的单位法向量

THREE脉冲圈实现（shader借鉴shadertoy）1.shadertoy中具体glsl2.THREE中glsl3 不同的地方3.13.2效果预览：1.shadertoy中具体glslshadertoy传送地址 vec3 hsb2rgb(in vec3 c) { vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0,0.0,1.0 );

THREE内置材质Shader修改(以SpriteMaterial传新增的uniform为例)1.在sprite中新增一个属性,此处是isOpen3D2.在WebGLRender.js主渲染函数render中传入sprite的isOpen3D属性值,此处是以uniform形式传入3.在sprite_vert.glsl使用该uniform即可...

1.大气模糊shaderhttps://blog.csdn.net/srk19960903/article/details/787342382.卡通shaderhttps://blog.csdn.net/srk19960903/article/details/690714003.菲涅尔反射shaderhttps://zhuanlan.zhihu.com/p/38548428 //算法https://codepen.io/mysisi/details/xYNWNZ/ //代码<s

背景本文主要参考下文https://zhuanlan.zhihu.com/p/58641686有关BRDF计算对于环境间接光的实现主要使用IBL技术，但是BRDF运算量太大，对于高端平台来说，它是使用Monte Carlo蒙特卡洛方法，把积分问题转换成求和问题，把积分问题转换成求和问题，整合来进行预计算的，并存储于二维LUT中，LUT（https://www.jianshu.com/p/fdec2a5e889f?utm_campaign=hugo&utm_content=note&u

1.webgl原生https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-environment-maps.htmlprecision highp float; // 从顶点着色器传入的。varying vec3 v_worldPosition;varying vec3 v_worldNormal; // 纹理。uniform samplerCube u_texture; // 相机位置。uniform vec3 u_world

直接漫反射项vec3 BRDF_Diffuse_Lambert( const in vec3 diffuseColor ) { return RECIPROCAL_PI * diffuseColor;} // validated菲涅尔项vec3 F_Schlick( const in vec3 specularColor, const in float dotLH ) { // Original approximation by Christophe Schlick '94 /.

1.顶点着色export default /* glsl */`#define PHONGvarying vec3 vViewPosition;#ifndef FLAT_SHADED varying vec3 vNormal;#endif#include <common>#include <uv_pars_vertex>#include <uv2_pars_vertex>#include <displacementmap_pars_ve

export default /* glsl */`#define PHYSICAL //定义物理材质的宏varying vec3 vViewPosition; //相机空间顶点位置#ifndef FLAT_SHADED //flat着色 varying vec3 vNormal; #ifdef USE_TANGENT varying vec3 vTangent; varying vec3 vBitangent; #en

webgl这块内存管理很关键，以前使用对象初始化mesh后，通过parent.remove(mesh)移除后感觉就完事了，但是事实好像不是这么回事，需要对geometry.dispose以及mesh.dispose等等这里具体可在WebGLGeometries.jsWebGLObjects.js等文件中看到当mesh初始化的时候，mesh和geometry等都会加一个dispose事件，当执行dispose函数的时候，会触发这个事件进行内存销毁，见下：...

1.初始化1.初始化两个WebGLRenderTarget，分别是writeBuffer = new WebGLRenderTarget（）readBuffer = new WebGLRenderTarget（）2.renderToScreen=true3.this.passes = [];//放置通道// 这里就是默认先初始化一个当前场景的图片，给一个4.this.copyPass = new ShaderPass( CopyShader );2.rendervar pass, i, i

https://www.cnblogs.com/lst619247/p/9098845.html最终解决方法material.polygonOffset=true； 如 material.polygonOffsetFactor = -4.9

THREE.Sprite详解问题背景1.sprite_vert.glsl解析问题背景因为之前想修改sprite使得可以不面向屏幕，正常立起来和3D文字一样，对此研究了下THREE对这块的实现原理。1.sprite_vert.glsl解析uniform float rotation;uniform vec2 center;//默认0.5,0.5#include <common>#include <uv_pars_vertex>#include <fog_pars_

THREE.Object3D源码解析applyMatrix4rotateOnWorldAxis（世界坐标系下旋转）rotateOnAxis（本地坐标系下旋转工具函数）、rotate（旋转）translateOnAxis（平移的工具函数）、 translatelocalToWorld（本地坐标转世界坐标）worldToLocal（世界转本地）traverse（遍历子）updateMatrixupdateMatrixWorld（重要）（scene来使用遍历更新自身及所有子对象的矩阵）applyMatrix4

THREE中透明物体绘制原理解析1.WebGL中透明物体绘制原理1.1开启深度测试和Blend功能1.2首先绘制所有不透明的物体队列1.3关闭深度写入功能1.4绘制所有半透明的物体1.5释放深度缓冲区，使之可读可写2.THREE中透明物体绘制相关2.1WebGLStae.js2.2 材质1.WebGL中透明物体绘制原理1.1开启深度测试和Blend功能开启深度测试gl.enable(gl.DEPTH_TEST)开启混合gl.enable(gl.BLEND)指定混合函数gl.blendFunc

THREE.Matrix4源码详解1.THREE.Matrixset函数：copyPosition函数（重要）makeTranslation（得到平移矩阵）transpose（矩阵转置）setPosition（设置平移参数）getInverse（矩阵求逆）scale（矩阵*scale）makeRotationX（传入角度得到绕X轴的旋转矩阵和备注不一样）makeRotationY（传入角度得到绕Y轴的旋转矩阵和备注一样）makeRotationZ（传入角度得到绕Z轴的旋转矩阵和备注不一样）makeRotat