WebGL学习

WEBGL学习【七】画布绘图

主要是对WEBGL的绘图部分进行了进一步加强的认识和理解WEBGL高级编程----绘制六边形attributevec3aVertexPosition;attributevec4aVertexColor;varyingvec4vColor;voidmain(){vColor=aVertexColor;gl_Position=vec4(aVertexPosition,1.0);}precisionme
小牛itbull·2020-07-02 11:29

webgl学习-babylon环境搭建

从今天开始我们就进入对babylon的实践环节，在这里你估计学不到任何webgl和3d的基础知识（因为我也不会），但是你可以学到一些基础实践示例，免去你去官网查询的实践。（吐槽一下，官网的文档真的不会很友好，中文不全不说，示例也比较少，有时候查找某些东西隐藏的很深或者干脆需要你自己试验）接下来我们进入学习babylon的第一步，搭建环境（额外声明：本次所有代码都是基于vue+webpack的，如果
aixinaxc·2020-07-01 16:35

webgl学习-摄像机

在babylon中，场景并没有什么好说的，基本都是固定写法：//获得画布varcanvas=document.getElementById('renderCanvas')//Loadthe3Dengine加载varengine=newBABYLON.Engine(canvas,true,{preserveDrawingBuffer:true,stencil:true})//Thiscreatesa
aixinaxc·2020-07-01 16:35

webgl学习-起航

在程序界学习任何新语言时都离不开helloworld。在学习3d的过程中自然也不例外。只不过它的helloworld是一只兔子。下面就让我们看看之前说的几个框架分别如何实现加载一个兔子模型。首先，自然是受众最广的three.js:1.创建canvas画布：2.加载所需要的js，其中three.js为主体js，其他的都为插件用到什么加载什么即可。这里因为我用的是vue，所以大体代码如下：window
aixinaxc·2020-07-01 16:34

WebGL学习小结(一)

最近开始学习WebGL,把学习过程中的一些小知识点记录下来：1、attribute和uniform变量attribute变量传输的是那些与顶点相关的数据；uniform变量传输的是那些对于所有定点都相同（或与顶点无关的数据）。2、WebGL绘制图案的执行流(1)定义变量（attribute和uniform）(2)获取canvas元素(3)获取WebGL绘图上下文(4)初始化着色器(5)设置点的坐标
追梦的小猴子·2020-06-30 14:21

WebGL学习系列-WebGL简介

前言本篇简要介绍一下WebGL的历史以及用途。WebGL概述相信大家都知道Web中有个叫canvas的画布，通过其提供的一些API，我们可以很方便的在浏览器的页面上画点、线、多边形、图片等。现在很多的html5小游戏也是由canvas来实现的。canvas技术相当于所见即所得，你画什么就在页面上展示什么，原理比较好懂。但是canvas主要是针对2D的，所以通常我们主要用于实现2D类的游戏。要说We
那个天真的人·2020-06-30 06:13

webgl学习笔记一

2019独角兽企业重金招聘Python工程师标准>>>##1.WebGLWebGL从OpenGLES2.0派生而来，OpenGLES2.0从OpenGL派生而来，用来在智能手机等设备上渲染3d。WebGL使web能够通过canvas标签渲染3d。WebGL编程除了需要JavaScript作为控制代码，还需要着色器代码，着色器代码运行在GPU。WebGL并不是一个游戏引擎，它并不提供碰撞检测、物理效
weixin_34233421·2020-06-28 14:12

WEBGL学习【十一】光照模型

Listing7-3and7-4,TexturingandLightingWiththePhongReflectionModel.//Vertexshaderimplementedtoperformlightingaccordingtothe//Phongreflectionmodel.Forwardstexturecoordinatestofragment//shader.attributeve
weixin_30776273·2020-06-28 00:41

原生webgl学习（八） WebGL实现动画：平移、缩放和旋转

为了让我们开发的图形应用看上去更加高大上，这一节笔者将和大家一起做一个动画的例子；本节的内容用到了前面文章提到过的平移、缩放和旋转变换，如果对这方面还不是很熟悉的同学，可以参考这篇文章：原生webgl学习
Bruce_wjh·2020-06-25 12:53

WEBGL学习【十】运动模型

