webgl

sixgod_h6 小时前
webgl·three.js
Threejs源码系列- Object3Dthree.js核心类核心目标一致 最终都是为了计算对象的世界矩阵(matrixWorld),该矩阵表示对象在全局坐标系中的位置、旋转和缩放的综合变换,计算公式相同:
烛阴1 天前
前端·webgl
ClampWrite a GLSL program that draws a diagonal line from the bottom left corner of the texture to the top right corner. The line should have a width of 0.2 in normalized coordinates and be colored in (1.0, 0.3, 0.3). Additionally, ensure that the line is limi
答案answer1 天前
前端·webgl·three.js
three.js 实现几个好看的文本内容效果在three.js中目前作者已知创建文本的方法有四种:今天给大家分享一下如何使用 Canvas2D + THREE.CanvasTexture 的方法实现创建多个不同文本样式内容的效果
sixgod_h2 天前
webgl·three.js
Threejs源码系列- Quaternion通过 ES6 的 Symbol.iterator 实现,使得四元数实例可以被迭代(即可用在 for...of 循环、扩展运算符等场景中)
sixgod_h2 天前
前端·webgl
Threejs源码系列- MathUtils(2)用于将角度(度)转换为弧度,是 Three.js 中处理角度与弧度转换的基础工具函数。该函数逻辑简洁,是 Three.js 中角度单位转换的核心工具,确保了开发过程中角度参数的一致性和正确性。
sixgod_h2 天前
前端·webgl
Threejs源码系列- MathUtils(1)将一个数值从一个范围线性映射到另一个范围在 3D 图形中常用于:mapLinear 实现了线性插值的逆过程,它将输入值 x 从原始范围 [a1, a2] 映射到目标范围 [b1, b2],映射结果保持线性关系。
烛阴3 天前
前端·webgl
DotWrite a program that draws a triangle in the center of the screen. The triangle should have an apex at (0.5, 0.75) in normalized device coordinates, and an apex angle of 120 degrees. The height of the triangle should be 0.5 times the height of the screen.
刘皇叔code4 天前
webgl·three.js
PBR学习笔记与Three.js中MeshPhysicalMaterial源码阅读PBR,全称Physically Based Rendering,翻译为基于物理的渲染技术,是遵循现实世界的物理规律的渲染技术,相比于基于经验的模型,PBR在一定程度上是物理正确的,所以在真实感上更加出色。在SIGGRAPH 2012上,迪士尼提出了著名的Disney Principled BRDF之后,PBR有了统一的标准,而且这一标准简单易用,简化了PBR的制作流程,被很多三维引擎和软件使用,如Unity, Unreal、3D Studio Max等。 Three.js也提供了PBR渲染技术,那就是M
烛阴4 天前
前端·webgl
Vector Normaliztion -- 向量归一化Write a shader program that divides the screen into two equal parts. The origin of the left part is at (0.25, 0.5), and the origin of the right part is at (0.75, 0.5). In the left part, display the cosine of the angle between the positive X-axis and the v
allenjiao5 天前
javascript·arcgis·gis·webgl·cesium·三维·风场
Cesium粒子系统模拟风场动态效果基于 Cesium 实现风向分布可视化的完整 Web 应用代码,采用粒子系统模拟风场动态效果,支持交互式参数调整:
康康的幸福生活5 天前
前端·javascript·webgl
webgl2 方法解析: uniformBlockBinding()uniformBlockBinding() 是 WebGL2 中用于将统一变量块(Uniform Block)绑定到特定绑定点的方法。
康康的幸福生活5 天前
前端·javascript·webgl
webgl2 方法解析: uniforms buffer objectUniforms Buffer Object (UBO) 是 WebGL2 引入的一项重要功能,它允许开发者更高效地管理和传递着色器中的 uniform 变量。
康康的幸福生活5 天前
前端·javascript·webgl
webgl2 方法解析: bindBufferBase()bindBufferBase() 是 WebGL2 中用于将缓冲区对象绑定到特定索引目标的方法,常用于统一缓冲区对象(UBO)和变换反馈缓冲区等场景。
烛阴5 天前
前端·webgl
Sin -- 重复的、流动的波浪Draw an image with 5 sinusoidal waves coming out from the center of the screen. The waves should be based on the distance from each pixel to the center. Adjust the sine values to a range from 0 to 1, and use these values to control the brightness of the r
你大爷的,这都没注册了6 天前
缓存·webgl
webgl渲染管线中的帧缓存,有什么内容webgl渲染管线中帧缓存,是渲染流程的最终目的地,也是GPU与屏幕之间的桥梁。它本质上是GPU内存中一块特殊区域,存储了渲染结果的所有必要信息
烛阴8 天前
前端·webgl
Atan--着色器中的角度计算Create a gradient that transitions from red to green. The weight of each pixel should be determined by the angle between the center-to-pixel ray and the x-axis. Limit the gradient to a circular area with a diameter equal to the height of the texture.
烛阴8 天前
前端·webgl
Aspect Ratio -- 宽高比Write a shader that draws a red circle in the center of the screen. The circle should have a radius of 0.25 times the height of the screen. For aspect ratio correction, adjust the circle's dimensions to account for landscape orientation.
烛阴9 天前
前端·webgl
Distance / Length 深入理解Try to fill pixels in red that are within 0.25 of the texture center in normalized coordinates.
烛阴10 天前
前端·webgl
Int / FloorCreate a shader program that generates a gradient image using an array of 5 colors. The colors are defined in the following array:
烛阴11 天前
前端·webgl
Ceil -- 从平滑到阶梯Create 10 equally sized vertical sections on the screen and label them with sequential numbers from 1 to 10. Adjust the intensity of the red color in each section based on its assigned number (0.1, 0.2 ... 1.0). This will result in a gradient effect where