WebGL | 易学教程

Can't clone() Texture

阅读更多关于 Can't clone() Texture

问题 Basicly, this works: var expl1 = new THREE.ImageUtils.loadTexture( 'images/explodes/expl1.png' ); this.material = new THREE.MeshBasicMaterial({ map: expl1, transparent:true, blending:THREE.AdditiveBlending }); And this doesnt... var expl1 = new THREE.ImageUtils.loadTexture( 'images/explodes/expl1.png' ); this.material = new THREE.MeshBasicMaterial({ map: expl1.clone(), transparent:true, blending:THREE.AdditiveBlending }); The problem is, i have multiple objects with this texture. I want to be

Webgl shader debugger, variable inspection

阅读更多关于 Webgl shader debugger, variable inspection

问题 I am looking for a javascript which allows me to debug a WebGL shader down to the single line / variable level. So it should be possible break on every line and inspect the value of every variable. This can be done by instrumentation (parsing the shader, generating a shader which outputs the requested variable, execute this shader against the current context and returns the ouput to the user) It is similar to what glslDevil (http://www.vis.uni-stuttgart.de/glsldevil/) does for OpenGL. Does

Is it possible to run #version 120 shaders with WebGL

阅读更多关于 Is it possible to run #version 120 shaders with WebGL

问题 I have a number of GLSL fragment shaders for which I can pretty much guarantee that they conform to #version 120 They use standard, non-ES conformant values and they do not have any ES-specific pragmas. I really want to make a web previewer for them using WebGL. The previewer won't be used on mobile. Is this feasible? Is the feature set exposed to GLSL shaders in WebGL restricted compared to that GLSL version? Are there precision differences? I've already tried playing with THREE.js but that

Switch canvas context

阅读更多关于 Switch canvas context

问题 Assuming that I have a WebGL canvas (by calling getContext("experimental-webgl")). Is there any way to switch context later for using a "2d" one ? The goal of such thing would be to display a debug BSOD-like when an error happening during rendering. If it's not possible, then : Can I embed an html element over a canvas, and force this element to have exactly the same same that the canvas (even if this last is resized) ? Can I replace an dom node, and update every reference about the old one

Switch canvas context

阅读更多关于 Switch canvas context

Morph Targets Three.js

阅读更多关于 Morph Targets Three.js

问题 I'm trying to get started with morph targets and three.js. However, there doesn't seem to be much documentation on this subject. As I'm looking at the source code: morphTargetInfluences[] seems to be the magic...how does this work? How do I use this? Is a value of 1 full strength? How can I differentiate between different morph targets on the same model? I'm just trying to understand: morphTargetInfluences[]. Thanks in advance 回答1: http://threejs.org/examples/webgl_morphtargets.html Morph

WebGL - which API to use?

阅读更多关于 WebGL - which API to use?

问题 I want to draw multiple polygon shapes (where each shape has it's own set of vertices). I want to be able to position these shapes independently of each other. Which API can i use to set the a_Position for the vertex shader? A) gl.vertexAttrib3f B) gl.vertexAttribPointer + gl.enableVertexAttribArray thanks. 回答1: Your question makes it sound like you're really new to WebGL? Maybe you should read some tutorials? But in answer to your question: gl.vertexAttrib3f only lets you supply a single

Three.js: Fresnel Shader - Color changing or env map blending

阅读更多关于 Three.js: Fresnel Shader - Color changing or env map blending

问题 I'm not a shader specialist, but I'd like to pass the color value to the shader that could maybe blended with the env map color. var shader = THREE.FresnelShader; // Thank you WestLangley for that trick var uniforms = THREE.UniformsUtils.merge( [ THREE.UniformsLib[ "lights" ], shader.uniforms ] ); uniforms[ "tCube" ].value = textureCube; var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights : true }; shaderMaterial = new THREE

HTML5 （四）canvas绘图、WebGL、SVG

阅读更多关于 HTML5 （四）canvas绘图、WebGL、SVG

目录一、Canvas 1.1、创建canvas元素 1.2、画线 1.3、绘制矩形 1.4、绘制圆弧 1.5、绘制图像 1.6、绘制文字 1.7、随机颜色与简单动画二、WebGL 2.1、HTML5游戏开发 2.2.1、Cocos2D-HTML5 2.2.2、Egret（白鹭引擎）三、SVG 3.1、SVG Hello Wrold 3.2、多种引入SVG的方法 3.3、画直线 3.4、画椭圆 3.5、文本与矩形 3.6、向下兼容与图标四、示例下载一、Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些。 canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。、浏览器支持情况如下： 1.1、创建canvas元素 <canvas id="can" width="800" height="600">不支持Canvas</canvas> 以上代码创建了一个宽度为800像素，高度为600像素的canvas

How can i add a GLSL Fragment Shader Audio Visualization

阅读更多关于 How can i add a GLSL Fragment Shader Audio Visualization

问题 How can i add Audio Visualization support to this class, i would like to add an Audio() object as an input to a GLSL Fragment Shader. An Example of this is https://www.shadertoy.com/view/Mlj3WV. I know this sort of thing can be done in Canvas 2d with waveform Analysis, but this opengl method is far more smooth. /* Code from https://raw.githubusercontent.com/webciter/GLSLFragmentShader/1.0.0/GLSLFragmentShader.js */ /* render function */ /* set the uniform variables for the shader */ gl