LWEBGL6.2,AnimatedWebGLScenewithKeyInput.attributevec3aVertexPosition;attributevec2aTextureCoordinates;uniformmat4uMVMatrix;uniformmat4uPMatrix;varyingvec2vTextureCoordinates;voidmain(){gl_Position=uP
小牛itbull·2020-06-24 12:13

WebGL学习资源汇总（持续更新）

WebGL学习资源汇总书籍计算机图形图像处理基础WebGL编程指南Three.js开发指南OPenGLES2.0游戏开发书籍介绍：《计算机图形图像处理基础》2011年.电子工业出版社出版的.唐波全书共分
X01动力装甲·2020-06-24 05:10

webgl学习笔记三-平移旋转缩放

webgl学习笔记一-绘图单点webgl学习笔记二-绘图多点平移1、关键点说明顶点着色器需要加上uniformvec4u_Translation,存储平移的坐标矢量。
csdn_xpw·2020-06-23 00:51

WebGL学习(1) — 浏览器支持测试

什么是WebGL?WebGL是一项用来在网页上绘制和渲染三维图形并允许用户与之交互的技术。同时，WebGL(web图形库)是一种javascriptAPI，用于在任何兼容的web浏览器中呈现交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGLES2.0紧密相符合的API，可以在HTML5元素中使用。浏览器支持Firefox4+GoogleChrome9+Opera12+Saf
守心向暖·2020-04-04 16:46

WebGL学习(2) — 坐标系统

WebGL使支持HTML标签的浏览器不安装任何插件，便可以使用基于OpenGLES2.0的API在canvas中进行3D渲染。WebGL程序由js控制代码和计算机的图形处理单元(GPU,GraphicsProcessingUnit)中执行的渲染代码(shadercode)组成。webgl元素可以和其他HTML元素混合，并且会和页面的其他部分或页面背景相合成。需要理解的几个概念canvas:画布ve
守心向暖·2020-04-04 03:14

WebGL学习(1) - 三角形

原文地址：WebGL学习(1)-三角形还记得第一次看到canvas的粒子特效的时候，真的把我给惊艳到了，原来在浏览器也能做出这么棒的效果。
jeffzhong·2020-02-27 14:51

WebGL学习笔记

WebGL是Web前端最快的制图方式，比传统的canvas2d要快近十倍。在做图时，如果前端需要展现的数据量过多，可能需要这种技术。例如做GraphNetwork,canvas2d可以支持的元素在2k左右，而WebGL可以支持到20k。WebGL更接近于OpenGL而相异于Js/Canvas2d，主要的思想是用JS生成可以在GPU上执行的代码，利用GPU直接渲染所需图形。WebGL是一个光栅引擎。
张飞不在家·2019-10-31 15:59

WebGL学习笔记（一）：理解基本概念和渲染管线

WebGL是以OpenGLES2.0为基础的3D编程应用接口。渲染管线（图形流水线）渲染管线是指将数据从3D场景转换成2D图像，最终在屏幕上显示出来的总过程。它分为几个阶段：应用阶段、几何阶段和光栅阶段，关于这3个阶段的详细介绍可以点这里查看。下面我们来仔细看看WebGL中的每个步骤：1.顶点着色器顶点着色器一般用来对模型的顶点进行矩阵变换，一般就是将模型的所有顶点乘于一个变换矩阵，使该模型位于相
阿诚de窝·2019-07-15 18:00

webgl学习系列--3 三维模型的加载原理

初识webgl时，一直很好奇，三维模型是如何加载显示的呢。其实计算机是“很蠢”的，只认识二进制的数据。而对于人和计算机交互的一个中间数据那就是json和图片。其实三维模型的加载也基本是这两种数据。那么就有疑问了，三维模型包括很多种数据格式，常见的如dae、obj、b3dm。这些数据通常我们用文本格式打开都是乱码。这如何解释呢。第一个疑问：数据格式是不同行业应用造成的，但是他们都遵循一定的规范，不是
a873054267·2019-05-27 11:46

WebGL学习之HDR与Bloom

原文地址：WebGL学习之HDR与Bloom什么是HDRHDR(HighDynamicRange，高动态范围)，在摄影领域，指的是可以提供更多的动态范围和图像细节的一种技术手段。
Jeff.Zhong·2019-05-21 18:00

WebGL学习之纹理盒

原文地址：WebGL学习之纹理盒我们之前已经学习过二维纹理gl.TEXTURE_2D，而且还使用它实现了各种效果。
Jeff.Zhong·2019-05-06 12:00

WebGL学习之法线贴图

原文地址：WebGL学习之法线贴图实际效果请看demo：纹理贴图为了增加额外细节，提升真实感，我们使用了漫反射贴图和高光贴图，它们都是向三角形进行附加纹理。
Jeff.Zhong·2019-05-01 13:00

WebGL学习之纹理贴图

原文地址：WebGL学习之纹理贴图为了使图形能获得接近于真实物体的材质效果，一般会使用贴图，贴图类型主要包括两种：漫反射贴图和镜面高光贴图。其中漫反射贴图可以同时实现漫反射光和环境光的效果。
Jeff.Zhong·2019-04-29 16:00

WebGL学习教程之Three.js学习笔记(第一篇)

webgl介绍WebGL是一种3D绘图协议，它把JavaScript和OpenGLES2.0结合在一起，通过增加OpenGLES2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染。WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏。原生的WebGl比较复杂，主要通过对顶点着色器和片元
nsytsqdtn·2019-04-25 12:59

WebGL学习系列-片元着色器简介

前言到目前为止，我们绘制过点、三角形、矩形等，但使用的都是单色系。之前曾经说过着色器的概念，着色器分为顶点着色器和片元着色器，我们一直在使用顶点着色器，而对片元着色器基本没有提及过，本小节将展开对片元着色器的简单介绍。彩色的点之前提到过，顶点着色器决定点的大小、位置和颜色，而片元着色器是用于给像素着色的，初步看，片元着色器的任务好像给顶点着色器完成了，但实际上不然，顶点着色器只能决定点的颜色，如果
Luckie stone·2019-04-25 06:25

WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

WebGL学习----Three.js学习笔记（5）点击查看demo演示Demo地址：https://nsytsqdtn.github.io/d...简单网格材质MeshNormalMaterialMeshNormalMaterial
nsytsqdtn·2019-04-25 00:00

WebGL three.js学习笔记 创建three.js代码的基本框架

WebGL学习----Three.js学习笔记（1）webgl介绍WebGL是一种3D绘图协议，它把JavaScript和OpenGLES2.0结合在一起，通过增加OpenGLES2.0的一个JavaScript
nsytsqdtn·2019-04-24 00:00

Webgl学习日志(五)——Three.js 使用JSON格式保存和加载整个场景，并解读JSON数据

具体实例可以看这篇博客：https://blog.csdn.net/qq_30100043/article/details/79604757操作简单，但最主要的还是要实现更多的功能，最好能用在更多的3D模型上，比如我用的多的Revit，最好能够先把Revit模型转化为JSON格式的数据，然后在Webgl上读取JSON数据。首先上篇博客出现的几个问题：1、怎么查看生成的JSON数据：2、在chrom
niuge8905·2018-04-10 23:35

WebGL学习(3) - 3D模型

原文地址：WebGL学习(3)-3D模型相信很多人是以创建逼真酷炫的三维效果为目标而学习webGL的吧，首先我就是。
Jeff.Zhong·2017-12-27 10:00

WebGL学习(2) - 3D场景

原文地址：WebGL学习(2)-3D场景经过前面WebGL学习(1)-三角形的学习，我们已经掌握了webGL的基础知识，也已经能够画出最基本的图形，比如点，线，三角形，矩形等。
Jeff.Zhong·2017-11-15 09:00

WebGL学习(1) - 三角形

原文地址：WebGL学习(1)-三角形还记得第一次看到canvas的粒子特效的时候，真的把我给惊艳到了，原来在浏览器也能做出这么棒的效果。
Jeff.Zhong·2017-11-09 10:00

WEBGL学习【六】动起来的三棱锥和立方体

NeHe'sWebGLprecisionmediumpfloat;varyingvec4vTextureCoord;uniformsampler2DuSampler;voidmain(void){gl_FragColor=texture2D(uSampler,vec2(vTextureCoord.s,vTextureCoord.t));}attributevec3aVertexPosition;a
小牛itbull·2017-11-02 20:02

WEBGL学习【五】纹理贴图

NeHe'sWebGLprecisionmediumpfloat;varyingvec4vTextureCoord;uniformsampler2DuSampler;voidmain(void){gl_FragColor=texture2D(uSampler,vec2(vTextureCoord.s,vTextureCoord.t));}attributevec3aVertexPosition;a
小牛itbull·2017-10-26 12:44

WebGL学习笔记（一）

作者：朱金灿来源：http://blog.csdn.net/clever101（一）WebGL是什么？WebGL是一门在网页上显示三维图形的技术，你可以把它理解为把OpenGL从C/S端搬到了B/S端。因此它也就继承了OpenGL的跨平台的优势，同时它是以js程序的形式表现出来的，因此比起OpenGL程序多了一个优势：一次编写的代码满足目前所有的设备，包括PC、平板和手机。同时WebGL的底层渲染
宁可十年不将军，不可一日不拱卒·2017-01-27 14:26

WebGL学习笔记

WebGL从2012年开始接触，后面因为开始专注前端其他方面的事情，慢慢地就把它给遗忘。最近前端开始又流行起绘画制作，游戏、VR等等又开始引起前端人们的注意。所以，是时候开始重新拾起。3D绘画是一个很复杂的数学物理综合体，会涉及到很多基础概念，了解了这些概念后才能进行实际的开发工作。基础概念WebGL不同于canvas，它是一个三维绘画模拟技术，在我们二维的显示器里，其由深度决定前后的关系，根据远
我不是传哥·2017-01-05 18:40

CSGrandeur的WebGL学习——WebGL教程

在线查看：http://csgrandeur.gitbooks.io/webgl-learn/content/ 离线mobi：http://files.cnblogs.com/files/CSGrandeur/csgrandeur-webgl-learn_mobi_20150520.rar 离线pdf：http://files.cnblogs.com/files/CSGrandeur/csgr
·2015-11-11 01:50

WebGL学习笔记01-------几个重要参数

1、scene=newTHREE.Scene();2、camera的几个函数设置camera=newTHREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);//照相机参数设定camera.position.set(x,y,z);//照相机的位置camera.lookAt(scene.position);//这里的参数是个集合，所以要写成camera.
u012283902·2014-09-24 13:00

