Has anyone been successful in using GLSL 3 ES shaders with three.js library?
From what I know it is impossible for latest revision (r68) beacuse one can't even set a directive (which is required, and has to be before anything else in shader code):
#version 300 es
beacause of prefix that is added to each shader by three.js.
Does anyone knows any solution to that problem? Would it be enough to change the three.js code to append the directive on the begining of the threejs shader prefix?
Three.js uses WebGL, which is available in web browsers, not GLES, which is a variant of OpenGL for mobile devices. While it is true that WebGL is itself closely related to GLES2, it is still a different thing. And currently, there only exists WebGL 1.0. Maybe future version will be more related to GLES3, but currently, no WebGL implementation will support ES 3 shaders.
You can use glslVersion property of ShaderMaterial. Don't use #version 300 es directive in shader code.
const material = new three.ShaderMaterial({ uniforms: {},
vertexShader: vscode,
fragmentShader: fscode,
glslVersion: three.GLSL3, });
Three.js is now starting to support WebGL 2.0 on the development branch. You can checkout the development version from Github.
In order to use WebGL 2.0, you can simply create a RawShaderMaterial, with your custom code, and add the #version 300 es directive at the top of your shader source.
EDIT: As of 2020 (Three.js > v113), you can directly use a ShaderMaterial and the framework already adds #version 300 es and performs other kind of conversion automatically when using WebGL2
Related
Three.js has good set of Effectcomposers post processing and via shaderpass we can add any GLSL shader. But PixiJS has even great list of filters. Is there some direct way to copy these filters as GLSL code to shaderpass of three.js. Unfortunately these filters are embed deep with uniforms and there appears no simple way to copy these filters in three.js
AFrame 1.1.0 is using THREE.js 123, which by default is now using WebGL2.
Some AFrame components are not working with WebGL2 yet. It would be great if we could use the AFrame with WebGL1. THREE.js still supports WebGL1 rendering.
When creating the renderer, you can pass your own canvas and context to the constructor, instead of letting the engine create its own. So you could simply grab the <canvas> HTMLElement, request a WebGL1 context from it, and use them when initializing the renderer:
var myCanvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');
var renderer = new WebGLRenderer({
canvas: myCanvas,
context: gl
});
According to the maintainer of AFrame, this is not possible currently with 1.1.0.
AFrame creates its own canvas in a-scene.js setupCanvas(), so you can't pass in one with the webgl1 context already set.
We ended up making a patch to our own version of AFrame. You can see the logic here for specifying whether or not to use WebGL2 vs WebGL1 using the renderer system.
https://github.com/8thwall/8frame/commit/533c4304f20153834a85f60a19e161e61ce71ec6
Even with the patch, there are still issues with webgl1 around shader GLSL compatibility.
My question refers to newest version 80 of Three.js.
I am using custom ShaderMaterial with lights and I want to incorporate shadows to the scene. I have followed this tutorial by Edan Kwan.
Unfortunately in rev 80 there is no longer ShaderChunk(shadowmap_fragment) available. I noticed that there is separate ShadowMaterial created (src/materials/ShadowMaterial.js ) but I don't know how to use it with my shader material. Could anyone advise how to use it? Thank you.
I'm creating terrain editor with three.js and i have encountered few problems.
First. Shadows renders on MeshLambertMaterial, but it wont on ShaderMaterial.
Second. How to change object's material (from lambert to shader) on runtime?
Here's demo of my editor: http://78.62.160.169/webgl/editor/
And source code: http://78.62.160.169/webgl/editor/script.js
LambertMaterial is a built-in material, that's supported by the plugins. So shadow plugin supports rendering on the LambertMaterial, while ShaderMaterial is your own shader/material, that should manually enable shadow support, it's not set by the default.
Switching material: https://github.com/mrdoob/three.js/wiki/Updates
here is the example of ShaderMaterial with shadow and fog
https://gist.github.com/wmcmurray/6696fc95f25bbd2401d72a74e9493261
or you can also rewrite a shader from LambertMaterial or other,
make it support your own shader
I am trying to simulate the OpenGL flat shading model using Three.js. My idea is creating an example like http://en.wikipedia.org/wiki/File:Phong-shading-sample.jpg. I was trying to change some different shading models but I cannot obtain the desired result.
Is it possible to create this scene in three.js?
Thanks in advance
Materials e.g. the MeshBasicMaterial have an option called "shading". It can be set to THREE.None, THREE.FlatShading, THREE.SmoothShading.
I am not sure if you need a light source in the first place or wether you have to enable shading for a the whole scene. Look at the demos at the Three.js website for something with shading.