gl attribute和uniform的用法 http://blog.csdn.net/jackers679/article/details/6848085 attribute    attribute变量是只能在vertex shader中使用的变量.(它不能在fragment shader中声明attribute变量,也不能被fragment shader中使用) 一般用attribute变量来表示一些顶点的数据,如:顶点坐标,法线,纹理坐标,顶点颜色等    在application中,

一:attribute .uniform 和 varying 都是glsl的变量的内存指示器(storage qualifiers),指明变量的内存特性 二:attribute attribute 是opengl es 2.0.glsl 1.0的关键字,3.0之后由“in”关键字取代. attribute 修饰的变量表明其数据由opengl es传入给vertex shader. attribute只适用于vertex shader,其数据是只读的. 只修饰float, vec2, vec3,

VAO VAO(Vertext Array Object),中文是顶点数组对象.之前在<Buffer>一文中,我们介绍了Cesium如何创建VBO的过程,而VAO可以简单的认为是基于VBO的一个封装,为顶点属性数组和VBO中的顶点数据之间建立了关联.我们来看一下使用示例: var indexBuffer = Buffer.createIndexBuffer({ context : context, typedArray : indices, usage : BufferUsage.STATIC

/*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识以后有机会再总结.*/ /*第一部分,webgl与three.js基础介绍,要求读者掌握JavaScript入门知识*/ //webgl原理:通过JavaScript语言在浏览器端生成glsl代码,把glsl代码送入显卡执行,把执行结果显示在浏览器中 //简单例程: //根据Tony Parisi著

引擎提供了CCGLProgram类来处理着色器相关操作,对当前绘图程序进行了封装,其中使用频率最高的应该是获取着色器程序的接口:const GLuint getProgram(); 该接口返回了当前着色器程序的标识符.后面将会看到,在操作OpenGL的时候,我们常常需要针对不同的着色器程序作设置.注意,这里返回的是一个无符号整型的标识符,而不是一个指针或结构引用,这是OpenGL接口的一个风格.对象(纹理.着色器程序或其他非标准类型)都是使用整型标识符来表示的. CCGLProgram提供了两个

[GLSL Notes] API of shader: glCreateShader(), glShaderSource(), glCompileShader(), glGetShadrInfoLog(), glCreateProgram() API of porgram: glCreateProgram(), glAttachShader(), glDetashShader(), glLinkProgarm(), glGetProgarmInfoLog(), glUseProgram() Re

概要 本文通过解决一个假想的问题介绍了 css screen 混合模式,并介绍了如何用 svg 滤镜.canvas 2d.canvas webgl 实现相同的效果. 问题 下面的图片演示三种颜色光叠加的效果,请在 html 中实现这种效果. 约定 词语 指代 混合 blend 加色 additive color - 名词 特性 attribute,比如 <a id=1>,说 id 是元素 a 的特性 透明度 α.alpha 伪输入图像 pseudo input image 着色器 shader

OpenGL ES着色器语言之着色概览(官方文档第二章) 事实上,OpenGL ES着色语言是两种紧密关联的语言.这些语言用来在OpenGL ES处理管线的可编程处理器创建着色器. 在本文档中,除非另外说明,一个语言功能适用于所有语言,并且通用用法将把他们当做一个语言来看待.特定语言将指出它们的目标处理器:顶点(vertext)或片元(fragment). 任何被着色器使用的OpenGL ES状态值都会自动地被跟踪并且作用于着色器上.这个自动状态跟踪机制允许应用程序为状态管理而使用OpenGL

关键字:Cesium glTF WebGL技术 大纲: 1 glTF简介,这是一个什么东西,有哪些特点 2 Cesium如何加载,渲染glTF,逻辑结构和关键技术 3 个人总结,从glTF学习如何设计一个二进制格式,个人想法分享 共计 4000字 | 建议阅读时间 未知 1 glTF简介 之前介绍了Cesium的Property,Material,Batch,GroundPrimitive这些内容,可以说是简单地物和风格的解决思路.当Cesium把这些技术点整合起来,我们便具备了渲染模型的威力.

基于上一篇OpenGL的渲染原理,这两周又陆续接触了一些关于WebGL绘图的一些内容,因为刚入门,很多东西又很晦涩,所以特意花了小半天的时间整理了一下,特此记录. 一   画布和画笔:创建Canvas && 获取WebGL的Context 在开始WebGL的绘制故事之前,我们得先来认识一下Canvas,因为这玩意是我们之后绘图的基础底板:"Canvas元素创造了一个固定大小画布,并提供了一个或多个渲染上下文,用来绘制和处理要展示的内容"(摘自MDN).按照定义,我们可以

错误 Javascript与WebGL之间的一个最大区别在于,WebGL的操作一般不会抛出错误 如果希望获取WebGL的错误信息,那么就需要手动调用  gl.getError() 方法 该方法会返回以下错误常量之一: gl.NO_ERROR: 上一次操作没有发生错误 gl.INVALID_ENUM: 应该给WebGL方法传入常量但是传错了参数 gl.INVALID_VALUE: 在需要无符号数的地方传入了负值 gl.INVALID_OPERATION: 在当前状态下不能完成操作 gl.OUT_O

最近在用UE4的Instancing, 发现限制很多. Unity有instancing的attribute array (uniform/constant buffer),通过InstanceID来访问每个instance的数据,实现每个实例的不同的参数(通常的一种做法). 然而Unreal没有这样的功能,只有一些instancing的vertex buffer. shader: #if USE_INSTANCING && !USE_INSTANCING_EMULATED float4

基本类型: 类型 说明 void 空类型,即不返回任何值 bool 布尔类型 true,false int 带符号的整数 signed integer float 带符号的浮点数 floating scalar vec2, vec3, vec4 n维浮点数向量 n-component floating point vector bvec2, bvec3, bvec4 n维布尔向量 Boolean vector ivec2, ivec3, ivec4 n维整数向量 signed integer v

cocos2d的Shader也就是差不多直接跟GPU打交道了,跟Flash的Stage3D(AGAL)类似,不过没有AGAL这么恶心,不需要直接编写汇编语言.而Fragment Shader又跟Flash的pixelbender类似. 本文以cocos2d-js为例,但cocos2dx其他版本也是同理的,只是函数名略有不同而已. 当然还是得先复习或者学习一下GPU的原理,至少得知道vertex shader和fragment shader的作用和区别. 详细可以看看大神的说明: http://w

前一章就是第二章主要学的是通过WebGL实现先是在webGL内赋值,但是不实用后来通过定义attribute和uniform存储限定符来将javascript中的数据传到webGL中,大致的流程是1.在js中定义存储限定符2,在js中获取canvas 在js中获取隐藏浏览器兼容性的上下文环境3.将定义的带有存储限定符的参数和上下文环境通过初始化函数进行参数初始化4.在js中获取相应的定以了存储限定符的变量的存储位置并赋值给js变量5.通过webGL函数将webGL位置和数据作为参数然后完成赋值6

一.OpenGL基础 游戏引擎是对底层绘图接口的包装,Cocos2d-x 也一样,它是对不同平台下 OpenGL 的包装.OpenGL 全称为 Open Graphics Library,是一个开放的.跨平台的高性能图形接口.OpenGL ES 则是 OpenGL 在移动设备上的衍生版本,具备与 OpenGL 一致的结构,包含了常用的图形功能.Cocos2d-x 就是一个基于 OpenGL 的游戏引擎,因此它的绘图部分完全由 OpenGL 实现.OpenGL 是一个基于 C 语言的三维图形 AP

今天总结记录一下WebGL中主循环的创建和作用.我先说明什么是主循环,其实单纯的webgl不存在主循环这个概念,这个概念是由渲染引擎引入的,主循环就是利用一个死循环或无截止条件的递归达到定时刷新canvas场景的函数,也就是人们常说的canvas刷新率(fps).在讨论主循环的用处之前,我们先明确一下一个简单的完整webgl的渲染过程是怎样的,请看下图. 好了我们通过上图看到一个mesh完整的渲染流程,大致再讲解一下,首先如果是持续绘制模型的话,就不要gl.clear(gl.color_buff

今天和大家分享的是webgl渲染树形结构的流程.用过threejs,babylonjs的同学都知道,一个大模型都是由n个子模型拼装而成的,那么如何依次渲染子模型,以及渲染每个子模型在原生webgl中的流程是怎样的呢,我就以osg框架为原本,为同学们展示出来. 首先介绍osg框架,该框架是基于openGL的几何引擎框架,目前我的工作是将其翻译成为webgl的几何引擎,在这个过程中学习webgl原生架构的原理和工程构造方式,踩了各种坑,每次爬出坑都觉得自己又强大了一点,呵. 闲话少叙,切入正题,首先

基于上一篇OpenGL的渲染原理,这两周又陆续接触了一些关于WebGL绘图的一些内容,因为刚入门,很多东西又很晦涩,所以特意花了小半天的时间整理了一下,特此记录. 零  画一个多边形吧! 把一个多边形画上屏幕分几步? 答:分三步,第一,打开屏幕(1-1.从HTML中获取Canvas对象:1-2.从Canvas拿到WebGL的Context):第二,把数据画好(2-1.编译着色器:2-2.准备数据模型:2-3.顶点缓存VBO的生成和通知):第三,画上去(3-1.发出绘图命令,更新Canvas并渲染

VAO VAO(Vertext Array Object),中文是顶点数组对象.之前在<Buffer>一文中,我们介绍了Cesium如何创建VBO的过程,而VAO可以简单的认为是基于VBO的一个封装,为顶点属性数组和VBO中的顶点数据之间建立了关联.我们来看一下使用示例: var indexBuffer = Buffer.createIndexBuffer({ context : context, typedArray : indices, usage : BufferUsage.STATIC