还是大剑师兰特
曾是美国普渡大学计算机研究生,现为GIS领域高级前端开发工程师。深耕openlayers、leaflet、cesium、mapbox、echarts、threejs、webgl、canvas、svg等技术,目前正研究GIS大模型在低空经济领域的应用,拥有两项GIS方面的专利。
展开
-
webGL 综合教程100+【目录】
webGL 综合教程100+旨在为开发者提供两大方面的知识信息:(1)提供详细的每个api知识点的详解 (2)提供实战的示例,提供源代码。 在这量大系统性的知识下,给用户提供清晰的思路和示例参考,更好的服务于自己的webGL开发项目。原创 2024-09-18 18:03:53 · 1345 阅读 · 5 评论 -
WebGL入门(039):EXT_shader_texture_lod 简介、使用方法、示例代码
`EXT_shader_texture_lod`扩展为WebGL引入了几种新的内置函数,这些函数允许开发者在片段着色器中控制纹理采样的细节级别。这些函数可以帮助开发者实现更精细的纹理采样控制,从而提高渲染质量。原创 2024-09-10 00:00:00 · 372 阅读 · 14 评论 -
WebGL入门(049):OVR_multiview2 简介、使用方法、示例代码
`OVR_multiview2`扩展为WebGL引入了多视图渲染的支持。这意味着你可以使用一个帧缓冲区来同时渲染多个视图,每个视图都有自己的投影和视图矩阵。这可以显著提高渲染效率,尤其是在虚拟现实应用中。原创 2024-09-18 00:00:00 · 767 阅读 · 11 评论 -
WebGL入门(048):OES_draw_buffers_indexed 简介、使用方法、示例代码
`OES_draw_buffers_indexed`扩展为WebGL添加了对多个颜色附件的更细粒度的控制。这意味着你可以使用片段着色器中的特定函数来分别设置每个颜色附件的输出颜色,而不是使用全局的`gl_FragData`数组。原创 2024-09-17 00:30:00 · 727 阅读 · 17 评论 -
WebGL入门(047):EXT_disjoint_timer_query 简介、使用方法、示例代码
在WebGL中,`EXT_disjoint_timer_query`扩展提供了一种方式来测量渲染操作的时间。这允许开发者在WebGL应用程序中获取渲染时间的精确度量,这对于性能分析和优化非常有用。原创 2024-09-16 00:30:00 · 1046 阅读 · 2 评论 -
WebGL入门(046):EXT_blend_minmax 简介、使用方法、示例代码
在WebGL中,`EXT_blend_minmax`扩展提供了一种方式来使用最小值和最大值混合模式(min/max blend modes)。这允许开发者在片段着色器中使用这些混合模式来合成多个图像或颜色通道。这对于实现某些特殊效果非常有用,例如实现阴影遮罩、颜色分级、图像处理等。原创 2024-09-15 00:30:00 · 727 阅读 · 4 评论 -
WebGL入门(045):ANGLE_instanced_arrays 简介、使用方法、示例代码
`ANGLE_instanced_arrays`扩展为WebGL引入了几个新的方法,允许开发者指定每个实例的偏移量和其他实例化属性,以及一次性渲染多个实例的能力。这特别适用于渲染大量相似物体的情况,比如草丛、树木、粒子系统等。原创 2024-09-14 00:30:00 · 1637 阅读 · 23 评论 -
WebGL入门(044):OES_vertex_array_object 简介、使用方法、示例代码
`OES_vertex_array_object`扩展为WebGL引入了顶点数组对象的概念,这是一种用于封装所有与顶点相关的数据绑定状态的对象。使用VAOs可以减少每次绘制调用前的绑定操作次数,从而提高渲染效率。原创 2024-09-13 00:30:00 · 1527 阅读 · 25 评论 -
WebGL入门(043):EXT_color_buffer_half_float 简介、使用方法、示例代码
在WebGL中,`EXT_color_buffer_half_float`扩展提供了一种方式来使用半精度浮点数(16位)作为颜色缓冲区的格式。这允许开发者在片段着色器中使用较高精度的数据,但占用的空间比单精度浮点数(32位)要少。这对于实现高级渲染技术非常有用,例如高动态范围(HDR)渲染、物理基渲染(PBR)、阴影贴图等,尤其是在内存和带宽受限的情况下。原创 2024-09-12 00:30:00 · 1158 阅读 · 6 评论 -
WebGL入门(042):WEBGL_color_buffer_float 简介、使用方法、示例代码
`WEBGL_color_buffer_float`扩展为WebGL添加了对浮点数颜色缓冲区的支持,允许使用单精度浮点数(32位)或半精度浮点数(16位)作为颜色缓冲区的格式。这比默认的无符号整数或无符号短整数格式提供了更高的精度,使得开发者可以存储和处理更复杂的数据类型。原创 2024-09-11 00:30:00 · 1716 阅读 · 17 评论 -
WebGL入门(041):OES_texture_half_float_linear 简介、使用方法、示例代码
`OES_texture_half_float_linear`扩展为WebGL添加了对半精度浮点数纹理的线性过滤支持。这意味着当你使用半精度浮点数纹理时,可以使用线性插值来平滑地采样纹理,从而避免了使用最近邻插值(nearest neighbor interpolation)时可能出现的块状效果。原创 2024-09-11 00:00:00 · 1205 阅读 · 16 评论 -
WebGL入门(040):OES_texture_half_float 简介、使用方法、示例代码
在WebGL中,`OES_texture_half_float`扩展提供了一种方式来使用半精度浮点数(16位)纹理。这允许开发者在片段着色器中使用较高精度的数据,但占用的空间比单精度浮点数(32位)要少。这对于实现高级渲染技术非常有用,例如高动态范围(HDR)渲染、物理基渲染(PBR)、阴影贴图等,尤其是在内存和带宽受限的情况下。原创 2024-09-10 00:30:00 · 1524 阅读 · 16 评论 -
WebGL入门(038):OES_texture_float_linear 简介、使用方法、示例代码
`OES_texture_float_linear`扩展为WebGL添加了对浮点数纹理的线性过滤支持。这意味着当你使用浮点数纹理时,可以使用线性插值来平滑地采样纹理,从而避免了使用最近邻插值(nearest neighbor interpolation)时可能出现的块状效果。原创 2024-09-09 00:00:00 · 1562 阅读 · 25 评论 -
WebGL入门(037):WEBGL_draw_buffers 简介、使用方法、示例代码
WEBGL_draw_buffers扩展为WebGL添加了对多个颜色附件的支持,使得开发者可以在一个渲染过程中同时更新多个目标。这在实现高级渲染技术时非常有用,例如同时渲染颜色和深度信息、多重曝光效果、后期处理等。原创 2024-09-09 00:00:00 · 781 阅读 · 11 评论 -
WebGL入门(036):OES_texture_float 简介、使用方法、示例代码
在WebGL中,`OES_texture_float`扩展提供了一种方式来使用浮点数纹理。这允许开发者在片段着色器中使用更高精度的数据,这对于实现高级渲染技术非常有用,例如高动态范围(HDR)渲染、物理基渲染(PBR)、阴影贴图等。原创 2024-09-08 00:30:00 · 828 阅读 · 5 评论 -
WebGL入门(035):OES_standard_derivatives 简介、使用方法、示例代码
`OES_standard_derivatives`扩展为WebGL引入了几种新的内置函数,这些函数可以帮助开发者计算片段位置或其他纹理坐标的偏导数。这使得开发者能够在片段着色器中实现更复杂的光照效果、纹理扭曲以及其他基于导数的算法。原创 2024-09-08 00:00:00 · 1048 阅读 · 0 评论 -
WebGL入门(034):EXT_sRGB 简介、使用方法、示例代码
在WebGL中,`EXT_sRGB`扩展提供了一种方式来支持sRGB色彩空间的纹理和帧缓冲区。sRGB是一种标准的色彩空间,广泛应用于显示器和其他输出设备中。使用sRGB色彩空间可以确保颜色在不同设备间的一致性。原创 2024-09-07 00:30:00 · 1121 阅读 · 6 评论 -
WebGL入门(033):EXT_texture_filter_anisotropic 简介、使用方法、示例代码
在WebGL中,`EXT_texture_filter_anisotropic`扩展提供了一种方式来应用各向异性过滤(anisotropic filtering, AF)到纹理上。各向异性过滤是一种高级的纹理过滤技术,可以显著改善倾斜纹理的视觉质量,特别是在纹理边缘处。原创 2024-09-07 00:00:00 · 981 阅读 · 0 评论 -
WebGL入门(032):WEBGL_lose_context 简介、使用方法、示例代码
在WebGL中,`WEBGL_lose_context`扩展提供了一种机制来模拟WebGL上下文丢失的情况。这对于测试WebGL应用程序在上下文丢失时的行为非常有用,因为真实世界中的上下文丢失可能由于多种原因发生,例如浏览器崩溃、GPU过热、驱动程序错误等。原创 2024-09-06 00:30:00 · 1911 阅读 · 22 评论 -
WebGL入门(031):EXT_frag_depth 简介、使用方法、示例代码
EXT_frag_depth扩展为WebGL添加了一个新的内置变量 gl_FragDepth,允许开发者在片段着色器中直接修改深度值。默认情况下,WebGL根据片段着色器输出的颜色值和深度测试模式自动计算深度值。使用EXT_frag_depth扩展,你可以覆盖这个默认行为,从而实现更加精细的控制。原创 2024-09-06 00:00:00 · 1814 阅读 · 26 评论 -
WebGL入门(030):OES_element_index_uint 简介、使用方法、示例代码
`OES_element_index_uint`扩展允许使用无符号整数 (`uint`) 类型的索引缓冲区,这样就可以处理更大的模型。无符号整数索引可以达到4294967295(即2^32 - 1),这大大扩展了可以处理的顶点数量范围。原创 2024-09-05 00:30:00 · 2073 阅读 · 22 评论 -
WebGL入门(029):WEBGL_depth_texture 简介、使用方法、示例代码
`WEBGL_depth_texture`扩展为WebGL添加了一个新的纹理格式,允许将深度缓冲区的值作为纹理进行读取。这在许多渲染技术中都非常有用,尤其是那些需要访问深度信息的技术,如阴影计算、反射、折射等。原创 2024-09-05 00:00:00 · 2492 阅读 · 25 评论 -
WebGL入门(028):WEBGL_debug_shaders 简介、使用方法、示例代码
`WEBGL_debug_shaders`扩展定义了一些新的方法,使得开发者能够获取有关着色器编译和程序链接过程中的详细信息,包括编译和链接过程中产生的错误和警告消息。原创 2024-09-04 00:30:00 · 962 阅读 · 10 评论 -
WebGL入门(027):WEBGL_debug_renderer_info 简介、使用方法、示例代码
在WebGL中,`WEBGL_debug_renderer_info`扩展提供了一种方式来获取关于WebGL渲染器的调试信息。这些信息可以帮助开发者了解WebGL上下文背后的硬件和软件环境。原创 2024-09-03 00:30:00 · 1238 阅读 · 13 评论 -
WebGL入门(026):WEBGL_compressed_texture_pvrtc 简介、使用方法、示例代码
在WebGL中,`WEBGL_compressed_texture_pvrtc`扩展提供了对PVRTC(PowerVR Texturing Compression)压缩纹理格式的支持。PVRTC是一种由Imagination Technologies开发的纹理压缩技术,主要用于移动设备上的图形处理,它能够有效减少纹理占用的显存空间。原创 2024-09-03 00:00:00 · 1417 阅读 · 19 评论 -
WebGL入门(024):WEBGL_compressed_texture_s3tc_srgb 简介、使用方法、示例
S3TC (S3 Texture Compression) 是一种常用的纹理压缩技术,用于减少纹理占用的显存空间,同时保持合理的图像质量。S3TC SRGB则是在S3TC的基础上增加了对sRGB色彩空间的支持。sRGB是一种标准的色彩空间,广泛应用于显示器和其他输出设备中。使用sRGB色彩空间可以确保颜色在不同设备间的一致性。原创 2024-09-02 00:00:00 · 1522 阅读 · 0 评论 -
WebGL入门(025):WEBGL_compressed_texture_etc1 简介、使用方法、示例代码
`WEBGL_compressed_texture_etc1`扩展为WebGL提供了对ETC1压缩纹理的支持。它定义了一些新的常量,用于指定ETC1压缩格式,并且提供了一些方法来加载和使用这些压缩纹理。原创 2024-09-02 00:30:00 · 767 阅读 · 7 评论 -
WebGL入门(023):WEBGL_compressed_texture_s3tc 简介、使用方法、示例代码
S3TC(S3 Texture Compression)是一种块压缩技术,最初由S3 Graphics开发,后来被广泛采用。它将纹理数据压缩为更小的块,减少了内存带宽的需求,并且可以显著降低GPU内存占用。原创 2024-09-01 00:30:00 · 967 阅读 · 4 评论 -
WebGL入门(022):WebGL2RenderingContext 简介、使用方法、示例代码
`WebGL2RenderingContext`是WebGL 2 API的核心接口,它继承自`WebGLRenderingContext`,并且添加了许多新的功能和改进,包括但不限于对顶点数组对象的支持、更多的着色器类型、更多的纹理格式、增强的混合功能等。原创 2024-09-01 00:00:00 · 1070 阅读 · 0 评论 -
WebGL入门(021):WebGLVertexArrayObject 简介、使用方法、示例代码
在WebGL 2中,`WebGLVertexArrayObject`对象是一个表示顶点数组对象的类。它可以用来绑定顶点缓冲区、配置顶点属性(如位置、颜色、纹理坐标等),以及启用/禁用顶点属性。一旦这些配置完成并保存在一个VAO中,就可以在多次渲染调用之间重用这些配置而不需要每次都重新设置。原创 2024-08-31 00:30:00 · 5392 阅读 · 23 评论 -
WebGL入门(020):WebGLTransformFeedback 简介、使用方法、示例代码
在 WebGL 2 中,`WebGLTransformFeedback` 是一个用于收集和处理变换反馈数据的对象。变换反馈允许开发者在着色器中捕获顶点着色器或几何着色器输出的数据,并将其保存到缓冲区对象中,而不必立即绘制这些数据。这对于实现高级渲染技术,如粒子系统、延迟渲染等非常有用。原创 2024-08-31 00:00:00 · 5836 阅读 · 24 评论 -
WebGL入门(019):WebGLSync 简介、使用方法、示例代码
在 WebGL 2 中,`WebGLSync` 是一个用于同步 GPU 操作的对象。它允许开发者创建同步对象来确保 GPU 上的操作按照预期顺序执行。这对于控制渲染管线中的依赖关系和避免竞态条件非常有用。原创 2024-08-30 00:30:00 · 2819 阅读 · 31 评论 -
WebGL入门(018):WebGLSampler 简介、使用方法、示例代码
在 WebGL 2 中,`WebGLSampler` 是一个用于描述纹理采样器配置的对象。采样器允许开发者定义一组规则来控制如何从纹理中采样像素值。这些规则包括纹理过滤方式、纹理环绕模式等。通过使用 `WebGLSampler`,可以更灵活地控制纹理采样行为,这对于提高渲染质量和性能非常有用。原创 2024-08-30 00:00:00 · 1335 阅读 · 24 评论 -
WebGL入门(017):WebGLQuery 简介、使用方法、示例代码
在 WebGL 中,`WebGLQuery` 是一个用于查询渲染状态的对象,主要用于性能监控和调试。通过使用 `WebGLQuery`,开发者可以查询诸如时间戳、栅格化顶点数量等信息,这对于分析性能瓶颈和调试渲染过程非常有帮助。原创 2024-08-29 00:30:00 · 1781 阅读 · 2 评论 -
WebGL入门(016):WebGLContextEvent 简介、使用方法、示例代码
在 WebGL 中,`WebGLContextEvent` 是一个事件对象,用于处理 WebGL 上下文丢失和恢复的情况。当 WebGL 上下文由于某种原因(如显卡驱动程序崩溃、GPU 资源耗尽等)丢失时,浏览器会触发一个 `webglcontextlost` 事件。同样,当 WebGL 上下文被恢复时,会触发一个 `webglcontextrestored` 事件。这两个事件都使用 `WebGLContextEvent` 对象来提供额外的信息。原创 2024-08-28 00:30:00 · 935 阅读 · 7 评论 -
WebGL入门(015):WebGLShaderPrecisionFormat 简介、使用方法、示例代码
在 WebGL 中,`WebGLShaderPrecisionFormat` 是一个用于描述着色器中精度格式的对象。这个对象包含了关于着色器中特定精度类型的信息,例如高精度 (`highp`)、中精度 (`mediump`) 和低精度 (`lowp`) 的整数和浮点数类型。这些信息对于理解着色器中精度限制和优化渲染性能非常重要。原创 2024-08-28 00:00:00 · 975 阅读 · 42 评论 -
WebGL入门(014):WebGLActiveInfo 简介、使用方法、示例代码
在 WebGL 中,`WebGLActiveInfo` 不是一个具体的对象或接口,而是 WebGL API 中用于描述着色器程序中活动变量的信息结构。`WebGLActiveInfo` 包含了关于着色器程序中的活动变量(如顶点属性、统一变量等)的信息,例如变量的名字、类型和大小等。当你需要获取着色器程序中活动变量的信息时,可以使用 `getActiveAttrib` 和 `getActiveUniform` 方法。这两个方法返回的是 `WebGLActiveInfo` 类型的信息结构,其中包含了相关的变原创 2024-08-27 00:30:00 · 1717 阅读 · 23 评论 -
WebGL入门(013):WebGLUniformLocation 简介、使用方法、示例代码
在 WebGL 中,`WebGLUniformLocation` 是一个表示着色器中统一变量(uniform variable)位置的对象。统一变量是在着色器之间共享的数据,它们在渲染过程中由应用程序设置,而不是由顶点或片段着色器计算得出。统一变量可以用来传递光照方向、模型变换矩阵、材质属性等信息到着色器程序。原创 2024-08-27 00:00:00 · 6066 阅读 · 51 评论 -
WebGL入门(012):WebGLTexture 简介、使用方法、示例代码
在 WebGL 中,`WebGLTexture` 是一个表示纹理的对象,用于存储图像数据并在渲染过程中使用。纹理可以应用于几何体表面,以模拟真实世界中的材质外观。纹理可以包含颜色信息、光照信息、透明度信息等,是实现复杂视觉效果的关键。原创 2024-08-26 00:30:00 · 1578 阅读 · 12 评论 -
WebGL入门(011):WebGLShader 简介、使用方法、示例代码
在 WebGL 中,`WebGLShader` 是一个表示着色器的对象,它可以是顶点着色器 (`VERTEX_SHADER`) 或片段着色器 (`FRAGMENT_SHADER`)。着色器是运行在 GPU 上的小型程序,用于处理顶点数据和像素数据,以实现复杂的渲染效果。原创 2024-08-29 00:00:00 · 1352 阅读 · 0 评论