WebGL
关注
分享
扫一扫
力博荣三维可视化
闲鱼同步: 力博荣三维可视化
cesium.js开源贡献者
展开
-
webgl instance 绘制
【代码】webgl instance 绘制。原创 2024-03-11 23:44:52 · 353 阅读 · 0 评论 -
Feedback loop formed between Framebuffer and active Texture 报错
Feedback loop formed between Framebuffer and active Texture.原创 2023-07-28 17:42:25 · 1200 阅读 · 0 评论 -
学习WebGL_016_3D拾取(3D Picking)-帧缓存(FBO)
作者: DSLMing时间: 2019.11.3参考:FunWithWebGL2 024 Picking with Framebuffers3D拾取(3D Picking)-帧缓存(FBO)1、原理以colorID颜色渲染几何物体,然后存储到离屏帧中用户点击屏幕时,根据坐标在离屏帧中查看颜色如果该颜色与colorID相同那么,用户点击的就是几何物体2、步骤1-得到离屏帧...原创 2019-11-03 21:25:09 · 647 阅读 · 0 评论 -
学习WebGL_015_3D拾取(3D Picking)-射线法
作者: DSLMing时间: 2019.11.3参考:FunWithWebGL2 024 Picking with Framebuffers3D拾取(3D Picking)-射线法1、3D拾取的概念和原理对每一个三角形在程序运行时附加一个索引让片段着色器输出每个像素所在三角形的索引值得到颜色缓冲，但是并不包含颜色值，而是像素所在的图元的索引值当鼠标点击在窗口上，我们将根据鼠...原创 2019-11-03 21:20:59 · 869 阅读 · 0 评论 -
学习WebGL_014_渲染管线
作者: DSLMing时间: 2019.11.3参考:FunWithWebGL2 024 Picking with FramebuffersWebGL 基础知识渲染管线的三个概念阶段图形学中的渲染管线图解WebGL&Three.js工作原理一、渲染管线渲染管线是指将数据从3D场景转换成2D图像，最终在屏幕上显示出来的总过程。它分为几个阶段:应用阶段、几何阶段、光栅阶...原创 2019-11-03 02:09:27 · 650 阅读 · 0 评论 -
学习WebGL_013_材质
作者: DSLMing时间: 2019.10.31参考:FunWithWebGL2 023 - Viva La Fungi材质材质这个概念是虚构出来的,WebGL 中并没有这个概念。这里提出来是为了将部分WebGL的参数抽象出来成为一个集合。class Material { constructor() { // 对光照的反应 this.shader = null...原创 2019-11-01 10:24:26 · 735 阅读 · 0 评论 -
学习WebGL_012_过程纹理-地形
作者: DSLMing时间: 2019.10.24参考:FunWithWebGL2 017 Terrains过程纹理-地形纹理一般分成两类, 直接贴图的图片、通过代码生成纹理----过程纹理(procedural texture)。过程纹理简单来说就是一个时间(运算)换空间(内存)的换算。使用triangle_strip绘制模式来连接顶点网格的点以创建平面。 在perlin噪声的帮...原创 2019-10-28 22:14:19 · 405 阅读 · 0 评论 -
学习WebGL_011_嵌套纹理、雪碧图、视频纹理
作者: DSLMing时间: 2019.10.23参考:FunWithWebGL2 014 Texture MasksFunWithWebGL2 015 Texture Atlas一、嵌套纹理指定纹理的位置,从而将2张纹理组合成一个新的纹理。例如,有纹理A:还有纹理B:最终组合为:1、片元代码precision mediump float;uniform samp...原创 2019-10-23 12:07:36 · 734 阅读 · 0 评论 -
学习WebGL_010_光照模型
作者: DSLMing时间: 2019.10.20参考:FunWithWebGL2 012-Phong Lighting光照模型Phong模型: 环境光 + 漫反射 + 镜面反射。Lambertian模型: 漫反射。1、环境光void main(){ float ambientStrength = 0.1; vec3 ambient = ambientStrength...原创 2019-10-21 13:27:38 · 319 阅读 · 0 评论 -
学习WebGL_009_解析obj文件
作者: DSLMing时间: 2019.10.18参考FunWithWebGL2 011-Parsing.OBJ解析.OBJ文件今天，我们将学习如何使用Blender生成OBJ文件，以及如何使用javascript将数据解析为WebGL可以呈现的内容。 我们将首先解析一个多维数据集，然后再尝试一个动漫风格的海盗女孩模型。ObjLoader源码class ObjLoader{ s...原创 2019-10-18 16:17:54 · 1003 阅读 · 0 评论 -
学习WebGL_008_obj文件格式
作者: DSLMing时间: 2019.10.18参考:https://www.jianshu.com/p/f7f3e7b6ebf5https://blog.youkuaiyun.com/charvl/article/details/90183137obj文件格式1、face.obj文件这是一个完整的面的.obj文件,该文件可以在c4d中打开。# WaveFront *.obj file...原创 2019-10-18 16:02:09 · 701 阅读 · 0 评论 -
学习WebGL_007_创建立方体
作者: DSLMing时间: 2019.10.14参考WebGL 编程指南.pdf 第7章https://cloud.tencent.com/developer/article/1005103创建立方体从左上角开始，然后逆时针旋转以创建正面。1、创建顶点//----------------------------------------------- // ...原创 2019-10-14 09:50:31 · 303 阅读 · 0 评论 -
学习WebGL_001_绘制一个点
出处: https://github.com/sketchpunk/FunWithWebGL2目标: 学习 WebGL概要: 对代码的理解笔记。地点: 北京通州笔记作者: DSLMing时间: 2019.10.7(国庆最后一天) 17:48题目: 绘制一个点一、初始化canvas使用:gl = GLInstance("glcanvas").fSetSize(500, 500...原创 2019-10-07 17:52:39 · 238 阅读 · 0 评论 -
学习WebGL_002_绘制一条直线
顶点坐标系是从(-1,1)绘制一条(0,0) 到 (-0.5, 0.5)到直线关键代码:verts = [ -0.5, 0.5, 0, 0.0, 0.0, 0, ]gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);gl.vertexAttribPointer( ATT...原创 2019-10-08 18:53:53 · 664 阅读 · 0 评论 -
学习WebGL_003_模型矩阵
1、模型矩阵的概念模型矩阵,包括了以模型自己为坐标参考系的旋转、缩放、平移一系列变换的统一矩阵，称为模型矩阵。2、如何获得1)变换的种类this.position = new Vector3(0,0,0); //Traditional X,Y,Z 3d positionthis.scale = new Vector3(1,1,1); //How much to scale a mes...原创 2019-10-09 09:21:11 · 323 阅读 · 0 评论 -
学习WebGL_004_相机的使用
相机的使用1、了解3个矩阵// 投影矩阵, 将看见的3d场景投影到2d平面perspective: gl.getUniformLocation(program, "uPMatrix"),// 模型矩阵, 被观察的3d物体modalMatrix: gl.getUniformLocation(program, "uMVMatrix"),// 相机矩阵, 相机所在的空间坐标cameraMa...原创 2019-10-09 09:22:03 · 190 阅读 · 0 评论 -
学习WebGL_005_绘制带边框的矩形
参考:对应FunWithWebGL2-007https://www.cnblogs.com/charlee44/p/11628462.htmlhttps://blog.youkuaiyun.com/lufy_Legend/article/details/38549421WebGL 编程指南1、引入顶点缓冲(IBO)绘制矩形需要2个三角形,也就是6个顶点坐标。但是顶点2和顶点3的数据是重复的...原创 2019-10-10 11:23:34 · 726 阅读 · 0 评论 -
学习WebGL_006_纹理映射
作者: DSLMing时间: 2019.10.10参考WebGL 编程指南.pdf 第5章1、纹理映射的步骤纹理映射的过程需要顶点着色器和片元着色器二者的配合。1)指定纹理映射方式为每个顶点指定纹理坐标:let verticesTexCoords = new Float32Array([ //顶点坐标 纹理坐标 -0.5,0.5, 0.0,1.0, -0.5,...原创 2019-10-11 12:49:40 · 215 阅读 · 1 评论 -
ThreeJS调试工具使用
ThreeJS调试工具下载安装为谷歌浏览器安装插件(需要科学上网)。https://chrome.google.com/webstore/category/extensions?hl=zh-CN在代码里进行配置// 1)将THREE 绑在window上import * as THREE from 'three'window.THREE = THREE// 2)将场景绑在wind...原创 2019-01-06 14:17:27 · 5812 阅读 · 3 评论