The Shader material in threejs is one way to go about getting started with custom shaders in threejs, the other general option would be to look into the raw shader material. The main difference between the two has to do with built-in uniforms and attributes when it comes to the starting state of the GLSL ( openGL Shader Language ) code. For this reason it might be best to start out with the Shader material rather than the raw shader material as there are some built in values that I will not have to worry about setting up myself when it comes to the raw shader material. Yet again it is a bit of a toss up with that as if one wants to learn a thing or two about GLSL alone then the raw material might prove to be a better starting point actually.

In any case the Shader material is what I am starting with, and that will be the main topic of this post today. Using the shader material alone is simple enough, but what is not so simple is coming up with custom GLSL code to use with this material. However one has to start somewhere so this post will start out with some very simply hello world style examples. Before moving on into one or more real examples when it comes to the topic of custom shaders which can end up getting pretty involved.

Read More

The set from points method of the buffer geometry class in threejs is a way to create a new buffer geometry from an array of vector3 class objects. This new buffer geometry instance will just have a position attribute alone, which is okay when it comes to creating Points, or Lines, but not so much for Mesh objects. That is unless additional steps are taken to add the additional attributes that are needed to get the geometry to work well with mesh objects.

Even if one is just interested in creating a buffer geometry with a position attribute only to be used to just draw lines are points I have found that the set from points method might work okay for creating a geometry, but does not work so great as a way to update a geometry over time in a loop. If I want to not just create a geometry, but also update it over time, then I am not going to want to do so by directly working with a position attribute. When doing so it would make sense to also just create and set the position attribute the hard way also while I am at it.

As far as I can tell, it would seem that this set from points method was added for the sake of making things easier when it comes to quickly creating a geometry from an array of points in the form of Vector3 objects for each point in space. In this regard I would say that the set from points method is very easy to use. I just create an array of vector3 objects by one means or another, create a blank buffer geometry object, call the set from points method off of the buffer geometry passing the array of points as an argument and I am done. Simple enough sure, but it comes at a cost compared to doing it the hard way.

Maybe the hard way of doing this can be avoided when it comes to creating the geometry to begin with, but in any case the hard way is still how it needs to happen when it comes to updating. Also the hard way of doing it is not actually that much harder, so then one might as well just do that actually. Still in this post I will be going over a few basic examples of this set from points method, before getting into more advanced examples about buffer attributes, mainly the position attribute.

Read More

Yet another year has past and as such it is time for me to write another one of these blog posts on blogging that I write only once a year as of late. I like to keep the focus more so on tech related topics on this site as it is a github pages website after all, however I do want to keep up with this at least every once in a great while. There is what I am doing that seems to be working a little, but I still have more to learn when it comes to how to go about writing a blog that people will want to read. So I should take a moment to blog about blogging in a effort to make sure that I keep going with what is working, and rethink what I am doing with what is not working.

Read More

The Phong material is one of many built in material options in the core of the threejs JavaScript library. What stands out with this material is the support for specular highlights which can be adjusted by way of the shininess option. Although the material is called Phong it actually uses the Blinn-Phong reflection model rather than a pure Phong Reflection model. If real time performance is of concern then Phong might prove to be a better choice than that of the standard material, and also I have found that I still like to use Phong over the standard material when it comes to just how things simply look regardless of performance also.

Read More

This threejs project examples post is on a javaScript file that I am using to help me with the process of making what I would call a count down, or timer videos. This is just simply a kind of video where there is a count down that starts from when the video starts from a given start time such as 30 seconds, and then counts down to 0. When 0 is reached the video is over, or there is a little additional time that is an alarm sound or something to that effect.

When it comes to making videos for these blog posts using threejs as well as some of my own additional software, I am always thinking about what it is that I should do different with them. For now as of this writing the existing state of affairs is to just continue with simple demo videos that just showcase what the JavaScript code for a given post on threejs will do. Once again I think that this will be the case here, but maybe with only just one video. I can use the countdown module to create one of my usual 30 second demo videos that has been the pattern thus far, however I can also use it to make videos that are any given time length long. So this will then be a great tool for my other collection of video content thus far which is just a general experimental collection of content.

Read More