
webgl
文章平均质量分 91
webgl 笔记
jiegiser#
可加QQ联系616251664
展开
-
Cesium 高性能扩展 DrawCommand 解析
我们在 Cesium 自定义几何体一般有两种方式,一种是通过直接使用 Primitive 来实现,另外一种就是 DrawCommand 来扩展;++ i) {{#endif{一个简单的需求,如果我们想通过 uniform 传入 time 来不断的改变每个顶点的颜色;虽然说 Primitive 定义集合体的方式可以通过自定义 Appearance 来修改着色器,但是 API 并不支持自定义传入 uniform 值等;原创 2022-10-03 19:08:11 · 1577 阅读 · 1 评论 -
WebGL + ThreeJS 初探
数据可视化是一门学科数据可视化与数据和视觉有关数据可视化简单理解,就是将数据转换成易于人员辨识和理解的视觉表现形式,如各种 2D 图表、3D 图表、地图、矢量图等等,随着技术的不断进步,数据可视化的边界也在不断扩大;数据可视化起源于20 世纪 60 年代诞生的计算机图形学,计算机图形学广泛应用于各个领域,深刻影响和改变着我们的生活。原创 2022-09-30 07:56:22 · 765 阅读 · 0 评论 -
基于 React hooks + Typescript + Cesium 实现 billboard 信息展示
文章目录效果截图功能介绍效果截图先上截图:功能介绍基于 React hooks + Typescript + Cesium 实现 billboard 信息展示;主要用于项目中一些坐标点的信息展示等。图层管理(√)dom 点扩散(√)轨迹回放(√)测量(√)坐标拾取(√)加载模型数据,拾取三维模型(√)geoserver 结合实现属性查询(√)geoserver 结合实现空间查询(√)地下模式(√)单体化 / 倾斜模型分户单体化(√)缓冲区分析(√)粒子特效视频融合(√原创 2021-03-18 16:51:20 · 487 阅读 · 0 评论 -
webgl——进入三维世界(模型矩阵、视图矩阵、投影矩阵)(六)
文章目录前言一、视点和视线二、投影矩阵前言本篇继续前面文章来讲解投影矩阵相关内容。一、视点和视线二、投影矩阵原创 2021-03-11 15:34:14 · 1858 阅读 · 0 评论 -
webgl——图形的基本变换:平移、旋转、缩放并实践类似 threeJS 放大、拖拽效果(五)
文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、pandas是什么?首先需要将世界坐标转换为 webgl 中的坐标 [-1, 1] 的范围内,这会用到缩放、然后在 webgl 中如何放置,放在哪里;我们需要用到平移、旋转等。二、使用步骤1.引入库原创 2021-03-09 17:34:53 · 1527 阅读 · 2 评论 -
webgl——绘制一个旋转的彩色立方体(四)
文章目录前言一、整体代码以及实现效果二、绘制步骤1.构建顶点数据2.通过顶点索引构建立方体总结前言前面文章介绍了如何通过多点来绘制图形,通过建立缓冲区对象,将多个数据传入到缓冲区中;然后 webgl 进行读取缓冲区中的数据进行渲染。上个例子绘制 “F” 的坐标点不是很多;但是如果我们绘制一个立方体。如果还跟之前一样的绘制方式;立方体的每一个面由两个三角形组成,每个三角形有三个顶点,所以每个月需要有六个顶点,那么顶点数据需要有 36 个,我们会发现其实我们只需要用 8 个顶点来进行绘制立方体,但是如何原创 2021-03-06 18:23:40 · 1222 阅读 · 0 评论 -
webgl——绘制一个多点(三)
文章目录前言绘制一个 ‘F’缓冲区对象前言前面我们将了绘制一个点,并通过 JavaScript 向 webgl 系统传递变量进行绘制。但是如果我们绘制一个复杂图形,比如我们常见的三维世界。其实不管三维模型的形状多么复杂,其基本组成部分都是一个个三角形。为什么是三角形呢,因为三角形构成是三个点,三个点可以唯一确定一个面;这样就可以简化图形绘图时的一些不必要的计算。接下来我们将绘制一个 ‘F’,效果如下:绘制一个 ‘F’首先还是贴代码:import React, { useRef, useEffec原创 2021-03-06 12:05:35 · 414 阅读 · 0 评论 -
webgl——使用着色器给图形给点颜色看看(二)
文章目录前言绘制一个点初始化着色器存储限定符向 webgl 系统传递变量前言接前面文章,我们实现了一个最简单的 webgl 程序,但是只是程序运行起来只是漆黑一片,我们想要通过 webgl 绘制一些图形。这篇文章让我们来使用 webgl 绘制一个点,并使用着色器来给他点颜色看看。绘制一个点还是先上代码:import React, { useRef, useEffect } from 'react'import { VSHADERR_SOURCE, FSHADER_SOURCE } from '.原创 2021-03-05 16:22:37 · 624 阅读 · 0 评论 -
初识 webgl(一)
文章目录前言WebGL 入门WebGL 渲染流程前言最近打算整理一下 webgl 相关的基础知识;方便自己复习查看。首先 webgl 是一种在 web 端进行三维相关开发的技术;引一段 mdn 上的介绍:WebGL(Web图形库)是一个JavaScript API,可在任何兼容的Web浏览器中渲染高性能的交互式 3D 和 2D 图形,而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点,该 API 可以在HTML5 <canvas>原创 2021-03-04 17:54:26 · 460 阅读 · 1 评论