WebGL | 易学教程

Materials in exported Blender model for Three.js not working

阅读更多关于 Materials in exported Blender model for Three.js not working

问题 I am trying to use a model created with Blender with Three.js The model is very basic, two cubes on top of each other. One cube is red and the other is green. I have exported the model using the Blender exporter plugin of Three.js When I assign a material manually to the object like: loader.load("model.js", function ( geometry, material ) { material = new THREE.MeshBasicMaterial( { color: 0xFF0000 } ); mesh = new THREE.Mesh( geometry, material); scene.add(mesh); animate(); }); there is no

【WebGL】2.基础概念

阅读更多关于【WebGL】2.基础概念

引入Three.js <!DOCTYPE html> <html> <head> <title></title> </head> <body> <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script> </body> </html> 三大要素：场景，相机和渲染器场景：动画中的容器，所有物体都存在于一个场景当中，三维中的场景类似与二维动画中的canvas 相机：一个视角，对场景进行拍摄，通过切换位置和角度能拍摄到不同的景象渲染器：将相机拍摄的内容渲染到浏览器中，最终用户是通过浏览器看到相机的景象的他们之间的关系如图：创建一个场景：var scene = new THREE.Scene(); 创建一个相机：var camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000); 创建一个渲染器： var renderer = new THREE.WebGLRenderer(); 相机具体参数我们后面会详细介绍　　　　var scene = new THREE.Scene(); var camera = new THREE

webgl （原生）基础入门指南【一】

阅读更多关于 webgl （原生）基础入门指南【一】

来看这篇文章的同学一定是被近来的3D场景效果所震撼，抱着‘这TM怎么做的！’的来心态来学习webgl的吧。也行你已经有threejs或其他3d场景开发框架的使用经验，却不知道webgl原生到底怎么写。本系列将从最简单最基础的原生API入手，手把手教你写webgl 准备webgl上下文同二维场景一样，我们需要一个画布来绘制，在html中建立一个 canvas 元素。代码如下： // index.html <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8" /> <title>Webgl Hello world!</title> </head> <body onload="start()"> <canvas id='main' width=500 height=400></canvas> <script src="./index.js"></script> </body> </html> start() 函数将会在文档加载完成之后被调用。它的任务是设置 WebGL 上下文并开始渲染内容。 // index.js function start() { var canvas = document.getElementById("main"); // 初始化 WebGL 上下文 var

WebGL 入门-WebGL简介与3D图形学

阅读更多关于 WebGL 入门-WebGL简介与3D图形学

什么是WebGL？ WebGL是一项使用JavaScript实现3D绘图的技术，浏览器无需插件支持，Web开发者就能借助系统显卡（GPU）进行编写代码从而呈现3D场景和对象。 WebGL基于OpenGL ES 2.0，OpenGL ES 是 OpenGL 三维图形 API 的子集，针对手机、平板电脑和游戏主机等嵌入式设备而设计。浏览器内核通过对OpenGL API的封装，实现了通过JavaScript调用3D的能力。WebGL 内容作为 HTML5 中的Canvas标签的特殊上下文实现在浏览器中。 WebGL标准由科纳斯组织（Khronos Group）开发和维护，Google、Mozilla、Opera和Apple 等浏览器厂商都是其中的成员，为这一标准做出了显著贡献。 WebGL支持现状目前所有的主流桌面浏览器都已经支持WebGL，但手机端的浏览器只有部分最新版支持。桌面浏览器 Mozilla Firefox 4+ Google Chrome 8+ Internet Explorer 11+ Safari 5.1+ Opera 12+ 移动浏览器 Firefox 25+ Google Chrome 31+ Opera Mobile 12+ Android Browser 暂不支持 iOS Safari暂不支持 IE Mobile 暂不支持 3D图形学

WebGL-七之二

阅读更多关于 WebGL-七之二

与上一节相比这一节相当做了些整合和整理，目的是提高了读写效率和减少代码量，就是做了优化。这里我们只需要在顶点着色器中定义一个用于从js传递参数的变量u_MvcMatrix一看就知道是uniform变量而且是可4*4矩阵，然后再js中 new四个矩阵变量分别是mvcMatrix是几个矩阵变量相乘后的矩阵，modelMatrix是用于平移旋转变换的矩阵变量，viewMatrix是用于设置前后截面的矩阵变量，projMatrix是用于设置视点，目标点，和方向的矩阵变量。先为变量赋值，然后通过内置函数mvcMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix)求出最终变换的矩阵变量。然后与点的坐标相乘。 http://123.206.70.64:8080/WebGL7/PerspectiveView_mvp.html 效果图：代码： <!DOCTYPE html> <html> <head> <title>PerspectiveView_mvp.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"

