- 博客(111)
- 收藏
- 关注
RSS订阅原创 经验/教训/总结/踩坑记录
当着色器中一个变量，表现类似于undefined时（用于大小比较均无反应），要检查其生成过程中是否有矩阵等变量为传入为undefined，导致其也为undefined;
2024-03-21 19:55:44
285
原创 js文件中读取 glsl等格式文件内容以适用vscode、webstorm中的代码提示
【代码】js文件中读取 glsl等格式文件内容以适用vscode、webstorm中的代码提示。
2024-03-08 16:22:36
508
原创 eval 作用域问题
function test(){ eval('var a = 666;'); console.log(a);//666}test();function test2(){ eval('let a = 666;'); console.log(a);//报错，a未定义}test2();class person{ constructor(name){ this.name = name; this.setAge(); } setAge(){ eval('var a = 7
2022-02-15 16:30:15
409
原创 Threejs的材质中修改属性时需要进行重新编译的属性
一、无需进行重编译的属性material.colormaterial.side二、无需进行重编译的属性material.mapmaterial.vertexColors
2021-07-09 09:18:07
436
原创 Varint编码
https://segmentfault.com/a/1190000020500985?utm_source=tag-newest
2021-05-10 14:53:57
188
原创 js中的 & 与 | 运算
在JavaScript中“&&”和“||bai”是逻辑运算符；“&”和“|”是位运算符。四个运算符主要区别是运算方法不一样：1、JavaScript中的位运算符：“&”运算方法：两个数值的个位分别相与，同时为1才得1，只要一个为0就为0。举个例子：31&2 结果为2理由：31的二进制为11111，2的二进制为10 11111&00010的结果为00010，即2控制台运行结果：2、JavaScript中的位运算符：“|”运算方法：两个位只
2021-01-12 16:42:41
10200
原创 WebGL中使用的OpenGL ES版本
OpenGL 1.0发布时间：1992年1月OpenGL 2.0发布时间 ： 2004年 9月7日OpenGL 3.3发布时间 ： 2010年 3月11日OpenGL 4.4发布时间 ： 2013年 7月23日Vulkan 1.1发布时间： 2018年 3月7日
2020-11-16 17:24:46
835
原创 如何解决深度冲突（Z-fighting），画面闪烁的问题
参考：OpenGL教程：深度测试深度冲突一个很常见的视觉错误会在两个平面或者三角形非常紧密地平行排列在一起时会发生，深度缓冲没有足够的精度来决定两个形状哪个在前面。结果就是这两个形状不断地在切换前后顺序，这会导致很奇怪的花纹。这个现象叫做深度冲突(Z-fighting)，因为它看起来像是这两个形状在争夺(Fight)谁该处于顶端。防止深度冲突第一个也是最重要的技巧是永远不要把多个物体摆得太靠近，以至于它们的一些三角形会重叠。通过在两个物体之间设置一个用户无法注意到的偏移值，你可以完全避免这两个物体之
2020-11-05 10:06:57
4195
原创 OpenGL着色器中的坐标系
gl_FragCoord的x和y分量代表了片段的屏幕空间坐标（其中(0, 0)位于左下角）。gl_FragCoord中也包含了一个z分量，它包含了片段真正的深度值。z值就是需要与深度缓冲内容所对比的那个值。
2020-11-04 17:07:34
1618
1
原创 console.log() 输出异常情况
console.log打印出来的内容并不是一定百分百可信的内容。一般对于基本类型number、string、boolean、null、undefined 的输出是可信的。但对于Object 等引用类型来说，则就会出现上述异常打印输出。所以对于一般基本类型的调试，调试时使用console.log来输出内容时，不会存在坑。但调试对象时，最好还是使用打断点(debugger)这样的方式来调试更好。...
2020-09-15 14:18:05
1387
原创 WebGL中顶点数组对象VAO的使用
VAO使用目的：简化缓冲区的绑定过程，即可以减少代码的调用次数，也提升了 WebGL 状态切换的效率。推荐博客：高性能WebGL——使用顶点数组对象 Vertex Array Object
2020-08-18 14:04:26
567
原创 js获取一个函数的参数
function aaa(){ console.log(arguments); //[1,2,3]}aaa(1,2,3);
2020-08-12 14:48:21
2216
原创 相对路径绝对化方法
let a = document.creatElement('a');a.href = './相对路径'; //设置相对路径console.log(a.href); //此时输出的内容为绝对路径 http://localhost:63324/myTest/相对路径
2020-08-12 14:20:32
243
原创 js中的数据结构：树、图
树：见https://www.cnblogs.com/padding1015/p/7729988.html图：见https://www.cnblogs.com/xbblogs/p/9931893.html
2020-08-04 16:56:48
263
原创 Threejs性能优化：Instance实例化几何体 和 Merge合并几何体
1.Instance实例化几何体同一个Geometry ， 同一个 material ，但可以通过索引轻松控制每一个个体insGeometry = new THREE.BoxBufferGeometry(1, 1, 1);//创建具有多个实例的实例化几何体insMesh = new THREE.InstancedMesh(insGeometry, material, total);//修改位置let transform = new THREE.Object3D();for (let ind
2020-07-31 11:31:48
5281
23
原创 在Threejs中实现沿着一条直线路径运动并伴有转向动画
自己定义的一个类如下：功能：实现传入多个锚点生成一条折线并伴有锚点，getPoint(percent)可以获取折线上任意一点的位置，并获取朝向、是否为锚点等信息。run()方法可以让传入mesh或相机等 在折线上运动 //自定义路径类 class myPath { constructor(array) { //将传进来的数组转换为Vec3集合 let pointsArr = [];
2020-07-27 15:13:48
7656
1
原创 在WebGL中使用纹理
//创建纹理cubeTexture = gl.createTexture(); //加载图片 cubeImage = new Image(); cubeImage.src = "./1.jpg"; cubeImage.onload = function () { handleTextureLoaded(cubeImage, cubeTexture); } function handleTextureLoaded(image, texture) { //将创建的纹理绑定到 TE.
2020-07-17 17:00:06
500
原创 如何愉快地在VS Code中编辑shader代码
1.安装gl-canvas插件2.将shader代码放在.glsl的单独的文件中3.设置gl-canvas插件取消勾选紧凑型格式化4.效果：代码高亮，颜色使用便捷
2020-07-17 11:28:31
3109
原创 出现GL_INVALID_VALUE: Index must be less than MAX_VERTEX_ATTRIBS.警告，并且WebGL绘图异常
警告：⚠[.WebGL-0000018B367DE540] GL_INVALID_VALUE: Index must be less than MAX_VERTEX_ATTRIBS.解决办法：请确认着色器中所有使用到的变量都已完成赋值，如有为赋值变量出现并使用将会出现此条警告
2020-07-16 17:02:46
1596
原创 WebGL使用缓冲区向着色器一次性上传大量数据
WebGL使用缓冲区向着色器上传数据1.建 2.绑 3.写 4.配 5.启 //使用顶点缓冲区上传顶点数据 //1.创建 let vertexBuffer = gl.createBuffer(); //2.绑定 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); //3.写入数据 let vertices = new Float32Array([ // 前 -1.0, -1.0, 1.0,
2020-07-14 16:39:57
412
原创 WebGL着色器使用
WebGL着色器使用1.编译 2.链接 3.使用 4.绘图第 ① 步：编译着色器1.1着色器源码：let vShader_source = ` attribute vec4 aPosition; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; attribute float size; //每个顶点的大小 void main(){ // gl_Pos
2020-07-14 16:30:37
395
1
原创 Threejs中的异常问题解决
1.THREE.BufferGeometry 无 setAttribute方法经过测试发现Threejs库使用模块引入和使用script标签src引入并不完全一致，使用src引入无setAttribute方法，需改为使用模块引入。...
2020-04-13 01:02:52
3733
6
原创 GLSL中文使用手册
GLSL 中文手册基本类型:类型说明void空类型,即不返回任何值bool布尔类型 true,falseint带符号的整数 signed integerfloat带符号的浮点数 floating scalarvec2, vec3, vec4n维浮点数向量 n-component floating point vectorbvec2, ...
2020-04-12 16:43:31
1435
原创 使用GLSL画一个随着时间颜色渐变的三角形
使用着色器画一个随着时间颜色渐变的三角形效果：代码：#include <glad/glad.h>#include <GLFW/glfw3.h>#include <iostream>//窗口大小变化回调void framebuffer_size_callback(GLFWwindow* window, int width, int heig...
2020-04-08 15:26:17
1952
原创 使用 OpenGL 绘制一个简单的三角形
名词解释1.GLFWGLFW是一个专门针对OpenGL的C语言库，提供给我们一个窗口和上下文用来渲染。2.GLADGLAD是用来管理OpenGL的函数指针的。因为OpenGL只是一个标准/规范，具体的实现是由驱动开发商针对特定显卡实现的。由于OpenGL驱动版本众多，它大多数函数的位置都无法在编译时确定下来，需要在运行时查询。所以任务就落在了开发者身上，开发者需要在运行时获取函数地址并...
2020-04-07 23:40:31
980
原创 CMake 构建GLFW时 could not find any instance of Visual Studio
解决办法请检查对应版本Visual Studio中是否安装了C++开发环境
2020-04-07 01:01:20
874
原创 Threejs raycaster射线检测非全屏状态下鼠标偏移问题
function initRay() { let getBoundingClientRect = canvas.getBoundingClientRect() // 屏幕坐标转标准设备坐标 let x = ((event.clientX - getBoundingClientRect .left) / canvas.offsetWidth) * 2 - 1;// 标准设备横坐标 l...
2020-04-02 13:24:09
1828
1
原创 ERROR in Entry module not found: Error: Can't resolve './src' in ‘ XXX ’
1.目录结构如下：2. webpack.config.js文件内容如下3.报错内容：解决办法：1.请检查webpack.config.js文件名称是否正确，文件名开头和结尾是否有空格导致webpack找不到配置文件，从而使用了默认的配置。2.或者将index.js文件移动到src目录下即可解决...
2020-04-01 16:32:35
1431
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人