WebGL | 易学教程

mat3 attribute in WebGL

阅读更多关于 mat3 attribute in WebGL

问题 I'm attempting to use the ANGLE_instanced_arrays extension in WebGL to render multiple instances of an object with different mat3 transformation matrices. This is the code related to the buffer for my matrices: //setup this.shaderProgram.transformAttribute = gl.getAttribLocation(this.shaderProgram, "transform"); ext.vertexAttribDivisorANGLE(this.shaderProgram.transformAttribute, 1); this.transformBuffer = gl.createBuffer(); //each render gl.enableVertexAttribArray(this.shaderProgram

Saving/Loading compiled webgl shaders

阅读更多关于 Saving/Loading compiled webgl shaders

问题 I have not found any definitive answers to this, so decided to ask here. Is there really no way to save and load compiled webgl shaders? It seems a waste to compile the shaders every time someone loads the page, when all you would have to do is compile the shaders once, save it to a file, then load the compiled shader object, as you would HLSL (I know it's not GLSL, but i'm still a little new to OpenGL). So, if possible, how can i save and load a compiled shader in webgl? 回答1: There really is

Webgl update region using viewport+scissor

阅读更多关于 Webgl update region using viewport+scissor

问题 I've been trying to create a multiviewport webgl application. I got everything rendering quite nice using viewport+scissor for each view. But now I would like to improve rendering and just render the view which is updated, so skip overdrawing. I've made a little demo showing the idea: http://kile.stravaganza.org/lab/js/scissor/ As I understand scissor it's suposse that it will just render the current scissor box and keep the rest of the canvas untouched. But it seems that it just keeps

基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（一）

阅读更多关于基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（一）

今天没有延续上一篇讲的内容，穿插一段小插曲，WebSocket 实时数据通讯同步的问题，今天我们并不是很纯粹地讲 WebSocket 相关知识，我们通过 WebGL 3D 拓扑图来呈现一个有趣的 Demo。接下来我们就看看这个实时数据通讯是一个什么样的套路。我们先来聊聊这次 Demo 的思路吧，首先我要有一个 3D 的拓扑图组件，在上面创建几个节点，然后通过拉力布局（ForceLayout）将这些节点自动布局，但是有一定，需要在不同的网页窗口下，对应节点的位置是一样的，简单地说就是不同网页窗口所呈现的节点布局是一样，而且拖动不同网页窗口中的任意的节点，都将更新所有页面窗口，让所有窗口的呈现都是一样的。根据上面的思路，我们该如何去规划呢？既然需要实时数据通讯，那么就需要使用 WebSocket，WebSocket 又是什么呢？WebSocket 是 HTML5 一种新的协议，它没有标准的 API，各个实现都有自己的一套 API，在这里我们就不去详细研究 WebSocket 的具体实现，我也讲不了，至少现在讲不了。在这里我们用比较易上手的 Node.js 的 Socket.IO 做通讯框架， Socket.IO 让长连接通讯变得无比简单，服务器再也不用等待客户端的请求就可以直接给客户端发送消息，根据这样的特性就可以实现数据通讯同步的问题。我们来写一个最简单的例子

Drawing lines in three.js using CanvasRenderer makes smoother lines than WebGLRenderer

阅读更多关于 Drawing lines in three.js using CanvasRenderer makes smoother lines than WebGLRenderer

问题 I've been stuck with an issue with three.js' CanvasRenderer rendering lines a lot smoother than the WebGLRenderer. It appears as if the WebGLRenderer doesn't apply antialiasing. When I take the three.js canvas - lines - random example from http://mrdoob.github.io/three.js/examples/canvas_lines.html, I see this using the CanvasRenderer: When changing the following line renderer = new THREE.CanvasRenderer(); to renderer = new THREE.WebGLRenderer({antialias: true}); , I see this: As you can see,

Transparency Face-Jumping?

阅读更多关于 Transparency Face-Jumping?

问题 I've been working on a WebGL project that runs on top of the Three.js library. I am rendering several semi-transparent meshes, and I notice that depending on the angle you tilt the camera, a different object is on top. To illustrate the problem, I made a quick demo using three semi-transparent cubes. When you rotate the image past perpendicular to the screen, the second half of the smallest cube "jumps" and is no longer visible. However, shouldn't it still be visible? I tried adjusting some

Create a plane mesh, with points defining colors

阅读更多关于 Create a plane mesh, with points defining colors

问题 I've created ~2500 meshes and use an algorithm defining the color of each mesh. The algorithm goes through all meshes and adds a value depending on the distance it has to each "red-start" point. The value then decides what the color should be. This is the result: It is lagging and the corners aren't smooth. I want to recreate the same color result in some other way but can't figure out how. How can you do it with THREE.Shape and FragmentShader? Final Goal Description: Using one, for increase

WebGL debug tools?

阅读更多关于 WebGL debug tools?

问题 I am looking for WebGL debug and inspection tools - something like FireBug for WebGL. Any recommendations? 回答1: Just found WebGL Inspector. It claims to be an advanced WebGL debugging toolkit. I haven't personally tried it yet. http://benvanik.github.com/WebGL-Inspector/ 回答2: As mentioned above WebGL-Inspector is a tool, allowing you to analyze textures and buffers passed into shader programs. For low-level issues advanced tools are necessary which track driver API calls, memory consumption

Are there any non-mobile graphics cards that don't support “precision highp float”?

阅读更多关于 Are there any non-mobile graphics cards that don't support “precision highp float”?

问题 I know it is common for mobile phones to not support 'precision highp float' in fragment shaders, but are there any desktop or laptop GPUs that don't support it? In other words, if I'm only writing my shader code for use in desktop/laptop scenarios, do I really need to do this conditional stuff recommended in the OpenGL ES 2.0 book? #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif Or can I just stick with declaring it 'highp' and be done with it?

How do I draw gradients of discrete integer values from 0-255 in WebGL without making a buffer for each color

阅读更多关于 How do I draw gradients of discrete integer values from 0-255 in WebGL without making a buffer for each color

问题 Hello I am using Dartlang and WebGl to write a neural net visualization and I the neurons output ranges from 0-1. I want to display the neurons outputs as a function of color using a sampling depth of 255 values in the red spectrum. I have learned basic WegGL and I know that I need to bind a color to an array and then read it using a GPU program. My program draws red triangle for a neuron with output close to 1 and white for a neuron who's output is close to 0. My question is how do I draw