WebGL学习随手记(一)

 Shadervarying：vs的输出，fs的输入（在光栅化时进行了图元内线性插值）。在vs,fs中的声明必须一致。uniform：应用程序通过通过OpenGLES2.0API传送给shader的只读变量;uniform在programobject中是共享的，即一个programobject只有一组uniforms。如果uniform同时在vs和fs中声明，必须具有相同的类型，并且在这两个sha
u012602393·2013-10-29 14:00

WebGL学习笔记-使用3D引擎threeJS实现星空粒子移动

演示地址: http://creativejs.com/uploads/tutorials/three/Part1_particles/ThreeParticles.htmlthree.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js是一款运行在浏览器中的3D引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。下载地址: http:
·2013-04-20 17:00

WebGL学习随手记(一)

 Shadervarying：vs的输出，fs的输入（在光栅化时进行了图元内线性插值）。在vs,fs中的声明必须一致。uniform：应用程序通过通过OpenGLES2.0API传送给shader的只读变量;uniform在programobject中是共享的，即一个programobject只有一组uniforms。如果uniform同时在vs和fs中声明，必须具有相同的类型，并且在这两个sha
gebinsdyz·2013-01-07 14:00

WebGL学习之路

  最近开始学习WebGL，这是一个阶段小结，发上来和大家交流一下。有些地方用英文，因为有些词不好翻译。     WebGL对于我来说相对陌生，相信很多JAVA开发者也是，陌生会产生两样东西：好奇和恐惧。下面便来战胜恐惧满足好奇，说得有些凌乱，看不明白就请直接跳过。     谈一些基本概念   What is
