webgl
关注
分享
扫一扫
文章平均质量分 71
X01动力装甲
欢迎进群（959261248）学习交流。
展开
-
WebGL 3D引擎
WebGL 3D引擎glMatrixconst { mat4, mat3, vec2, vec3, vec4, quat } = glMatrix;let GL = null;const _OPAQUE_VS = `#version 300 esprecision highp float;uniform mat3 normalMatrix;uniform mat4 modelMatrix;uniform mat4 modelViewMatrix;uniform mat4 project原创 2021-07-03 19:31:41 · 270 阅读 · 0 评论 -
three.js粒子过度效果制作(一)
three.js粒子过度效果制作好玩的粒子过度效果，从一个平面过度到一个球体。原创 2018-11-08 10:23:22 · 1643 阅读 · 0 评论 -
three.js开发我的世界minecraft(一)地形的生成
我的世界minecraft地形生成目录我的世界minecraft地形生成Perlin Noise （柏林噪声）基本单位立方体地形生成 种树添加玩家添加阴影 官网提供了一个minecraft案例：examples/webgl_geometry_minecraft.html生成的效果，中间是一个直径10的小球，我作为参考用的，这里面的立方体在three....原创 2018-11-10 08:34:00 · 3540 阅读 · 0 评论 -
THREE.BufferGeometryUtils
THREE.BufferGeometryUtilsBufferGeometryUtils.js是three.js的一个插件。关于模型合并功能，有Geometry.merge 方法。但是还有下面两种mergeBufferGeometries(geometries: BufferGeometry[]) BufferGeometry.merge ( bufferGeometry, offset ...原创 2018-11-14 19:11:39 · 4277 阅读 · 0 评论 -
es6 three.js
es6 three.js最近在用es6开发项目遇到一些小问题。模块导入three.js npm中有，可以直接导入，对于没有的比如state，就需要自己动手修改一下代码，在底部加上export xxxx 。这样就可以在其他页面导入了。import * as THREE from "three"import * as dat from "dat.gui"import OrbitCon...原创 2018-11-20 18:30:28 · 400 阅读 · 0 评论 -
三维模型格式总结整理
三维模型格式总结整理1、模型格式多样性3D模型格式很多，保守估计几十种。如X\dae\obj\3ds\max\ma\mb\c4d\md2\fbx\rwx\wrl\stl\stp\3mf\slprt\dwg\osg\iges…一些机构还会定义自己的模型格式。2、数字模型应用的两大主要领域总的来说分为两大领域：DCC（Digital Content Creation）领域和CAD/CAM（Co...原创 2018-11-21 18:41:51 · 9041 阅读 · 2 评论 -
19three.js相机控制器
轨迹球控制器 TrackballControls。 非常常用。 轨道控制器 Orbit Controls 这个和轨迹球控制器类似。用的最多，可以设置上下旋转的角度（-90~90）。 翻滚控制器 飞行控制器 第一视角控制器 MapControls写控制器的时候有时候会这样写controls.update(clock.getDelta())，结果场景有多个动画需要更新的时候出现了意...原创 2018-05-04 23:25:00 · 740 阅读 · 0 评论 -
PointerLockControls和FirstPersonControls
PointerLockControls和FirstPersonControls不知道为什么官网的控制器文档只有一个OrbitControls。其他的控制器只能去案例中寻找了。PointerLockControls（鼠标锁定控制器）和FirstPersonControls（第一视角控制器）是three.js种两个有点不常用的控制器。PointerLockControls鼠标锁定控制器在游戏种...原创 2018-11-22 17:11:07 · 1379 阅读 · 0 评论 -
3D Builder
3D Builder3D Builder在win10应用商店可以下载到，可以把2D图像转化成3D。center 不在中央的问题。可以用mashlab来修复。或者使用box来移动。var bbox = new THREE.Box3().setFromObject(object);var x = (bbox.max.x - bbox.min.x)/2 ;var y = (bbox....原创 2018-11-29 15:14:12 · 1765 阅读 · 0 评论 -
three.js SVG 学习绘制三维地图
SVG 中国地图https://www.js-css.cn/jscode/other/other43/不错的资源，不过每个省份的svg数据太小了，不精确。主要的是个js文件：chinaMapConfig.jsvar shapesvgjiangsu = transformSVGPathExposed(chinaMapConfig.shapes.neimongol);var extrude...原创 2018-11-30 17:42:43 · 8553 阅读 · 12 评论 -
ExtrudeGeometry
ExtrudeGeometryExtrudeGeometry可以从路径形状创建挤压几何体。var length = 12, width = 8;var shape = new THREE.Shape();shape.moveTo( 0,0 );shape.lineTo( 0, width );shape.lineTo( length, width );shape.lineTo( l...原创 2018-11-30 18:08:06 · 687 阅读 · 0 评论 -
01用webgl绘制一个点
绘制一个红色的点，大小20px*20px。首先我们使用canvas实现一下，只要绘制出一个矩形就可以了，主代码只有三行。1、 获取canvas 2d上下文。2、 设置填充颜色红色。3、 绘制矩形，这里使用了绘制矩形的方法。canvas代码： var context = document.getElementById('canvas').getContext('2d'); ...原创 2018-03-27 18:44:00 · 685 阅读 · 0 评论 -
02webgl多点绘制
采用JavaScript循环的方式。 使用二维数组的方式定义点的位置。然后通过for循环以此绘制点。var points = [ [0.0,0.0,], [-0.5,-0.5,], [0.5,-0.5,], [0.0,0.5] ];for(var i = 0;i<points.length;i++){ ...原创 2018-03-29 14:38:00 · 467 阅读 · 0 评论 -
03webgl绘制线段和三角形
绘制线段有三种方式，LINES、LIN_STRIP、LIN_LOOP。var data = new Float32Array([ 0.0,0.0, 0.5,0.0, 0.5,0.5, 0.0,0.9, -0.5,0.5, -0.5,0.0, ...原创 2018-03-29 16:57:00 · 1046 阅读 · 0 评论 -
04webgl三角形的缩放
在顶点着色器中定义一个uniform变量。用该变量和顶点坐标的x和y想乘实现缩放。本节的缩放是以坐标原点为基点的，在实际开发中通常以物体的中心为基点进行缩放。 var ctx = document.getElementById('canvas').getContext('webgl'); var vertexShaderSource = "" + "unifo...原创 2018-03-30 22:22:00 · 465 阅读 · 0 评论 -
构建光线跟踪器（Raytracer）
构建光线跟踪器（Raytracer）运行结果这个案例很值得研究学习，他是在canvas画布上直接绘制出的三维场景，而且用到了光线追踪。ClassVectorColorCameraSpherePlaneRayTracer源码如下TS版本：class Vector { constructor(public x: number, public y: numb...原创 2019-04-04 13:39:36 · 1069 阅读 · 0 评论 -
WebGLRenderingContext
WebGLRenderingContextPrototype296个属性，139个方式。ACTIVE_ATTRIBUTES: 35721ACTIVE_TEXTURE: 34016ACTIVE_UNIFORMS: 35718ALIASED_LINE_WIDTH_RANGE: 33902ALIASED_POINT_SIZE_RANGE: 33901ALPHA: 6406ALPHA_B...原创 2019-04-15 17:33:29 · 2202 阅读 · 0 评论 -
WebGL编程指南
WebGL编程指南原创 2018-11-01 07:36:00 · 268 阅读 · 0 评论 -
WebGL中模型矩阵、视图矩阵和投影矩阵
three.js中模型矩阵、视图矩阵和投影矩阵在学习three.js 中 shader 的时候总是被各种矩阵所迷惑，不知所措。变换与坐标系：模型矩阵视图矩阵投影矩阵本地坐标系世界坐标系视图坐标系裁剪坐标系所以常见的定点着色器中，顶点变换过程通常用下面两种写法。gl_Position = projectionMatrix * modelViewMatrix * vec4( position...原创 2018-11-02 18:37:53 · 2674 阅读 · 0 评论 -
WebGL着色器和Three.js自己定义后期处理着色器
WebGL着色器和Three.js自己定义后期处理着色器为了渲染出一个网格的最终图像，开发者需要准确的定义顶点、变换、材质、光源以及相机是如何相互作用并最终生成图像的。而承担这个工作的就是着色器（shader）。着色器又称作可编程着色器，它是一段源码，它实现了将网格像素点投影到屏幕上的算法。图形硬件能够解析顶点、纹理以及其他底层的东西，但是并不能处理材质、光源、变换以及相机。这些高级的结构由着色...原创 2018-10-11 13:52:11 · 4082 阅读 · 0 评论 -
WebGL学习资源汇总（持续更新）
WebGL学习资源汇总书籍书籍计算机图形图像处理基础《计算机图形图像处理基础》是2011年电子工业出版社出版的图书，作者是唐波。全书共分10章，主要内容包括了图形与图像处理的基本概念，图形图像处理的硬件与软件基础，基本图形的生成算法，图形显示技术，交互技术与图形软件标准，图像数字化与数学描述，图像正交变换，图像增强，图像恢复，图像分割。该书融合了计算机图形学与数字图像处理两门学科的知识...原创 2018-10-12 14:25:59 · 2575 阅读 · 0 评论 -
平面纹理坐标和球面坐标互相转换
平面纹理坐标和球面坐标互相转换设有一张图片width/height = 2:1。这个比例很重要。因为这个比例的全景图片刚好可以还原成一张球形全景图。比喻展开的世界地图。把图片的宽 当成成 纬度，范围[0-2π]。把图片的高当成经度，范围[-π/2,π/2]。在半径为 r 的球面坐标中，设：水平转动角度为θ[0，2π]，上下转动角度为φ[-π/2，π/2]，所以球面上一点的三维坐标：...原创 2018-09-27 19:20:35 · 12812 阅读 · 6 评论 -
ECharts学习笔记
ECharts学习笔记ECharts学习笔记ECharts学习笔记最新在学习使用Echarts来绘制可视化图表，觉得挺有意思的。对Echarts有了一些基本的概念。在它的官方文档中有详细的入门教程、api和配置项介绍。以及众多的案例可以参考。这也是网络上没有多少Echarts教程的原因吧，因为看文档就够了。配置项:http://echarts.baidu.com/option.html#ti...原创 2018-10-18 10:20:38 · 429 阅读 · 0 评论 -
THREE.ShaderMaterial
THREE.ShaderMaterialTHREE.ShaderMaterial是three.js中最通用、最复杂的材质之一。通过它可以使用自己的定义的做色漆，直接在webgl环境中运行。原创 2018-10-15 10:16:42 · 4657 阅读 · 1 评论 -
使用threejs实现地球辉光和大气层效果
使用threejs实现地球辉光和大气层效果实现原理就是使用three.js的ShaderMaterial材质。我们把辉光分为几个步骤来实现：创建两个球体，一个作为原始物体，一个略大一些作为它的辉光作为辉光的球体从内到外片元透明度逐渐减小（线性减小或是指数减小都可以）将覆盖原始物体的部分丢弃掉主要代码如下：var vertexShader = [ 'varying vec3...原创 2018-10-15 10:46:51 · 10419 阅读 · 3 评论 -
threejs基本场景
threejs基本场景自己开发中经常用到的基本测试场景，包含scene, camera, renderer, light, controls等。运行成功后会显示一个随意颜色的立方体和一个球体以及一个平面。用到的三个基本库文件。 &lt;script type="text/javascript" src="../js/three.js"&gt;&lt;/script&a原创 2018-10-18 18:18:05 · 1087 阅读 · 0 评论 -
webgl中着色器的几种嵌入写法
webgl中着色器的几种嵌入写法在webgl中着色器程序是以JavaScript字符串形式编写的。为了书写美观和调试方面，经常出现不同的嵌入方式。下面总结了几种常用的方式。方式1：var vertexShaderSource = &amp;quot;&amp;quot; + &amp;quot;attribute vec4 aPos;&amp;quot; + &amp;quot;v原创 2018-10-18 19:08:00 · 737 阅读 · 0 评论 -
three.js创建地球带大气层、辉光、云层、凹凸、高光
文章目录three.js创建地球1、基本场景搭建2、添加地球3、添加轨道控制器4、添加云层5、添加大气层6、添加星空背景7、添加辉光效果8、添加轨道卫星9、TS重构10、打包发布three.js创建地球本教程采用three.js创建一个地球带包含材质贴图，凹凸/高光贴图，以及大气层、辉光、云层、轨道卫星、星空等效果。涉及到的知识点有：three.js基本场景纹理贴图轨道控制器Shad...原创 2018-10-23 14:35:05 · 6946 阅读 · 6 评论 -
three.js ObjectControls.js
three.js ObjectControls.jsthree.js-object-controls Control object rotation, scale。控制物体的旋转和缩放。适合的场景是物体在坐标原点，绕Y轴左右旋转，绕X轴上下旋转，所以相机必须在Z轴上。比较类似orbitcontrols，但是功能更弱。合适演示地球。使用方法加载js文件<script src="t...原创 2018-10-31 19:25:03 · 1304 阅读 · 4 评论 -
34three.js TransformControls ObjectControls.js
TransformControls.js该插件可以控制物体的移动旋转缩放等操作。使用也比较简单。引入js文件 创建控制器 设置控制模式，有translate，rotate，scale等几种模式。 添加到场景中 绑定控制对象。var transformControls = new THREE.TransformControls(camera, renderer.domElem...原创 2018-06-14 12:30:00 · 1716 阅读 · 2 评论 -
08dat.GUI和stats.js库的使用1
左边是stats.js库，用来显示帧率。右上角的是dat.GUI库的效果。用处非常多。非常方便调试。使用也非常简单。 stats库，网络下载js文件。 body中添加一个div。<div id="Stats-output"></div> js中代码 var stats = initStats(); function initStats()...原创 2018-04-11 23:09:00 · 525 阅读 · 0 评论 -
如何使用ES6开发Three.js项目（一）
如何使用ES6开发Three.js项目（一）如何使用ES6开发Three.js项目（二）配置开发环境：node.js+webpack+webpack-dev-server+babel+ES6+three.jsnode.js webpack webpack-dev-server babel ES6 three.js 1、使用npm安装three.js。注意安装命令是thr...原创 2018-08-29 20:55:00 · 6479 阅读 · 0 评论 -
如何使用ES6开发Three.js项目（二）
标题ES6开发Three.js项目之前写过一篇文章如何使用ES6开发Three.js项目，这次再完善一下，并把代码放在GitHub上了。three.js-es6-webpack基于ES6开发的three.js演示项目项目目录：public : 打包后文件夹src : 项目文件assets : 项目资源文件夹,图片视频等mapb.jpgcss :index.css...原创 2018-11-01 15:47:23 · 1718 阅读 · 0 评论 -
THREE.ShaderMaterial 添加纹理sampler2D texture
THREE.ShaderMaterial 添加纹理 sampler2D texture研究一下ShaderMaterial，主要包含以下几个功能。给plane添加纹理用灰度图生成地形用简单的函数生成水波让水波流动起来设置多张纹理动态改变纹理的颜色用法线改变物体的颜色效果如下，场景中主要又三个物体，plane1,plane2，Sphere。plane1: 演示给plane添加...原创 2018-11-06 12:08:28 · 4580 阅读 · 0 评论 -
three.js粒子过度效果制作(二)
three.js粒子过度效果制作(二)从图片获取粒子下面演示的是粒子是从图片中获取的。采用的cpu的方式，普通geometry，单一颜色。你也可以使用彩色图片，并使用彩色粒子，效果会更好一些。步骤创建meshGeo，这个是粒子系统的载体，，它的顶点数量决定了整个粒子的数量，这里球体（1，160，160）=25442个顶点。所以从两幅图像中离子化的顶点数量要小于该值，如果大于，就会显示...原创 2018-11-09 14:25:00 · 2361 阅读 · 0 评论 -
Gio.js使用教程
gio.js使用教程Github使用教程教程中有一段代码。我特么就想问问，data哪儿来的数据，写个说明太敷衍了。这样会报错的。<script> // 获得用来来承载您的IO地球的容器 var container = document.getElementById( "globalArea" ); // 创建Gio控制器 var controlle...原创 2018-09-26 10:44:27 · 2921 阅读 · 0 评论