关于WebGL的开发流程

阅读更多关于关于WebGL的开发流程

我们学习WebGL也有3周左右了，我们在这里把我们的开发流程记录一下。在HTML里的部分，我们由于目前只是一个简单的页面，其实就是一个canvas画布，所以我们没有什么好说的。在js里面，他的一些流程是这样的： 1:首先，我们的WebGL的图形绘画其实是以canvas画布为核心的，所以我们需要先获取画布，然后获取gl的文本上下文，具体的操作是： var canvas = document.getElementById('webgl'); var gl = getWebGLContext(canvas); 2:然后，我们的WebGL是基于我们的着色器的，即VSHADER(顶点着色器)和FSHADER(片元着色器)，所以我们需要初始化我们的着色器。当然，我们这里有个错误检查，前期学习的时候应该可以暂且跳过，但是这东西到后期应该挺重要的，不能放过去。 3:到了第三步的时候，如果我们只跟着WebGL编程指南,他这里会获取一个a_Position的元素，但是我们仔细思考下，他为什么要获取这个东西？其实这个问题我们还是要从我们的着色器来说。就是从最简单地来说，我们先把顶点着色器理解成绘制顶点的位置和大小等一些其他的顶点特征的；我们的片元着色器就是绘制顶点的颜色的，暂且先这么理解。那么顶点的位置怎么来确定呢？我们需要自己给出，其实就是从我们的js代码中给出我们想要的像素点的位置

WebGL的常见错误

阅读更多关于 WebGL的常见错误

注： canvas全屏的时候不要用 canvas.style.width 和canvas.style.height 给100%，图像会失真；直接 canvas.width = window.innerWidth; canvas.height = window.innerHeight; 或者 canvas.width = document.documentElement.clientWidth; canvas.height = document.documentElement.clientHeight 来充满全屏； 1. WebGL: INVALID_VALUE: vertexAttribPointer: index out of range 原因：gl.getAttribLocation(shaderProgram, 'aVertexPosition') 变量取不到值，（变量名对不上请仔细对照定义的变量名）； 2. 没有报错物体不显示原因： gl.uniformMatrix4fv 参数有空undefined被传入 3.GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 0 原因：创建新的buffer时

WebGL - animated sprites + animated coordinates

阅读更多关于 WebGL - animated sprites + animated coordinates

问题 I need to run both sprite animations and animated coordinates. That is, a texture coordinate in [0, 1] is given for some specific sprite in an animation, and then it gets translated by another coordinate. The translation can result in coordinates outside of [0, 1], and this is needed for repeating. The problem is this - I supply the sprites as a texture atlas. Therefore, selecting a sprite means getting a sub-rectangle in [0, 1]. Because this sprite is in between others, there is no way to

WebGL - animated sprites + animated coordinates

阅读更多关于 WebGL - animated sprites + animated coordinates

如何选择 H5 游戏引擎

阅读更多关于如何选择 H5 游戏引擎

原生手游市场已是红海，腾讯、网易等寡头独霸天下，H5游戏市场或将成为下一个风口。据笔者所知，很多H5游戏开发团队由于选择引擎不慎导致项目甚至团队夭折。如何选择适合团队和项目的引擎，笔者通过学习和项目实践，总结微薄经验，供大家参考，非技术人员也可以将本篇内容作为引擎选择的重要关注点。选择H5游戏引擎的思考维度 1、开发语言的支持 2、2D、3D、VR的支持 3、性能 4、引擎的应用广度 5、设计理念 6、工作流支持力度 7、商业化成熟案例 8、学习资源与技术支持能力首先，我们要知道，当前主流的游戏引擎有哪些。由于H5引擎有很多，笔者在这里进行了精心的筛选，过滤掉不支持webGL的引擎，以及封装了第三方渲染内核的JS框架，和不能直接在浏览器中运行的JS引擎。为什么要过滤掉这几种呢，首先，没有自己的渲染内核，仅仅是基于第三方的内核作的API封装，笔者很担心可持续的性能优化和维护能力。另外，不能在浏览器中直接运行的JS引擎，将限制H5游戏跨平台的交互能力。还有，笔者非常看好webGL模式，认为webGL模式才是H5引擎的未来。原因有几点：第一、性能，webGL模式远超Canvas数倍。DOM模式就不适合用于真正的游戏开发，更不用提。第二、3D方向，webGL模式理论上可以制作2D和3D游戏，Canvas和DOM模式下只能制作2D游戏。第三、普及率

订阅 WebGL