lingceng·2012-11-23 15:00

WebGL学习笔记（数学知识篇）

阅读更多1、点乘用于求两个向量的夹角2、差乘用于计算两个向量的法向量3、齐次坐标系在三纬空间内，Vecror即可以表示向量也可以表示空间内一点，为了区分点与向量，引入齐次坐标系，即Vector4(x,y,z,w)来表示空间内的点，W默认权重值为14、退化三角形(DegenerateTriangles)退化三角形是指面积为零的三角形。满足下列条件之一的三角形即可称为退化三角形：三个内角的度数为(18
lvmy·2012-08-23 09:00

WebGL学习笔记（数学知识篇）

1、点乘 用于求两个向量的夹角   2、差乘 用于计算两个向量的法向量   3、齐次坐标系 在三纬空间内，Vecror即可以表示向量也可以表示空间内一点，为了区分点与向量，引入齐次坐标系，即Vector4(x,y,z,w)来表示空间内的点，W默认权重值为1   4、退化三角形(Degenerate Triangles) 退化三角形是指面积为零的三角
lvmy·2012-08-23 09:00

WebGL学习笔记（基础知识篇）

阅读更多WEBGL基础知识介绍1、场景（scene）场景如其名，即显示3D空间内物体的容器，就好比一个箱子是一个3D场景。2、坐标系：webgl使用笛卡尔坐标系（宽度、高度和深度），我们也可以指定使用其它坐标系统。WEBGL与过去我所使用的flash3D坐标系有一些区别，在flash3d中，屏幕的左上角为坐标系原点，向下为Y轴正方向，向右为X轴正方向，而在webgl中，屏幕的中心点为原点。但是在3
lvmy·2012-08-22 19:00

WebGL学习笔记（基础知识篇）

  WEBGL基础知识介绍 1、场景（scene） 场景如其名，即显示3D空间内物体的容器，就好比一个箱子是一个3D场景。   2、坐标系： webgl使用笛卡尔坐标系（宽度、高度和深度），我们也可以指定使用其它坐标系统。 WEBGL与过去我所使用的flash3D坐标系有一些区别，在flash3d中，屏幕的左上角为坐标系原点，向下为Y轴正方向，向右为X轴正方向，
lvmy·2012-08-22 19:00

WebGL学习笔记【一】概述及三角形

转自：http://www.cnblogs.com/kohpoll/WebGL学习笔记【一】概述及三角形 最近开始研究起WebGL来，发现以前在图形学课上看javascript还真是不太理智的做法。 
lvmy·2012-03-08 14:00

WebGL自学教程－－示例：图表控件

于是，我的WebGL学习之
tiewen·2011-11-22 16:00
上一页 1 2 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他