WebGL | 易学教程

loading a file texture in FIRST frame of a feedback loop with swapped buffers in three.js

阅读更多关于 loading a file texture in FIRST frame of a feedback loop with swapped buffers in three.js

问题 I'm working on a website in three.js using several feedback shader loops (texture pingpong). When someone visits the site, the loop should continue from a certain point (depending on when he/she visits). To achieve this I intend to load a picture (eg a jpeg) from the server in the first frame, render this to my pingpong buffers and continue with my normal feedback loop from frame 2 onwards. Here's a stripped down version of my problem, as a feedback function i simply add a small value to the

How to load obj model via three.dart?

阅读更多关于 How to load obj model via three.dart?

问题 I need to load .obj file exported from blender on my Web app. But I'm not able to find a clear howto example. Example code is very much appreciated. 回答1: Three.dart does not have OBJLoader yet. But, it has an STLLoader which one can use to load STL models. The loader is not available in the pub.dartlang.org package as of today. You can get the latest vesions of the package on its github page. You can see an example here. 回答2: You won't get a simple access to your filesystem while using dart

WebGL fragment shader opacity

阅读更多关于 WebGL fragment shader opacity

问题 Alright, first off, I'm pretty new at GLSL shaders, and I'm trying to wrap my head around the following shader #ifdef GL_ES //precision mediump float; precision highp float; #endif uniform vec2 uTimes; varying vec2 texCoord; varying vec2 screenCoord; void main(void) { vec3 col; float c; vec2 tmpv = texCoord * vec2(0.8, 1.0) - vec2(0.95, 1.0); c = exp(-pow(length(tmpv) * 1.8, 2.0)); col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c); gl_FragColor = vec4(col * 0.5, 0); } So far, I

Positioning children objects in scene (car <-> wheels hierarchy)

阅读更多关于 Positioning children objects in scene (car wheels hierarchy)

问题 I need to add car model to scene with wheels as separated objects to allow their easy rotation and possible replacement. The question is wheels positioning - they need to be on exact places in relation to car body. How it can be done in proper way? In WebGL demos and TriggerRally there are existing wheel positions - they were predefined for 3D scene - but how? Can these positions be somehow mapped to Blender model coordinates? I've tried to separate one wheel from body, set pivot point to its

Adding a directional light to a transforming cube in vanilla wegl

阅读更多关于 Adding a directional light to a transforming cube in vanilla wegl

问题 How can I add a direction light to a transforming cube in webGL. I know it requires normals and i've add them in the snippet (i've commented them out) It will also require some math in the vertex shader. unfortunatly this code doesnt work when i uncomment. attribute vec4 coords; uniform mat4 transformMatrix; attribute vec3 normal; attribute vec4 colors; uniform vec3 lightColor; uniform vec3 lightDirection; varying vec4 varyingColors; uniform mat4 perspectiveMatrix; void main(void) { vec3 norm

Three.js not scaling or rotating Mesh on render()

阅读更多关于 Three.js not scaling or rotating Mesh on render()

问题 I've been trying out Three.js today and I've had trouble getting my Mesh to change according using mesh.rotation.x += 10; for example. The code below renders a triangle and the camera moves around onMouseMove but inside the render() function, it fails to scale or rotate the Mesh obj . Appreciate the pointers. <body> <div id="container" style="border: #0f0 solid;"> </div> <script type="text/javascript"> var mouseX = 0, mouseY = 0; windowHalfX = window.innerWidth / 2, windowHalfY = window

Can glsl be used instead of webgl?

阅读更多关于 Can glsl be used instead of webgl?

问题 This may be a bit of a naive question so please go easy on me. But I was looking at shaders at shadertoy.com and I'm amazed at how small the glsl code is for the 3d scenes. Digging deeper I noticed how most of the shaders use a technique called ray marching. This technique makes it possible to avoid using vertices/triangles altogether and just employ the pixel shader and some math to create some pretty complex scenes. So I was wondering why is it that 3d scenes often use triangle meshes with

WebGL: Access buffer from shader

阅读更多关于 WebGL: Access buffer from shader

问题 I need to access a buffer from my shader. The buffer is created from an array. (In the real scenario, the array has 10k+ (variable) numbers.) var myBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, myBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array([1,2,3,4,5,6,7]), gl.STATIC_DRAW); How do I send it so it's usable by the shader? precision mediump float; uniform uint[] myBuffer;//??? void main() { gl_FragColor = vec4(myBuffer[0],myBuffer[1],0,1); } Normally, if it were a

What are the valid types for a WebGL vertex shader attribute?

阅读更多关于 What are the valid types for a WebGL vertex shader attribute?

问题 The following attribute seems fine: attribute vec4 coord; The following attribute complains that an attribute "cannot be bool or int": attribute int ty; The following attribute complains of a "syntax error": attribute uint ty; These results seem quite arbitrary. I can't find a list of the valid types for vertex shader attributes. What are the rules for whether an attribute type is valid in WebGL? 回答1: OpenGL ES Shading Language 1.00 specification, page 36, section 4.3.3: "Attribute": The

SecurityError for same-origin image texImage2D

阅读更多关于 SecurityError for same-origin image texImage2D

问题 I am currently learning WebGL. In a call to texImage2D, which is called when a texture has finished loading, I get the following SecurityError : Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at /path/to/texure.png may not be loaded. However, the file is on the same domain, in fact it is in the same directory as the html file requesting it. Here is the file layout: > js |-> script.js |-> glUtils.js |-> sylvester.js > texture.png >