WebGL
我用WebGL打造了一款动态壁纸
# 我用WebGL打造了一款动态壁纸 ## 简述 最近在给自己电脑换壁纸的时候发现了一张很有特点的图（就是下面这张），于是我突发奇想，要是能把这张图变成一张动态的壁纸。那该多好。于是我打算用threejs开发一个3D的动态壁纸网页。 ; animate(); function init() { // 创建相机 camera = new THREE.Persp ......
WebGL初接触
有感于在不少jd中看到关于WebGL的内容，想起来之前在高程中还没看完的canvas，就匆匆把剩余的一点看完了，高程中的内容还是皮毛，就属于很基础的、概念性的东西。 ### WebGL 画布的3D上下文。不是W3C制定的标准，而是Khronos Group的标准。 作为浏览器中WebGL基础的Ope ......
【WebGL系列-01】获取WebGL上下文
# 获取WebGL上下文 ## 获取上下文 WebGL上下文是从``标签中获取到的，通过`canvas`对象的`getContext()`函数可以获取`WebGLRenderingContext`。 跟据参数的不同，`getContext()`函数可以获取不同种类的渲染上下文。 ### 接口 **` ......
【WebGL系列-02】创建program上下文
# WebGL程序program对象的创建 program对象由**顶点着色器对象**和**片元着色器对象**构成，因此，创建program对象包含了两部分，一个是着色器对象的创建，一个是program对象的创建。 ## 总体流程 1. 创建顶点着色器对象 2. 创建片元着色器对象 3. 创建`pr ......
【WebGL系列-03】获取shader变量地址及赋值
# 获取shader变量地址及赋值 上一节创建了WebGL程序对象，创建好program对象后，对象中包含顶点着色器和片元着色器，着色器中含有变量，我们需要对其进行赋值后才能够进行绘制。 着色器代码如下： ```javascript const VSHADER_SOURCE = /* glsl */ ......
【WebGL系列-04】清除缓冲区并绘制图形
# 清除缓冲区并绘制图形 前文中已经准备好了webgl程序和绘制所用的数据，但是在绘制图像之前，还要对画布进行处理。 ## 清除缓冲区 由于图像的绘制是一帧一帧绘制，每一帧针对当前的状态，计算屏幕上每个像素的颜色，得到最终的绘制结果。这些状态被保存在一个叫帧缓冲区的地方。帧缓冲区不仅能存储颜色数据， ......
打造原生 WebGL 2D 引擎：一场创意与技术的融合
# 打造原生 WebGL 2D 引擎：一场创意与技术的融合 ## 1.引言 在当今数字化时代，网页的功能越来越丰富，已经远远超越了传统的文本和图片呈现。我们生活在一个充满交互性和视觉魅力的网络世界。每天都会遇到许多令人惊叹的网页效果和动画。作为一个Web3D图形的开发，希望可以通过网页来实现更多强大 ......
HTML5技术改变世界之WebGL
20个不可思议的 WebGL 示例和演示 WebGL 是一项在网页浏览器呈现3D画面的技术，有别于过去需要安装浏览器插件，通过 WebGL 的技术，只需要编写网页代码即可实现3D图像的展示。WebGL 可以为 Canvas 提供硬件3D加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更 ......
WebGL编程读书笔记
# WebGL概述 ## WebGL起源 > 在个人计算机上使用最广泛的两种三维图形渲染技术是 Direct3D 和 OpenGL。Direct3D 是微软 DirectX 技术的一部分，是一套由微软控制的编程接口(API)，主要用在 Windows 平台;而 OpenGL 由于其开放和免费的特性， ......
Three.js可视化企业实战WEBGL课
适合人群:懂基础前端知识、需要学习和开发3d项目的前端课程概述:全网领先的three.js的 WEB 3D可视化课程。课程全面系统的讲解WEB 3D可视化技术，涵盖目前企业开发的各种应用技术和项目案例。包含智慧园区、智慧城市、智慧工厂。学完可以直接应用在工作中，不仅仅讲three、cesium的企业 ......
H5 WebGL实现水波特效
# 前言 零几年刚开始玩电脑的时候，经常在安装程序上看到一种水波特效，鼠标划过去的时候，就像用手在水面划过一样，感觉特别有意思。但是后来，就慢慢很少见过这种特效了。最近突然又想起了这种特效，于是开始折磨怎么实现这种效果。 # 思路 我们知道，水波的运动轨迹可以看成随时间变化的三角函数，那么我们可以记 ......
Three.js教程：WebGL渲染器设置(锯齿模糊)
推荐：将NSDT场景编辑器加入你的3D工具链 其他系列工具：NSDT简石数字孪生 WebGL渲染器设置(锯齿模糊) 一般实际开发，threejs的WebGL渲染器需要进行一些通用的基础配置，本节课给大家简单介绍下,比如渲染模糊或锯齿问题。 渲染器锯齿属性.antialias 设置渲染器锯齿属性.an ......
WARNING: Too many active WebGL contexts. Oldest context will be lost.
使用百度地图GL版开发时，手机端遇到闪退问题。经排查，发现报错： ``` WARNING: Too many active WebGL contexts. Oldest context will be lost. ``` 原因是大部分浏览器对单个页面能运行的WebGL上下文是有限制的，例如PC上的c ......
webgl 渲染带透明通道的视频（threeJS）
首先，你需要一个这样的视频 或者一个这样的视频 webgl渲染可以用three.js，上下叠加的代码如下： import * as THREE from 'three'; let videoWidth = 540; //视频实际的宽度 let videoHeight = 540;//原视频实际的高度 ......
WebGL几种常用服务图层的制作流程
当前，越来越多的用户开始使用三维GIS平台SuperMap iClent3D for WebGL，对于新用户来说最常见的两个问题就是：1.为什么打开场景看不到数据？2.为何范例能实现的效果，我的数据就不行了？而造成这两个问题绝大多数的原因是数据处理不当，本文将讲解制作WebGL常用服务图层的流程及注 ......
检测自己的浏览器是否支持WebGL
在浏览器地址栏输入 [https://get.webgl.org/](https://get.webgl.org) 如果得出下面图形，就说明浏览器是支持WebGLS的，经过尝试，发现Chome浏览器，微软Edge以及搜狗浏览器都能很好的支持WebGL。 来获取attri ......
使用 React Three Fiber 和 GSAP 实现 WebGL 轮播动画
参考：[Building a WebGL Carousel with React Three Fiber and GSAP](https://tympanus.net/codrops/2023/04/27/building-a-webgl-carousel-with-react-three-fibe ......
threejs webgl性能优化
threejs webgl性能优化 WEBGL性能优化的方法有很多，以下是一些常见的方法： 减少渲染次数：在WEBGL中，渲染次数越少，性能越好。因此，您可以通过减少渲染次数来提高性能。例如，使用批处理技术将多个对象合并为一个批处理对象进行渲染。 降低纹理分辨率：纹理分辨率越高，渲染的时间就越长。因 ......
解决webgl使用canvas.toDataURL()没有内容的问题
这个问题很好解决，就是在获取webgl对象的时候，多传入一个{preserveDrawingBuffer: true}，然后在使用canvas.toDataURL()获取就能够获取到了。案例： var canvas = document.getElementById("canva ......
unity发布到4399的webgl模式问题：FRAMEWORK.JS中的WEBREQUEST_SEND括号内的函数（不能有通讯代码）
在发布4399的时候，之前遇到过这个问题，解决方法当然就是删除这个函数啦。 步骤也很简单，但是刚开始摸不着头脑搞了好久，最后发现发布的时候有个加密选项，选择不加密，后面build的文件里面就可以进行打开修改，按照要求修改函数即可。 ......
Introduction to WebGL 3D with HTML5 and Babylon.js
Explore 3D basics, and take a look at 3D without hardware (creating a software engine). [05:45] - Understanding 3D Basics via a soft engine [09:49] - ......
使用js对tensorspace/three.js/webgl进行截图
使用js对tensorspace/three.js/webgl进行截图 问题分析 场景：在右侧，是 tensorspace库 使用three.js 调用webgl 对模型进行渲染的画面。我需要使用js对右侧画面进行截图，并保存至本地用于分析。 问题：对webgl进行截图需要进行一些特别的操作，使用h ......
WebGL初学：使用WebGL绘制一个点
##示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用WebGL绘制一个点</title> </head> <body> <!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布- ......
WebGL Fundamentals
WebGL (Web Graphics Library) is often thought of as a 3D API. People think "I'll use WebGL and magic I'll get cool 3d". In reality WebGL is just a ras ......
WebGL-实例化绘制
今天来学习webgl一个重要功能：Instanced Drawing(实例化绘制)，内容翻译自webgl学习网站webglfundamentals(由于英语水平尽量按原文翻译)：https://webglfundamentals.org/webgl/lessons/webgl-instanced-d ......
webgl 系列 —— 着色器语言
其他章节请看： webgl 系列 着色器语言 本篇开始学习着色器语言 —— GLSL全称是 Graphics Library Shader Language （图形库着色器语言） GLSL 是一门独立的语言，和其他语言一样有自己的变量、运算符、函数、循环(for)、控制语句（if）、函数、数组等等。 ......
SVG、Canvas、WebGL对比
SVG 使用XML描述2D图形 SVG中的元素和HTML元素一样，在输出图形前需要经过浏览器引擎的解析、布局计算和生成DOM树（SVG 元素太多时非常消耗性能），可以添加事件 SVG 对象的属性发生变化，浏览器自动重现图形 SVG绘制矢量图形，不依赖于终端设备的像素，可以随意放大缩小不会失真 适合场 ......
webgl 系列 —— 绘制猫
其他章节请看： webgl 系列 绘制猫 上文我们了解了如何绘制渐变彩色三角形，明白了图形装配、光栅化，以及片元着色器计算片元的颜色。 现在如果让你绘制如下一只猫。难道绘制很多三角形，然后指定它们的颜色？那样简直太难、太繁琐了。 这时可以使用三维图形学中的纹理映射技术来解决这个问题。 纹理映射简单来 ......